--- a/src/pyams_gis/resources/js/pyams_gis.js Mon Feb 01 13:27:46 2021 +0100
+++ b/src/pyams_gis/resources/js/pyams_gis.js Mon Feb 01 13:28:18 2021 +0100
@@ -42,8 +42,7 @@
return group;
},
- init: function(context, options, callback) {
- var map = context;
+ init: function(context, options, callback, globalCallback) {
MyAMS.ajax.check([
globals.L
], [
@@ -60,20 +59,26 @@
}
$.when.apply($, required).then(function() {
- function createMap(config) {
- var settings = {
- preferCanvas: data.mapLeafletPreferCanvas || false,
- attributionControl: data.mapLeafletAttributionControl === undefined ?
- config.attributionControl :
- data.mapLeafletAttributionControl,
- zoomControl: data.mapLeafletZoomControl === undefined ?
- config.zoomControl :
- data.mapLeafletZoomControl,
- crs: data.mapLeafletCrs || MyAMS.getObject(config.crs) || globals.L.CRS.EPSG3857,
- center: data.mapLeafletCenter || config.center,
- zoom: data.mapLeafletZoom || config.zoom,
- gestureHandling: true
- };
+ function createMap(map, config) {
+ var data = map.data(),
+ settings = {
+ preferCanvas: data.mapLeafletPreferCanvas || false,
+ attributionControl: data.mapLeafletAttributionControl === undefined ?
+ config.attributionControl :
+ data.mapLeafletAttributionControl,
+ zoomControl: data.mapLeafletZoomControl === undefined ?
+ config.zoomControl :
+ data.mapLeafletZoomControl,
+ crs: data.mapLeafletCrs || MyAMS.getObject(config.crs) || globals.L.CRS.EPSG3857,
+ center: data.mapLeafletCenter || config.center,
+ zoom: data.mapLeafletZoom || config.zoom,
+ gestureHandling: data.mapLeafletWheelZoom === undefined ?
+ !config.scrollWheelZoom :
+ data.mapLeafletWheelZoom,
+ keyboard: data.mapLeafletKeyboard === undefined ?
+ config.keyboard && !L.Browser.mobile :
+ data.amsLeafletKeyboard
+ };
settings = $.extend({}, settings, options);
map.trigger('map.init', [map, settings, config]);
var leafmap = L.map(map.attr('id'), settings);
@@ -114,14 +119,24 @@
});
}
- var data = map.data(),
- config = data.mapConfiguration;
- if (config) {
- createMap(config);
- } else {
- MyAMS.ajax.post(data.mapConfigurationUrl || 'get-map-configuration.json', {}, function(config) {
- createMap(config);
+ var maps = $.map(context, function(elt) {
+ return new Promise(function(resolve, reject) {
+ var map = $(elt),
+ data = map.data(),
+ config = data.mapConfiguration;
+ if (config) {
+ createMap(map, config);
+ resolve();
+ } else {
+ MyAMS.ajax.post(data.mapConfigurationUrl || 'get-map-configuration.json', {}, function(config) {
+ createMap(map, config);
+ resolve();
+ });
+ }
});
+ });
+ if (globalCallback) {
+ $.when.apply($, maps).then(globalCallback);
}
});
}
@@ -223,7 +238,7 @@
*/
markers: {
- init: function(leafmap, markers, config) {
+ init: function(maps) {
MyAMS.ajax.check([
L.MarkerClusterGroup
@@ -251,76 +266,84 @@
this.closeTooltip();
}
- // create custom icon
- var markerIcon = L.icon({
- iconUrl: markers.icon.url,
- iconSize: markers.icon.size,
- iconAnchor: markers.icon.anchor
- });
- // customize cluster icon
- var markersClusterCustom = new L.MarkerClusterGroup({
- iconCreateFunction: function(cluster) {
- return L.divIcon({
- html: cluster.getChildCount(),
- className: markers.clusterClass || 'map-cluster',
- iconSize: null
+ maps.each(function(idx, elt) {
+
+ var map = $(elt),
+ data = map.data(),
+ leafmap = map.data('leafmap'),
+ config = map.data('leafmap.config'),
+ markers = data.mapMarkers;
+
+ // create custom icon
+ var markerIcon = L.icon({
+ iconUrl: markers.icon.url,
+ iconSize: markers.icon.size,
+ iconAnchor: markers.icon.anchor
+ });
+ // customize cluster icon
+ var markersClusterCustom = new L.MarkerClusterGroup({
+ iconCreateFunction: function(cluster) {
+ return L.divIcon({
+ html: cluster.getChildCount(),
+ className: markers.clusterClass || 'map-cluster',
+ iconSize: null
+ });
+ }
+ });
+
+ // object to save markers
+ var icons = {};
+
+ // create markers
+ for (var i = 0; i < markers.markers.length; i++) {
+ var markerConfig = markers.markers[i];
+ var latLng = new L.LatLng(markerConfig.point.y, markerConfig.point.x);
+ var marker = new L.Marker(latLng, {
+ icon: markerIcon,
+ clickURL: markerConfig.href,
+ markerId: markerConfig.id,
+ alt: markerConfig.id
});
+ if (markerConfig.href) {
+ marker.addEventListener('click', clickMarker);
+ }
+ icons[markerConfig.id] = marker;
+ // bind tooltip with title content
+ var label;
+ if (markerConfig.img) {
+ label = '<div>' +
+ '<div class="marker__label p-2"> ' + markerConfig.label + '</div>' +
+ '<div class="text-center">' +
+ '<img src="' + markerConfig.img.src + '" width="' + markerConfig.img.w + '" height="' + markerConfig.img.h + '" alt="" />' +
+ '</div>' +
+ '</div>';
+ } else {
+ label = markerConfig.label;
+ }
+ if (label) {
+ var className = markers.tooltipClass || 'map-tooltip';
+ if (markerConfig.img) {
+ className += ' p-0';
+ }
+ icons[markerConfig.id].bindTooltip(label, {
+ direction: 'top',
+ offset: [0, -markerIcon.options.iconSize[1]],
+ opacity: 1,
+ className: className
+ });
+ icons[markerConfig.id].addEventListener('mouseover', hoverMarker);
+ icons[markerConfig.id].addEventListener('mouseout', leaveMarker);
+ }
+ markersClusterCustom.addLayer(icons[markerConfig.id]);
+ }
+ leafmap.addLayer(markersClusterCustom);
+ if (config.adjust === 'auto') {
+ leafmap.fitBounds(markersClusterCustom.getBounds());
+ if (markers.markers.length === 1) {
+ leafmap.setZoom(config.zoom);
+ }
}
});
-
- // object to save markers
- var icons = {};
-
- // create markers
- for (var i = 0; i < markers.markers.length; i++) {
- var markerConfig = markers.markers[i];
- var latLng = new L.LatLng(markerConfig.point.y, markerConfig.point.x);
- var marker = new L.Marker(latLng, {
- icon: markerIcon,
- clickURL: markerConfig.href,
- markerId: markerConfig.id,
- alt: markerConfig.id
- });
- if (markerConfig.href) {
- marker.addEventListener('click', clickMarker);
- }
- icons[markerConfig.id] = marker;
- // bind tooltip with title content
- var label;
- if (markerConfig.img) {
- label = '<div>' +
- '<div class="marker__label p-2"> ' + markerConfig.label + '</div>' +
- '<div class="text-center">' +
- '<img src="' + markerConfig.img.src + '" width="' + markerConfig.img.w + '" height="' + markerConfig.img.h + '" alt="" />' +
- '</div>' +
- '</div>';
- } else {
- label = markerConfig.label;
- }
- if (label) {
- var className = markers.tooltipClass || 'map-tooltip';
- if (markerConfig.img) {
- className += ' p-0';
- }
- icons[markerConfig.id].bindTooltip(label, {
- direction: 'top',
- offset: [0, -markerIcon.options.iconSize[1]],
- opacity: 1,
- className: className
- });
- icons[markerConfig.id].addEventListener('mouseover', hoverMarker);
- icons[markerConfig.id].addEventListener('mouseout', leaveMarker);
- }
- markersClusterCustom.addLayer(icons[markerConfig.id]);
- }
- leafmap.addLayer(markersClusterCustom);
- if (config.adjust === 'auto') {
- leafmap.fitBounds(markersClusterCustom.getBounds());
- if (markers.markers.length === 1) {
- debugger
- leafmap.setZoom(config.zoom);
- }
- }
});
}
},