diff --git a/js/leaflet.drupal.js b/js/leaflet.drupal.js index ae94a0f..2a23d76 100644 --- a/js/leaflet.drupal.js +++ b/js/leaflet.drupal.js @@ -3,144 +3,147 @@ Drupal.behaviors.leaflet = { attach: function(context, settings) { - // For each Leaflet Map/id defined process with Leaflet Map and Features - // generation. - $.each(settings.leaflet, function(m, data) { - $('#' + data.mapid, context).each(function() { - let map_container = $(this); - let mapid = data.mapid; - - // If the attached context contains any leaflet maps, make sure we have a Drupal.leaflet_widget object. - if (map_container.data('leaflet') === undefined) { - map_container.data('leaflet', new Drupal.Leaflet(L.DomUtil.get(mapid), mapid, data.map)); - if (data.features.length > 0) { - // Add Leaflet Map Features. - map_container.data('leaflet').add_features(data.features, true); - } - - // Add the Leaflet map to data settings object to make it accessible. - // @NOTE: This is used by the Leaflet Widget module. - data.lMap = map_container.data('leaflet').lMap; - - // Add the Leaflet Map Markers to data settings object to make it accessible. - data.markers = map_container.data('leaflet').markers; - - // Set initial Map position to wrap its defined bounds. - map_container.data('leaflet').fitBounds(); - } + once('myLeafeltBehavior', 'html').forEach(function (element) { + + // For each Leaflet Map/id defined process with Leaflet Map and Features + // generation. + $.each(settings.leaflet, function (m, data) { + $('#' + data.mapid, context).each(function () { + let map_container = $(this); + let mapid = data.mapid; + + // If the attached context contains any leaflet maps, make sure we have a Drupal.leaflet_widget object. + if (map_container.data('leaflet') === undefined) { + map_container.data('leaflet', new Drupal.Leaflet(L.DomUtil.get(mapid), mapid, data.map)); + if (data.features.length > 0) { + // Add Leaflet Map Features. + map_container.data('leaflet').add_features(data.features, true); + } + + // Add the Leaflet map to data settings object to make it accessible. + // @NOTE: This is used by the Leaflet Widget module. + data.lMap = map_container.data('leaflet').lMap; + + // Add the Leaflet Map Markers to data settings object to make it accessible. + data.markers = map_container.data('leaflet').markers; + + // Set initial Map position to wrap its defined bounds. + map_container.data('leaflet').fitBounds(); + } - else { - // If we already had a map instance, add new features. - // @TODO Does this work? Needs testing. - if (data.features !== undefined) { - map_container.data('leaflet').add_features(data.features); - } - } + else { + // If we already had a map instance, add new features. + // @TODO Does this work? Needs testing. + if (data.features !== undefined) { + map_container.data('leaflet').add_features(data.features); + } + } - // Set the start center and the start zoom. - if (!map_container.data('leaflet').start_center && !map_container.data('leaflet').start_zoom) { - map_container.data('leaflet').start_center = map_container.data('leaflet').lMap.getCenter(); - map_container.data('leaflet').start_zoom = map_container.data('leaflet').lMap.getZoom(); - } + // Set the start center and the start zoom. + if (!map_container.data('leaflet').start_center && !map_container.data('leaflet').start_zoom) { + map_container.data('leaflet').start_center = map_container.data('leaflet').lMap.getCenter(); + map_container.data('leaflet').start_zoom = map_container.data('leaflet').lMap.getZoom(); + } - // Define the global Drupal.Leaflet[mapid] object to be accessible - // from outside - NOTE: This should always be created after setting - // the (above) start center. - Drupal.Leaflet[mapid] = map_container.data('leaflet'); - - // Add the Map Geocoder Control if requested. - if (!Drupal.Leaflet[mapid].geocoder_control && Drupal.Leaflet.prototype.map_geocoder_control) { - let mapGeocoderControlDiv = document.createElement('div'); - Drupal.Leaflet[mapid].geocoder_control = Drupal.Leaflet.prototype.map_geocoder_control(mapGeocoderControlDiv, mapid); - Drupal.Leaflet[mapid].geocoder_control.addTo(Drupal.Leaflet[mapid].lMap) - let geocoder_settings = drupalSettings.leaflet[mapid].map.settings.geocoder.settings; - Drupal.Leaflet.prototype.map_geocoder_control.autocomplete(mapid, geocoder_settings); - } + // Define the global Drupal.Leaflet[mapid] object to be accessible + // from outside - NOTE: This should always be created after setting + // the (above) start center. + Drupal.Leaflet[mapid] = map_container.data('leaflet'); + + // Add the Map Geocoder Control if requested. + if (!Drupal.Leaflet[mapid].geocoder_control && Drupal.Leaflet.prototype.map_geocoder_control) { + let mapGeocoderControlDiv = document.createElement('div'); + Drupal.Leaflet[mapid].geocoder_control = Drupal.Leaflet.prototype.map_geocoder_control(mapGeocoderControlDiv, mapid); + Drupal.Leaflet[mapid].geocoder_control.addTo(Drupal.Leaflet[mapid].lMap) + let geocoder_settings = drupalSettings.leaflet[mapid].map.settings.geocoder.settings; + Drupal.Leaflet.prototype.map_geocoder_control.autocomplete(mapid, geocoder_settings); + } - // Add the Layers Control, if initialised/existing. - if (Drupal.Leaflet[mapid].layer_control) { - Drupal.Leaflet[mapid].lMap.addControl(Drupal.Leaflet[mapid].layer_control); - } + // Add the Layers Control, if initialised/existing. + if (Drupal.Leaflet[mapid].layer_control) { + Drupal.Leaflet[mapid].lMap.addControl(Drupal.Leaflet[mapid].layer_control); + } - // Add and Initialise the Map Reset View Control if requested. - if (!Drupal.Leaflet[mapid].reset_view_control && map_container.data('leaflet').map_settings.reset_map && map_container.data('leaflet').map_settings.reset_map.control) { - let map_reset_view_options = map_container.data('leaflet').map_settings.reset_map.options ? JSON.parse(map_container.data('leaflet').map_settings.reset_map.options) : {}; - map_reset_view_options.latlng = map_container.data('leaflet').start_center; - map_reset_view_options.zoom = map_container.data('leaflet').start_zoom; - Drupal.Leaflet[mapid].reset_view_control = L.control.resetView(map_reset_view_options).addTo(map_container.data('leaflet').lMap); - } + // Add and Initialise the Map Reset View Control if requested. + if (!Drupal.Leaflet[mapid].reset_view_control && map_container.data('leaflet').map_settings.reset_map && map_container.data('leaflet').map_settings.reset_map.control) { + let map_reset_view_options = map_container.data('leaflet').map_settings.reset_map.options ? JSON.parse(map_container.data('leaflet').map_settings.reset_map.options) : {}; + map_reset_view_options.latlng = map_container.data('leaflet').start_center; + map_reset_view_options.zoom = map_container.data('leaflet').start_zoom; + Drupal.Leaflet[mapid].reset_view_control = L.control.resetView(map_reset_view_options).addTo(map_container.data('leaflet').lMap); + } - // Add the Locate Control if requested. - if (!Drupal.Leaflet[mapid].locate_control && map_container.data('leaflet').map_settings.locate && map_container.data('leaflet').map_settings.locate.control) { - let locate_options = map_container.data('leaflet').map_settings.locate.options ? JSON.parse(map_container.data('leaflet').map_settings.locate.options) : {}; - Drupal.Leaflet[mapid].locate_control = L.control.locate(locate_options).addTo(map_container.data('leaflet').lMap); + // Add the Locate Control if requested. + if (!Drupal.Leaflet[mapid].locate_control && map_container.data('leaflet').map_settings.locate && map_container.data('leaflet').map_settings.locate.control) { + let locate_options = map_container.data('leaflet').map_settings.locate.options ? JSON.parse(map_container.data('leaflet').map_settings.locate.options) : {}; + Drupal.Leaflet[mapid].locate_control = L.control.locate(locate_options).addTo(map_container.data('leaflet').lMap); - // In case this Leaflet Map is not in a Widget Context, eventually perform the Automatic User Locate, if requested. - if (!data.hasOwnProperty('leaflet_widget') && map_container.data('leaflet').map_settings.hasOwnProperty('locate') && map_container.data('leaflet').map_settings.locate.automatic) { - Drupal.Leaflet[mapid].locate_control.start(); - } - } + // In case this Leaflet Map is not in a Widget Context, eventually perform the Automatic User Locate, if requested. + if (!data.hasOwnProperty('leaflet_widget') && map_container.data('leaflet').map_settings.hasOwnProperty('locate') && map_container.data('leaflet').map_settings.locate.automatic) { + Drupal.Leaflet[mapid].locate_control.start(); + } + } - // Add Fullscreen Control, if requested. - if (!Drupal.Leaflet[mapid].fullscreen_control && map_container.data('leaflet').map_settings.fullscreen && map_container.data('leaflet').map_settings.fullscreen.control) { - let map_fullscreen_options = map_container.data('leaflet').map_settings.fullscreen.options ? JSON.parse(map_container.data('leaflet').map_settings.fullscreen.options) : {}; - Drupal.Leaflet[mapid].fullscreen_control = L.control.fullscreen( - map_fullscreen_options - ).addTo(map_container.data('leaflet').lMap); - } + // Add Fullscreen Control, if requested. + if (!Drupal.Leaflet[mapid].fullscreen_control && map_container.data('leaflet').map_settings.fullscreen && map_container.data('leaflet').map_settings.fullscreen.control) { + let map_fullscreen_options = map_container.data('leaflet').map_settings.fullscreen.options ? JSON.parse(map_container.data('leaflet').map_settings.fullscreen.options) : {}; + Drupal.Leaflet[mapid].fullscreen_control = L.control.fullscreen( + map_fullscreen_options + ).addTo(map_container.data('leaflet').lMap); + } - // Attach Leaflet Map listeners On Popup Open. - data.lMap.on('popupopen', function(e) { - - // On leaflet-ajax-popup selector, fetch and set Ajax content. - let element = e.popup._contentNode; - let content = $('[data-leaflet-ajax-popup]', element); - if (content.length) { - let url = content.data('leaflet-ajax-popup'); - Drupal.ajax({url: url}).execute().done(function () { - - // Copy the html we received via AJAX to the popup, so we won't - // have to make another AJAX call (#see 3258780). - e.popup.setContent(element.innerHTML); - - // Attach drupal behaviors on new content. - Drupal.attachBehaviors(element, drupalSettings); - }). - // In case of failing fetching data. - fail(function() { - e.popup.close(); + // Attach Leaflet Map listeners On Popup Open. + data.lMap.on('popupopen', function (e) { + + // On leaflet-ajax-popup selector, fetch and set Ajax content. + let element = e.popup._contentNode; + let content = $('[data-leaflet-ajax-popup]', element); + if (content.length) { + let url = content.data('leaflet-ajax-popup'); + Drupal.ajax({url: url}).execute().done(function () { + + // Copy the html we received via AJAX to the popup, so we won't + // have to make another AJAX call (#see 3258780). + e.popup.setContent(element.innerHTML); + + // Attach drupal behaviors on new content. + Drupal.attachBehaviors(element, drupalSettings); + }). + // In case of failing fetching data. + fail(function () { + e.popup.close(); + }); + } + + // Make the (eventually present) Tooltip disappear on Popup Open + // in case the Popup is generated from a _source. + if (e.popup._source) { + let tooltip = e.popup._source.getTooltip(); + // not all features will have tooltips! + if (tooltip) { + // use opacity to make the tooltip disappear. + e.popup._source.getTooltip().setOpacity(0); + } + } }); - } - - // Make the (eventually present) Tooltip disappear on Popup Open - // in case the Popup is generated from a _source. - if (e.popup._source) { - let tooltip = e.popup._source.getTooltip(); - // not all features will have tooltips! - if (tooltip) { - // use opacity to make the tooltip disappear. - e.popup._source.getTooltip().setOpacity(0); - } - } - }); - // Attach Leaflet Map listeners On Popup Close. - data.lMap.on('popupclose', function (e) { - // Make the (eventually present) Tooltip re-appear on Popup Close. - // in case the Popup is generated from a _source. - if (e.popup._source) { - let tooltip = e.popup._source.getTooltip(); - if (tooltip) tooltip.setOpacity(0.9); - } - }); + // Attach Leaflet Map listeners On Popup Close. + data.lMap.on('popupclose', function (e) { + // Make the (eventually present) Tooltip re-appear on Popup Close. + // in case the Popup is generated from a _source. + if (e.popup._source) { + let tooltip = e.popup._source.getTooltip(); + if (tooltip) tooltip.setOpacity(0.9); + } + }); - // NOTE: don't change this trigger arguments print, for back porting - // compatibility. - $(document).trigger('leafletMapInit', [data.map, data.lMap, mapid, data.markers]); - // (Keep also the pre-existing event for back port compatibility) - $(document).trigger('leaflet.map', [data.map, data.lMap, mapid, data.markers]); + // NOTE: don't change this trigger arguments print, for back porting + // compatibility. + $(document).trigger('leafletMapInit', [data.map, data.lMap, mapid, data.markers]); + // (Keep also the pre-existing event for back port compatibility) + $(document).trigger('leaflet.map', [data.map, data.lMap, mapid, data.markers]); + }); + }); }); - }); } }; @@ -418,7 +421,7 @@ if (feature.type === 'point') { this.bounds.push([feature.lat, feature.lon]); } else { - this.bounds.push(lFeature.getBounds().getSouthWest(), lFeature.getBounds().getNorthEast()); + this.bounds.push(lFeature.getBounds().getSouthWest(), lFeature.getBounds().getNorthEast()); } }; diff --git a/js/leaflet.widget.js b/js/leaflet.widget.js index 100de35..6abc975 100644 --- a/js/leaflet.widget.js +++ b/js/leaflet.widget.js @@ -4,22 +4,24 @@ (function ($, Drupal, drupalSettings) { Drupal.behaviors.leaflet_widget = { attach: function (context, settings) { - $.each(settings.leaflet, function (map_id, settings) { - $('#' + map_id, context).each(function () { - let map_container = $(this); - // If the attached context contains any leaflet maps with widgets, make sure we have a - // Drupal.leaflet_widget object. - if (map_container.data('leaflet_widget') === undefined) { - let lMap = drupalSettings.leaflet[map_id].lMap; - map_container.data('leaflet_widget', new Drupal.leaflet_widget(map_container, lMap, settings)); - } - else { - // If we already had a widget, update map to make sure that WKT and map are synchronized. - map_container.data('leaflet_widget').update_leaflet_widget_map(); - map_container.data('leaflet_widget').update_input_state(); - } + once('myLeafeltWidgetBehavior', 'html').forEach(function (element) { + $.each(settings.leaflet, function (map_id, settings) { + $('#' + map_id, context).each(function () { + let map_container = $(this); + // If the attached context contains any leaflet maps with widgets, make sure we have a + // Drupal.leaflet_widget object. + if (map_container.data('leaflet_widget') === undefined) { + let lMap = drupalSettings.leaflet[map_id].lMap; + map_container.data('leaflet_widget', new Drupal.leaflet_widget(map_container, lMap, settings)); + } + else { + // If we already had a widget, update map to make sure that WKT and map are synchronized. + map_container.data('leaflet_widget').update_leaflet_widget_map(); + map_container.data('leaflet_widget').update_input_state(); + } + }); }); - }); + }) } };