Leaflet Markercluster - Javascript Leaflet

Javascript examples for Leaflet:Marker

  1. HOME
  2. Javascript
  3. Leaflet
  4. Marker

Description

Leaflet Markercluster

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script> 
      <script type="text/javascript" src="https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js"></script> 
      <link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"> 
      <link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css"> 
      <link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css"> 
      <style id="compiled-css" type="text/css">

html,/*from w  w w.j  a  va  2  s  .  com*/
body {
   height: 100%;
}
#map {
   height: 100%;
}


      </style> 
      <script type="text/javascript">
    window.onload=function(){
const map = L.map('map', {
    zoom: 5,
    center: [0,0],
    maxZoom: 18
});
const clustered = L.markerClusterGroup();
map.addLayer(clustered);
const mkMarker = function(lat, lng, txt) {
   const m = L.marker(L.latLng(lat, lng));
   m.addTo(clustered);
   m.bindPopup(txt);
   return m;
};
const
    m1 = mkMarker(0, 0, 'one'),
   m2 = mkMarker(0, 1, 'two'),
    m3 = mkMarker(1, 0, 'three'),
    m4 = mkMarker(3, 3, 'further away');

const unclustered = L.markerClusterGroup(); // NOTE
map.addLayer(unclustered);
clustered.on('popupopen', function(e) {
   console.log('open');
    const m = e.popup._source;
    clustered.removeLayer(m);
    unclustered.addLayer(m);
    m.openPopup();
});
unclustered.on('popupclose', function(e) {
    console.log('close');
    let m = e.popup._source;
    unclustered.removeLayer(m);
    clustered.addLayer(m);
    m.closePopup();
});

    }

      </script> 
   </head> 
   <body> 
      <div id="map"></div>  
   </body>
</html>

Related Tutorials