Add Clusters

Try It

Zoom in and out and notice how the markers are clumped together when they are close together.

Notice that when zooming beyond zoom 20 the satellite imagery is no longer available and the street map layer is shown instead.

Code

            <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css" />
            ...
            <script src="https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js"></script>
            ...
            var markers = L.markerClusterGroup();
            var overlayMaps = {
              "Marker Clusters": markers
            };
            var addressPointsClosed = [
                                    [54.187565260371,-6.328861027126,'Tree 1'],
                                    [54.18755139893,-6.3289450704392,'Tree 2'],
                                    ]
            for (var i = 0; i < addressPointsClosed.length; i++) {
              var a = addressPointsClosed[i];
              var title = a[2];
              var marker = L.marker(new L.LatLng(a[0], a[1]), {
                  title: title
              });
              marker.bindPopup(title);
              markers.addLayer(marker);
            }
            map.addLayer(markers);
        

Explanation

• We import the CSS and Javascript needed for clustering
• We create a markerClusterGroup and add it as an overlay layer
• We create an array named addressPointsClosed containing coordinates for each point
• We add javascript to loop through that array and add each as a marker to the markers layer

Next Example Previous