Trying to clear markers when toggling checkbox

Question

I'm trying to resolve an issue with regards on how I can clear the markers when listening to changes on the checkbox. I've been building a map plotter with the combination of libraries from leaftlet.js and isotope.js.

So the way my code works is that once a user picks a filter it searches elements that has the class .found hence

.isotope-filter-container .isotope-item.found

and then plots them to the marker. I'm trying to figure how I can clear them first and then re-plot them after

jQuery(document).on("change", ".search-result-container.-map-enabled .filter-checkbox", function() {


    //jQuery('#clear-markers').trigger('click');


    function plotMarker(lat, lng, content) {
        const marker = L.marker([lat, lng]).addTo(map);

        // Clear the markers array
        markers = [];
        markers.push(marker);


        marker.bindPopup(content, {
            className: "map-popup-panel",
            closeButton: false, 
            maxWidth: 350, 
            minWidth: 200, 
        });


        // Adding click event to center the map on the marker
        marker.on('click', function() {
            map.setView(marker.getLatLng(), map.getZoom(), {
                animate: true,
                duration: 0.5
            });
        });
    }


    jQuery('.isotope-filter-container .isotope-item.found').each(function() {           
        //const locationText = jQuery(this).attr('data-hotel-address');
        const lat = parseFloat(jQuery(this).attr('data-latitude'));
        const lng = parseFloat(jQuery(this).attr('data-longitude'));
        const content = jQuery(this).find('.itinerary-result-search-item-base-info').html(); // Get the HTML content of the list item
        plotMarker(lat, lng, content);
        
    });
});

Answer 1

To clear the markers when the checkbox changes and then re-plot them based on the filtered results, you need to manage the markers array properly. Here's an improved version of your code that clears the markers before re-plotting them:

1. Maintain a global array to keep track of the markers.
2. Clear the markers from the map when the checkbox state changes.
3. Plot the new markers based on the filtered items.

Here is how you can modify your script:

// Define a global array to store the markers
let markers = [];

// Function to clear all markers from the map
function clearMarkers() {
    for (let i = 0; i < markers.length; i++) {
        map.removeLayer(markers[i]);
    }
    markers = [];
}

// Function to plot a marker on the map
function plotMarker(lat, lng, content) {
    const marker = L.marker([lat, lng]).addTo(map);
    markers.push(marker);

    marker.bindPopup(content, {
        className: "map-popup-panel",
        closeButton: false,
        maxWidth: 350,
        minWidth: 200,
    });

    // Adding click event to center the map on the marker
    marker.on('click', function() {
        map.setView(marker.getLatLng(), map.getZoom(), {
            animate: true,
            duration: 0.5
        });
    });
}

jQuery(document).on("change", ".search-result-container.-map-enabled .filter-checkbox", function() {
    // Clear existing markers
    clearMarkers();

    // Iterate over the filtered items and plot new markers
    jQuery('.isotope-filter-container .isotope-item.found').each(function() {           
        const lat = parseFloat(jQuery(this).attr('data-latitude'));
        const lng = parseFloat(jQuery(this).attr('data-longitude'));
        const content = jQuery(this).find('.itinerary-result-search-item-base-info').html(); // Get the HTML content of the list item
        plotMarker(lat, lng, content);
    });
});

By organizing the code this way, you ensure that the map is updated correctly whenever the user changes the filter checkboxes, clearing old markers and plotting new ones based on the updated filter.