58 MyAMS.getCSS('/--static--/pyams_gis/css/leaflet-gesture-handling-1.2.1' + MyAMS.devext + '.css', |
57 MyAMS.getCSS('/--static--/pyams_gis/css/leaflet-gesture-handling-1.2.1' + MyAMS.devext + '.css', |
59 'leaflet-gesture-handling'); |
58 'leaflet-gesture-handling'); |
60 } |
59 } |
61 $.when.apply($, required).then(function() { |
60 $.when.apply($, required).then(function() { |
62 |
61 |
63 function createMap(config) { |
62 function createMap(map, config) { |
64 var settings = { |
63 var data = map.data(), |
65 preferCanvas: data.mapLeafletPreferCanvas || false, |
64 settings = { |
66 attributionControl: data.mapLeafletAttributionControl === undefined ? |
65 preferCanvas: data.mapLeafletPreferCanvas || false, |
67 config.attributionControl : |
66 attributionControl: data.mapLeafletAttributionControl === undefined ? |
68 data.mapLeafletAttributionControl, |
67 config.attributionControl : |
69 zoomControl: data.mapLeafletZoomControl === undefined ? |
68 data.mapLeafletAttributionControl, |
70 config.zoomControl : |
69 zoomControl: data.mapLeafletZoomControl === undefined ? |
71 data.mapLeafletZoomControl, |
70 config.zoomControl : |
72 crs: data.mapLeafletCrs || MyAMS.getObject(config.crs) || globals.L.CRS.EPSG3857, |
71 data.mapLeafletZoomControl, |
73 center: data.mapLeafletCenter || config.center, |
72 crs: data.mapLeafletCrs || MyAMS.getObject(config.crs) || globals.L.CRS.EPSG3857, |
74 zoom: data.mapLeafletZoom || config.zoom, |
73 center: data.mapLeafletCenter || config.center, |
75 gestureHandling: true |
74 zoom: data.mapLeafletZoom || config.zoom, |
76 }; |
75 gestureHandling: data.mapLeafletWheelZoom === undefined ? |
|
76 !config.scrollWheelZoom : |
|
77 data.mapLeafletWheelZoom, |
|
78 keyboard: data.mapLeafletKeyboard === undefined ? |
|
79 config.keyboard && !L.Browser.mobile : |
|
80 data.amsLeafletKeyboard |
|
81 }; |
77 settings = $.extend({}, settings, options); |
82 settings = $.extend({}, settings, options); |
78 map.trigger('map.init', [map, settings, config]); |
83 map.trigger('map.init', [map, settings, config]); |
79 var leafmap = L.map(map.attr('id'), settings); |
84 var leafmap = L.map(map.attr('id'), settings); |
80 var layersConfig = []; |
85 var layersConfig = []; |
81 if (config.layers) { |
86 if (config.layers) { |
112 } |
117 } |
113 map.trigger('map.finished', [map, leafmap, config]); |
118 map.trigger('map.finished', [map, leafmap, config]); |
114 }); |
119 }); |
115 } |
120 } |
116 |
121 |
117 var data = map.data(), |
122 var maps = $.map(context, function(elt) { |
118 config = data.mapConfiguration; |
123 return new Promise(function(resolve, reject) { |
119 if (config) { |
124 var map = $(elt), |
120 createMap(config); |
125 data = map.data(), |
121 } else { |
126 config = data.mapConfiguration; |
122 MyAMS.ajax.post(data.mapConfigurationUrl || 'get-map-configuration.json', {}, function(config) { |
127 if (config) { |
123 createMap(config); |
128 createMap(map, config); |
|
129 resolve(); |
|
130 } else { |
|
131 MyAMS.ajax.post(data.mapConfigurationUrl || 'get-map-configuration.json', {}, function(config) { |
|
132 createMap(map, config); |
|
133 resolve(); |
|
134 }); |
|
135 } |
124 }); |
136 }); |
|
137 }); |
|
138 if (globalCallback) { |
|
139 $.when.apply($, maps).then(globalCallback); |
125 } |
140 } |
126 }); |
141 }); |
127 } |
142 } |
128 ); |
143 ); |
129 }, |
144 }, |
249 // hide tooltip |
264 // hide tooltip |
250 var leaveMarker = function(e) { |
265 var leaveMarker = function(e) { |
251 this.closeTooltip(); |
266 this.closeTooltip(); |
252 } |
267 } |
253 |
268 |
254 // create custom icon |
269 maps.each(function(idx, elt) { |
255 var markerIcon = L.icon({ |
270 |
256 iconUrl: markers.icon.url, |
271 var map = $(elt), |
257 iconSize: markers.icon.size, |
272 data = map.data(), |
258 iconAnchor: markers.icon.anchor |
273 leafmap = map.data('leafmap'), |
|
274 config = map.data('leafmap.config'), |
|
275 markers = data.mapMarkers; |
|
276 |
|
277 // create custom icon |
|
278 var markerIcon = L.icon({ |
|
279 iconUrl: markers.icon.url, |
|
280 iconSize: markers.icon.size, |
|
281 iconAnchor: markers.icon.anchor |
|
282 }); |
|
283 // customize cluster icon |
|
284 var markersClusterCustom = new L.MarkerClusterGroup({ |
|
285 iconCreateFunction: function(cluster) { |
|
286 return L.divIcon({ |
|
287 html: cluster.getChildCount(), |
|
288 className: markers.clusterClass || 'map-cluster', |
|
289 iconSize: null |
|
290 }); |
|
291 } |
|
292 }); |
|
293 |
|
294 // object to save markers |
|
295 var icons = {}; |
|
296 |
|
297 // create markers |
|
298 for (var i = 0; i < markers.markers.length; i++) { |
|
299 var markerConfig = markers.markers[i]; |
|
300 var latLng = new L.LatLng(markerConfig.point.y, markerConfig.point.x); |
|
301 var marker = new L.Marker(latLng, { |
|
302 icon: markerIcon, |
|
303 clickURL: markerConfig.href, |
|
304 markerId: markerConfig.id, |
|
305 alt: markerConfig.id |
|
306 }); |
|
307 if (markerConfig.href) { |
|
308 marker.addEventListener('click', clickMarker); |
|
309 } |
|
310 icons[markerConfig.id] = marker; |
|
311 // bind tooltip with title content |
|
312 var label; |
|
313 if (markerConfig.img) { |
|
314 label = '<div>' + |
|
315 '<div class="marker__label p-2"> ' + markerConfig.label + '</div>' + |
|
316 '<div class="text-center">' + |
|
317 '<img src="' + markerConfig.img.src + '" width="' + markerConfig.img.w + '" height="' + markerConfig.img.h + '" alt="" />' + |
|
318 '</div>' + |
|
319 '</div>'; |
|
320 } else { |
|
321 label = markerConfig.label; |
|
322 } |
|
323 if (label) { |
|
324 var className = markers.tooltipClass || 'map-tooltip'; |
|
325 if (markerConfig.img) { |
|
326 className += ' p-0'; |
|
327 } |
|
328 icons[markerConfig.id].bindTooltip(label, { |
|
329 direction: 'top', |
|
330 offset: [0, -markerIcon.options.iconSize[1]], |
|
331 opacity: 1, |
|
332 className: className |
|
333 }); |
|
334 icons[markerConfig.id].addEventListener('mouseover', hoverMarker); |
|
335 icons[markerConfig.id].addEventListener('mouseout', leaveMarker); |
|
336 } |
|
337 markersClusterCustom.addLayer(icons[markerConfig.id]); |
|
338 } |
|
339 leafmap.addLayer(markersClusterCustom); |
|
340 if (config.adjust === 'auto') { |
|
341 leafmap.fitBounds(markersClusterCustom.getBounds()); |
|
342 if (markers.markers.length === 1) { |
|
343 leafmap.setZoom(config.zoom); |
|
344 } |
|
345 } |
259 }); |
346 }); |
260 // customize cluster icon |
|
261 var markersClusterCustom = new L.MarkerClusterGroup({ |
|
262 iconCreateFunction: function(cluster) { |
|
263 return L.divIcon({ |
|
264 html: cluster.getChildCount(), |
|
265 className: markers.clusterClass || 'map-cluster', |
|
266 iconSize: null |
|
267 }); |
|
268 } |
|
269 }); |
|
270 |
|
271 // object to save markers |
|
272 var icons = {}; |
|
273 |
|
274 // create markers |
|
275 for (var i = 0; i < markers.markers.length; i++) { |
|
276 var markerConfig = markers.markers[i]; |
|
277 var latLng = new L.LatLng(markerConfig.point.y, markerConfig.point.x); |
|
278 var marker = new L.Marker(latLng, { |
|
279 icon: markerIcon, |
|
280 clickURL: markerConfig.href, |
|
281 markerId: markerConfig.id, |
|
282 alt: markerConfig.id |
|
283 }); |
|
284 if (markerConfig.href) { |
|
285 marker.addEventListener('click', clickMarker); |
|
286 } |
|
287 icons[markerConfig.id] = marker; |
|
288 // bind tooltip with title content |
|
289 var label; |
|
290 if (markerConfig.img) { |
|
291 label = '<div>' + |
|
292 '<div class="marker__label p-2"> ' + markerConfig.label + '</div>' + |
|
293 '<div class="text-center">' + |
|
294 '<img src="' + markerConfig.img.src + '" width="' + markerConfig.img.w + '" height="' + markerConfig.img.h + '" alt="" />' + |
|
295 '</div>' + |
|
296 '</div>'; |
|
297 } else { |
|
298 label = markerConfig.label; |
|
299 } |
|
300 if (label) { |
|
301 var className = markers.tooltipClass || 'map-tooltip'; |
|
302 if (markerConfig.img) { |
|
303 className += ' p-0'; |
|
304 } |
|
305 icons[markerConfig.id].bindTooltip(label, { |
|
306 direction: 'top', |
|
307 offset: [0, -markerIcon.options.iconSize[1]], |
|
308 opacity: 1, |
|
309 className: className |
|
310 }); |
|
311 icons[markerConfig.id].addEventListener('mouseover', hoverMarker); |
|
312 icons[markerConfig.id].addEventListener('mouseout', leaveMarker); |
|
313 } |
|
314 markersClusterCustom.addLayer(icons[markerConfig.id]); |
|
315 } |
|
316 leafmap.addLayer(markersClusterCustom); |
|
317 if (config.adjust === 'auto') { |
|
318 leafmap.fitBounds(markersClusterCustom.getBounds()); |
|
319 if (markers.markers.length === 1) { |
|
320 debugger |
|
321 leafmap.setZoom(config.zoom); |
|
322 } |
|
323 } |
|
324 }); |
347 }); |
325 } |
348 } |
326 }, |
349 }, |
327 |
350 |
328 /** |
351 /** |