CODEWITHSUNDEEP
javascriptjqueryleafletjquery-isotope
clestcruz
clestcruz

Reputation: 1111

Trying to clear markers when toggling checkbox

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);
        
    });
});

Upvotes: 0

Views: 41

Answers (0)

Related Questions