42 return group; |
42 return group; |
43 }, |
43 }, |
44 |
44 |
45 init: function(context, options, callback) { |
45 init: function(context, options, callback) { |
46 var map = context; |
46 var map = context; |
47 MyAMS.ajax.check(globals.L, |
47 MyAMS.ajax.check([ |
48 '/--static--/pyams_gis/js/leaflet-1.0.3' + MyAMS.devext + '.js', |
48 globals.L |
49 function(first_load) { |
49 ], [ |
50 if (first_load) { |
50 '/--static--/pyams_gis/js/leaflet-1.7.1' + MyAMS.devext + '.js' |
51 L = globals.L; |
51 ], function(first_load) { |
52 L.Control.Layers.prototype._addItem = PyAMS_GIS._layersControlAddItem; |
52 var required = []; |
|
53 if (first_load) { |
|
54 L = globals.L; |
|
55 L.Control.Layers.prototype._addItem = PyAMS_GIS._layersControlAddItem; |
|
56 required.push(MyAMS.getScript('/--static--/pyams_gis/js/leaflet-gesture-handling-1.2.1' + MyAMS.devext + '.js')); |
|
57 MyAMS.getCSS('/--static--/pyams_gis/css/leaflet-1.7.1' + MyAMS.devext + '.css', 'leaflet'); |
|
58 MyAMS.getCSS('/--static--/pyams_gis/css/leaflet-gesture-handling-1.2.1' + MyAMS.devext + '.css', |
|
59 'leaflet-gesture-handling'); |
|
60 } |
|
61 $.when.apply($, required).then(function() { |
|
62 |
|
63 function createMap(config) { |
|
64 var settings = { |
|
65 preferCanvas: data.mapLeafletPreferCanvas || false, |
|
66 attributionControl: data.mapLeafletAttributionControl === undefined ? |
|
67 config.attributionControl : |
|
68 data.mapLeafletAttributionControl, |
|
69 zoomControl: data.mapLeafletZoomControl === undefined ? |
|
70 config.zoomControl : |
|
71 data.mapLeafletZoomControl, |
|
72 crs: data.mapLeafletCrs || MyAMS.getObject(config.crs) || globals.L.CRS.EPSG3857, |
|
73 center: data.mapLeafletCenter || config.center, |
|
74 zoom: data.mapLeafletZoom || config.zoom, |
|
75 gestureHandling: true |
|
76 }; |
|
77 settings = $.extend({}, settings, options); |
|
78 map.trigger('map.init', [map, settings, config]); |
|
79 var leafmap = L.map(map.attr('id'), settings); |
|
80 var layersConfig = []; |
|
81 if (config.layers) { |
|
82 for (var idx = 0; idx < config.layers.length; idx++) { |
|
83 var layerConfig = config.layers[idx]; |
|
84 map.trigger('map.layer.init', [map, layerConfig]); |
|
85 layersConfig.push(PyAMS_GIS.getLayer(map, leafmap, layerConfig)); |
53 } |
86 } |
54 MyAMS.getCSS('/--static--/pyams_gis/css/leaflet-1.0.3' + MyAMS.devext + '.css', |
87 } else { |
55 'leaflet', function() { |
88 layersConfig.push(L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { |
56 MyAMS.ajax.post('get-map-configuration.json', {}, function(config) { |
89 maxZoom: 19, |
57 var data = map.data(); |
90 id: 'osm', |
58 var settings = { |
91 attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' |
59 preferCanvas: data.mapLeafletPreferCanvas || false, |
92 })); |
60 attributionControl: data.mapLeafletAttributionControl === undefined ? |
93 } |
61 config.attributionControl : |
94 $.when.apply($, layersConfig).then(function(...layers) { |
62 data.mapLeafletAttributionControl, |
95 for (var idx=0; idx < layers.length; idx++) { |
63 zoomControl: data.mapLeafletZoomControl === undefined ? |
96 layers[idx].addTo(leafmap); |
64 config.zoomControl : |
97 } |
65 data.mapLeafletZoomControl, |
98 if (config.zoomControl && (data.mapLeafletHideZoomControl !== true)) { |
66 crs: data.mapLeafletCrs || MyAMS.getObject(config.crs) || globals.L.CRS.EPSG3857, |
99 L.control.scale().addTo(leafmap); |
67 center: data.mapLeafletCenter || config.center, |
100 } |
68 zoom: data.mapLeafletZoom || config.zoom |
101 if (config.center) { |
69 }; |
102 leafmap.setView(new L.LatLng(config.center.lat, config.center.lon), |
70 settings = $.extend({}, settings, options); |
103 config.zoom || 13); |
71 map.trigger('map.init', [map, settings, config]); |
104 } else if (config.bounds) { |
72 var leafmap = L.map(map.attr('id'), settings); |
105 leafmap.fitBounds(config.bounds); |
73 if (config.layers) { |
106 } |
74 for (var index = 0; index < config.layers.length; index++) { |
107 map.data('leafmap', leafmap); |
75 var layerConfig = config.layers[index]; |
108 map.data('leafmap.config', config); |
76 map.trigger('map.layer.init', [map, layerConfig]); |
109 map.trigger('map.finishing', [map, leafmap, config]); |
77 PyAMS_GIS.getLayer(layerConfig).addTo(leafmap); |
110 if (callback) { |
78 } |
111 callback(leafmap, config); |
79 } else { |
112 } |
80 L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { |
113 map.trigger('map.finished', [map, leafmap, config]); |
81 maxZoom: 19, |
114 }); |
82 id: 'osm', |
115 } |
83 attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' |
116 |
84 }).addTo(leafmap); |
117 var data = map.data(), |
85 } |
118 config = data.mapConfiguration; |
86 if (config.zoomControl && (data.mapLeafletHideZoomControl !== true)) { |
119 if (config) { |
87 L.control.scale().addTo(leafmap); |
120 createMap(config); |
88 } |
121 } else { |
89 if (config.bounds) { |
122 MyAMS.ajax.post(data.mapConfigurationUrl || 'get-map-configuration.json', {}, function(config) { |
90 leafmap.fitBounds(config.bounds); |
123 createMap(config); |
91 } |
124 }); |
92 map.data('leafmap', leafmap); |
125 } |
93 map.data('leafmap.config', config); |
126 }); |
94 map.trigger('map.finishing', [map, leafmap]); |
127 } |
95 if (callback) { |
128 ); |
96 callback(leafmap, config); |
|
97 } |
|
98 map.trigger('map.finished', [map, leafmap]); |
|
99 }); |
|
100 }); |
|
101 }); |
|
102 }, |
129 }, |
103 |
130 |
104 getLayer: function(layer) { |
131 getLayer: function(map, leafmap, layer) { |
105 var factory = MyAMS.getObject(layer.factory); |
132 var factory = MyAMS.getObject(layer.factory); |
106 if (factory !== undefined) { |
133 if (factory !== undefined) { |
107 delete layer.factory; |
134 delete layer.factory; |
108 var deferred = []; |
135 var deferred = []; |
109 if (layer.dependsOn) { |
136 if (layer.dependsOn) { |
118 delete layer.dependsOn; |
145 delete layer.dependsOn; |
119 } |
146 } |
120 if (deferred.length > 0) { |
147 if (deferred.length > 0) { |
121 $.when.apply($, deferred); |
148 $.when.apply($, deferred); |
122 } |
149 } |
123 return factory(layer); |
150 return factory(map, leafmap, layer); |
124 } |
151 } |
125 }, |
152 }, |
126 |
153 |
127 factory: { |
154 factory: { |
128 TileLayer: function(layer) { |
155 GeoJSON: function(map, leafmap, layer) { |
|
156 var url = layer.url; |
|
157 delete layer.url; |
|
158 var result = L.geoJSON(null, layer); |
|
159 map.on('map.finished', function(evt, map, leafmap, config) { |
|
160 $.get(url, function(data) { |
|
161 result.addData(data.geometry, { |
|
162 style: layer.style |
|
163 }); |
|
164 if (config.fitLayer === layer.name) { |
|
165 leafmap.fitBounds(result.getBounds()); |
|
166 } |
|
167 }); |
|
168 }); |
|
169 return result; |
|
170 }, |
|
171 TileLayer: function(map, leafmap, layer) { |
129 var url = layer.url; |
172 var url = layer.url; |
130 delete layer.url; |
173 delete layer.url; |
131 return L.tileLayer(url, layer); |
174 return L.tileLayer(url, layer); |
132 }, |
175 }, |
133 WMS: function(layer) { |
176 WMS: function(map, leafmap, layer) { |
134 var url = layer.url; |
177 var url = layer.url; |
135 delete layer.url; |
178 delete layer.url; |
136 return L.tileLayer.wms(url, layer); |
179 return L.tileLayer.wms(url, layer); |
137 }, |
180 }, |
138 Geoportal: { |
181 Geoportal: { |
139 WMS: function(layer) { |
182 WMS: function(map, leafmap, layer) { |
140 MyAMS.getCSS('/--static--/pyams_gis/css/leaflet-gp-3.0.2' + MyAMS.devext + '.css', 'geoportal'); |
183 MyAMS.getCSS('/--static--/pyams_gis/css/leaflet-gp-3.0.2' + MyAMS.devext + '.css', 'geoportal'); |
141 return L.geoportalLayer.WMS(layer); |
184 return L.geoportalLayer.WMS(layer); |
142 } |
185 } |
143 }, |
186 }, |
144 ESRI: { |
187 ESRI: { |
145 Feature: function(layer) { |
188 Feature: function(map, leafmap, layer) { |
146 return L.esri.featureLayer(layer); |
189 return L.esri.featureLayer(layer); |
147 } |
190 } |
148 }, |
191 }, |
149 Google: function(layer) { |
192 Google: function(map, leafmap, layer) { |
150 var apiKey = layer.apiKey; |
193 var apiKey = layer.apiKey; |
151 delete layer.apiKey; |
194 delete layer.apiKey; |
152 if (MyAMS.getObject('window.google.maps') === undefined) { |
195 if (MyAMS.getObject('window.google.maps') === undefined) { |
153 var script = MyAMS.getScript('https://maps.googleapis.com/maps/api/js?key=' + apiKey); |
196 var script = MyAMS.getScript('https://maps.googleapis.com/maps/api/js?key=' + apiKey); |
154 $.when.apply($, [script]); |
197 $.when.apply($, [script]); |
174 }); |
217 }); |
175 }); |
218 }); |
176 }, |
219 }, |
177 |
220 |
178 /** |
221 /** |
|
222 * Init markers layer |
|
223 */ |
|
224 markers: { |
|
225 |
|
226 init: function(leafmap, markers, config) { |
|
227 |
|
228 MyAMS.ajax.check([ |
|
229 L.MarkerClusterGroup |
|
230 ], [ |
|
231 '/--static--/pyams_gis/js/leaflet-markercluster-1.4.1' + MyAMS.devext + '.js' |
|
232 ], function(firstLoad) { |
|
233 |
|
234 if (firstLoad) { |
|
235 MyAMS.getCSS('/--static--/pyams_gis/css/leaflet-markercluster-1.4.1' + MyAMS.devext + '.css', |
|
236 'leaflet-markercluster'); |
|
237 MyAMS.getCSS('/--static--/pyams_gis/css/leaflet-markercluster-default-1.4.1' + MyAMS.devext + '.css', |
|
238 'leaflet-markercluster-default'); |
|
239 } |
|
240 |
|
241 // click marker |
|
242 var clickMarker = function(e) { |
|
243 window.location.href = this.options.clickURL; |
|
244 } |
|
245 // show tooltip |
|
246 var hoverMarker = function(e) { |
|
247 this.openTooltip(); |
|
248 } |
|
249 // hide tooltip |
|
250 var leaveMarker = function(e) { |
|
251 this.closeTooltip(); |
|
252 } |
|
253 |
|
254 // create custom icon |
|
255 var markerIcon = L.icon({ |
|
256 iconUrl: markers.icon.url, |
|
257 iconSize: markers.icon.size, |
|
258 iconAnchor: markers.icon.anchor |
|
259 }); |
|
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 }); |
|
325 } |
|
326 }, |
|
327 |
|
328 /** |
179 * Single position marker management |
329 * Single position marker management |
180 */ |
330 */ |
181 position: { |
331 position: { |
182 |
332 |
183 init: function() { |
333 init: function() { |
381 map.css('height', $(window).height() - 200); |
531 map.css('height', $(window).height() - 200); |
382 PyAMS_GIS.init(map, {}, function(leafmap) { |
532 PyAMS_GIS.init(map, {}, function(leafmap) { |
383 L.Draw = L.Draw || {}; |
533 L.Draw = L.Draw || {}; |
384 L.Edit = L.Edit || {}; |
534 L.Edit = L.Edit || {}; |
385 MyAMS.ajax.check([L.Draw, L.Draw.Event, L.Map.TouchExtend, L.Edit.SimpleShape], |
535 MyAMS.ajax.check([L.Draw, L.Draw.Event, L.Map.TouchExtend, L.Edit.SimpleShape], |
386 ['/--static--/pyams_gis/js/leaflet.Draw' + MyAMS.devext + '.js', |
536 [ |
387 '/--static--/pyams_gis/js/leaflet.Draw.Event' + MyAMS.devext + '.js', |
537 '/--static--/pyams_gis/js/Draw/Leaflet.draw' + MyAMS.devext + '.js', |
388 '/--static--/pyams_gis/js/TouchEvents' + MyAMS.devext + '.js', |
538 '/--static--/pyams_gis/js/Draw/Leaflet.Draw.Event' + MyAMS.devext + '.js', |
389 '/--static--/pyams_gis/js/Edit.SimpleShape' + MyAMS.devext + '.js'], |
539 '/--static--/pyams_gis/js/Draw/ext/TouchEvents' + MyAMS.devext + '.js', |
390 function() { |
540 '/--static--/pyams_gis/js/Draw/edit/handler/Edit.SimpleShape' + MyAMS.devext + '.js' |
|
541 ], |
|
542 function() { |
391 MyAMS.ajax.check(L.Edit.Rectangle, |
543 MyAMS.ajax.check(L.Edit.Rectangle, |
392 '/--static--/pyams_gis/js/Edit.Rectangle' + MyAMS.devext + '.js', |
544 '/--static--/pyams_gis/js/Draw/edit/handler/Edit.Rectangle' + MyAMS.devext + '.js', |
393 function () { |
545 function () { |
394 |
546 |
395 function initRectangle(p1, p2) { |
547 function initRectangle(p1, p2) { |
396 var group = new L.FeatureGroup(); |
548 var group = new L.FeatureGroup(); |
397 rectangle = L.rectangle([p1, p2]); |
549 rectangle = L.rectangle([p1, p2]); |