I have leaflet map attached to my form, this is the container div I used:
$form['general']['map'] = array(
'#markup' => '<div class="map-wrapper" id="ngmap"></div>',
);
Everything works fine and map's being loaded. I also added an image upload functionality in bottom of my form like this:
$form['detailed']['img'] = array(
'#type' => 'managed_file',
'#upload_location' => 'public://map-images/',
'#required' => TRUE,
'#title' => 'Image',
'#default_value' => $complain['image'],
);
When I click on ajax upload button after selecting the image file, it throws an error and nothings happen:
Uncaught Error: Map container is already initialized.
Seems like uploading file is forcing leaflet.js to reload map container. My guess is ajax is reloading and rendering the whole form all over again.
How's that possible and what's the easiest fix for this? Thank you.
Edit: How I added initializing function, look like this attached js is being recalled everytime I click on upload image ajax button:
(function($, Drupal) {
// Custom functions and variables can go here
Drupal.behaviors.moduleName = {
attach:function() {
map = new L.Map('ngmap', {center: new L.LatLng(37.472, 57.327), zoom: 13});
googleLayer = new L.Google('HYBRID');
map.addLayer(googleLayer);
}
};
}(jQuery, Drupal));