Replace Markers by Leaflet.markercluster

Question

I am using a Leaflet map to show the volcano worldwide. The toggle button, when clicked, will show all the markers. When clicked on the toggle button, the markers should show up.

There I want to apply cluster marker. It is not working.

//Creating map options
    var mapOptions = {
        center: [40.4168, -3.7038],
        zoom: 2,
        minZoom: 2,
        maxZoom: 18,
        maxBounds: [
            [-75, -190],
            [90, 190]
        ],
        maxBoundsViscosity: 0.5,
    }

    // Creating a map object
    var map = new L.map('map', mapOptions);

    // Add Tile Layer and add to map
    L.tileLayer('https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=8vFNrApGjV6jRicu4ins').addTo(map);

    //Adding geoJson data and adding the marker and popup

    var geojsonMarkerOptions = {
        radius: 3,
        fillColor: "#FF0000",
        color: "#000",
        weight: 1,
        opacity: 0.2,
        fillOpacity: 0.5
    };
    //Marker Cluster

    var markerClusters = L.markerClusterGroup();

    for ( var i = 0; i < volcano.length; ++i )
    {
      var popup = volcano[i].name +
                  '<br/>' + volcano[i].properties. NAME_+
                  '<br/><b>Type:</b> ' + volcano[i].properties.TYPE_ +
                  '<br/><b>Location:</b> ' + volcano[i].properties.LOCATION;


      var m = L.marker( [volcano[i].lat, volcano[i].lng], {icon: geojsonMarkerOptions} )
                      .bindPopup( popup );

      markerClusters.addLayer( m );
    }

    map.addLayer( markerClusters );


    //-Creating interactive buttons:Toggler button to show on/off worldwide volcanoes

    var volcanoPoints = null;


    // Create event listener for add Volcanoes Worldwide Button
    document.getElementById("addButton").addEventListener("click", addVolcanoWorldwide);

    // Add volcano worldwide function
    function addVolcanoWorldwide() {
        volcanoPoints.addTo(map);
    };

    function addVolcanoWorldwide() {
        if (map.hasLayer(volcanoPoints)) {
            removeVolcanoWorldwide();
        };
        volcanoPoints = L.geoJson(volcano, {
            pointToLayer: function(feature, latlng) {
                return L.circleMarker(latlng, geojsonMarkerOptions);
            },
            onEachFeature: volcanoSearch
        }).addTo(map);
    };


    // Create event listener for the remove Volcanoes Worldwide Button
    document.getElementById("removeButton").addEventListener("click", removeVolcanoWorldwide);

    // Remove volcano worldwide function
    function removeVolcanoWorldwide() {
        volcanoPoints.remove(map);
    };

    document.getElementById("toggleButton").addEventListener("click", toggleVolcanoes);

    // Toggle Volcanoes
    function toggleVolcanoes() {
        if (map.hasLayer(volcanoPoints)) {
            removeVolcanoWorldwide();
        }
        else {
            addVolcanoWorldwide();
        }
    };

Answer 1

Welcome to SO!

Your code shows you build 2 separate sets of Markers from volcano : - for your MarkerClusterGroup, as an array of objects with lat and lng properties - for your toggling feature, as an array of GeoJSON features that you pass to Leaflet GeoJSON Layer Group factory.

If your volcano contains an array of compliant GeoJSON features, then the first set (for MarkerClusterGroup) should not work the way it is currently coded.

If you wanted your toggling feature to handle your MarkerClusterGroup directly, then simply add your volcanoPoints into the MCG instead of to the map. You sgould also build it only once and then toggle the MCG instead.