CODEWITHSUNDEEP
javascriptleafletmapbox
Md Johirul Islam
Md Johirul Islam

Reputation: 5162

array of marker layers is not being deleted from leaflet map

I am using the following code to delete circles from the map before adding new circles depending on location.

if(markers.length>0)
    {
    for (var i = 0; i < markers.length; i++) {
        map.removeLayer(markers[i]);
    }
    }

var lat,lon;
var road;
var detector;
//var svg=d3.select("#map").append("svg");
data.forEach(function(d)
        {
    lat=d.lat;
    lon=d.lon;
    road=d.road;
    detector=d.detectorid;
    markers.push((new L.circle([lat, lon], 500, {
        color: 'yellow',
        fillColor: '#f0f',
        fillOpacity: 0.5
    })).bindPopup("Road Name:"+road+"<br>Detector ID: "+detector))

        });
for (var i = 0; i < markers.length; i++) {
    map.addLayer(markers[i]);
}
map.setView([lat, lon],13);
map.dragging.enable();

But the previous circles are not being added. New circles are being added side by side the old circles are kept. How can I remove the previous circles?

Upvotes: 0

Views: 279

Answers (1)

jwhazel
jwhazel

Reputation: 984

Old markers are getting redrawn because you're not emptying the marker array after you clear the layers on the map. After your first if statement you need to empty markers variable by setting markers = []. This way, when marker.push gets called in your forEach loop, their getting added to a new array without the old circles.

Upvotes: 1

Related Questions