283 data = map.data(), |
283 data = map.data(), |
284 leafmap = map.data('leafmap'), |
284 leafmap = map.data('leafmap'), |
285 config = map.data('leafmap.config'), |
285 config = map.data('leafmap.config'), |
286 markers = data.mapMarkers; |
286 markers = data.mapMarkers; |
287 |
287 |
288 // create custom icon |
288 if (markers) { |
289 var markerIcon = L.icon({ |
289 // create custom icon |
290 iconUrl: markers.icon.url, |
290 var markerIcon = L.icon({ |
291 iconSize: markers.icon.size, |
291 iconUrl: markers.icon.url, |
292 iconAnchor: markers.icon.anchor |
292 iconSize: markers.icon.size, |
293 }); |
293 iconAnchor: markers.icon.anchor |
294 // customize cluster icon |
294 }); |
295 var markersClusterCustom = new L.MarkerClusterGroup({ |
295 // customize cluster icon |
296 iconCreateFunction: function(cluster) { |
296 var markersClusterCustom = new L.MarkerClusterGroup({ |
297 return L.divIcon({ |
297 iconCreateFunction: function(cluster) { |
298 html: cluster.getChildCount(), |
298 return L.divIcon({ |
299 className: markers.clusterClass || 'map-cluster', |
299 html: cluster.getChildCount(), |
300 iconSize: null |
300 className: markers.clusterClass || 'map-cluster', |
|
301 iconSize: null |
|
302 }); |
|
303 } |
|
304 }); |
|
305 |
|
306 // object to save markers |
|
307 var icons = {}; |
|
308 |
|
309 // create markers |
|
310 for (var i = 0; i < markers.markers.length; i++) { |
|
311 var markerConfig = markers.markers[i]; |
|
312 var latLng = new L.LatLng(markerConfig.point.y, markerConfig.point.x); |
|
313 var marker = new L.Marker(latLng, { |
|
314 icon: markerIcon, |
|
315 clickURL: markerConfig.href, |
|
316 markerId: markerConfig.id, |
|
317 alt: markerConfig.id |
301 }); |
318 }); |
|
319 if (markerConfig.href) { |
|
320 marker.addEventListener('click', clickMarker); |
|
321 } |
|
322 icons[markerConfig.id] = marker; |
|
323 // bind tooltip with title content |
|
324 var label; |
|
325 if (markerConfig.img) { |
|
326 label = '<div>' + |
|
327 '<div class="marker__label p-2"> ' + markerConfig.label + '</div>' + |
|
328 '<div class="text-center">' + |
|
329 '<img src="' + markerConfig.img.src + '" width="' + markerConfig.img.w + '" height="' + markerConfig.img.h + '" alt="" />' + |
|
330 '</div>' + |
|
331 '</div>'; |
|
332 } else { |
|
333 label = markerConfig.label; |
|
334 } |
|
335 if (label) { |
|
336 var className = markers.tooltipClass || 'map-tooltip'; |
|
337 if (markerConfig.img) { |
|
338 className += ' p-0'; |
|
339 } |
|
340 icons[markerConfig.id].bindTooltip(label, { |
|
341 direction: 'top', |
|
342 offset: [0, -markerIcon.options.iconSize[1]], |
|
343 opacity: 1, |
|
344 className: className |
|
345 }); |
|
346 icons[markerConfig.id].addEventListener('mouseover', hoverMarker); |
|
347 icons[markerConfig.id].addEventListener('mouseout', leaveMarker); |
|
348 } |
|
349 markersClusterCustom.addLayer(icons[markerConfig.id]); |
302 } |
350 } |
303 }); |
351 leafmap.addLayer(markersClusterCustom); |
304 |
352 if (config.adjust === 'auto') { |
305 // object to save markers |
353 leafmap.fitBounds(markersClusterCustom.getBounds()); |
306 var icons = {}; |
354 if (markers.markers.length === 1) { |
307 |
355 leafmap.setZoom(config.zoom); |
308 // create markers |
356 } |
309 for (var i = 0; i < markers.markers.length; i++) { |
|
310 var markerConfig = markers.markers[i]; |
|
311 var latLng = new L.LatLng(markerConfig.point.y, markerConfig.point.x); |
|
312 var marker = new L.Marker(latLng, { |
|
313 icon: markerIcon, |
|
314 clickURL: markerConfig.href, |
|
315 markerId: markerConfig.id, |
|
316 alt: markerConfig.id |
|
317 }); |
|
318 if (markerConfig.href) { |
|
319 marker.addEventListener('click', clickMarker); |
|
320 } |
|
321 icons[markerConfig.id] = marker; |
|
322 // bind tooltip with title content |
|
323 var label; |
|
324 if (markerConfig.img) { |
|
325 label = '<div>' + |
|
326 '<div class="marker__label p-2"> ' + markerConfig.label + '</div>' + |
|
327 '<div class="text-center">' + |
|
328 '<img src="' + markerConfig.img.src + '" width="' + markerConfig.img.w + '" height="' + markerConfig.img.h + '" alt="" />' + |
|
329 '</div>' + |
|
330 '</div>'; |
|
331 } else { |
|
332 label = markerConfig.label; |
|
333 } |
|
334 if (label) { |
|
335 var className = markers.tooltipClass || 'map-tooltip'; |
|
336 if (markerConfig.img) { |
|
337 className += ' p-0'; |
|
338 } |
|
339 icons[markerConfig.id].bindTooltip(label, { |
|
340 direction: 'top', |
|
341 offset: [0, -markerIcon.options.iconSize[1]], |
|
342 opacity: 1, |
|
343 className: className |
|
344 }); |
|
345 icons[markerConfig.id].addEventListener('mouseover', hoverMarker); |
|
346 icons[markerConfig.id].addEventListener('mouseout', leaveMarker); |
|
347 } |
|
348 markersClusterCustom.addLayer(icons[markerConfig.id]); |
|
349 } |
|
350 leafmap.addLayer(markersClusterCustom); |
|
351 if (config.adjust === 'auto') { |
|
352 leafmap.fitBounds(markersClusterCustom.getBounds()); |
|
353 if (markers.markers.length === 1) { |
|
354 leafmap.setZoom(config.zoom); |
|
355 } |
357 } |
356 } |
358 } |
357 }); |
359 }); |
358 }); |
360 }); |
359 } |
361 } |