Clear all polylines from leaflet map

Question

I am struggling to clear all polylines from my map, i only clear the newest.

var polylines;

// add map polylines
function addPolyline(polyArray, colour) {
    polylines = L.polyline(polyArray, {color: colour});
    polylines.addTo(map);
}

// clear polylines   
function clearPolylines() {
    map.removeLayer(polylines);
}

where addPolylines is called multiple times and clear Polylines is called once. How can i clear all polylines on the map?

Answer 1

You can add the polyline to a layerGroup and easily add/remove it to/from the map. Something like this:

pLineGroup = L.layerGroup()
var latlngs = [
    [45.51, -122.68],
    [37.77, -122.43],
    [34.04, -118.2]
];
this.pLineGroup.addLayer(L.polyline(latlngs, {color: 'red'}))
pLineGroup.addTo(map)
pLineGroup.removeFrom(map)

Answer 2

The following will remove both polygons and markers but keep the image tiles in the background:

for (i in map._layers) {
    if (map._layers[i].options.format == undefined) {
        try {
            map.removeLayer(map._layers[i]);
        } catch (e) {
            console.log("problem with " + e + map._layers[i]);
        }
    }
}

Answer 3

You can create an array to store all polylines present in the map.

var polylines = [];

When create each polyline we add it to our array:

var polyline = new L.Polyline(latlongs, {
    color: 'red',
    opacity: 1,
    weight: 1,
    clickable: false
}).addTo(map);
polylines.push(polyline);

And now, when ever we need to clear our polylines from the map we can do:

polylines.forEach(function (item) {
    map.removeLayer(item)
});

Answer 4

Some of the answers suggest using map._layers which is supposed to be a private property and should not be used. It's better practice to use the API of L.Map-type.

Also, what you'll find is that for(i in m._layers) { crashes if map._layers has no layers attached to it, since i will be undefined.

I'd like to propose following method instead, which also skips your attributions:

function clearMap(map) {
  map.eachLayer((layer) => {
    const hasEmptyContrib = !(layer.getAttribution && layer.getAttribution());
    const hasNoContrib = !layer.getAttribution;
    if (hasEmptyContrib || hasNoContrib) {
        map.removeLayer(layer);
    }
  })
}

Answer 5

Here is how I did, in Leaflet. Old school style... I created a variable called counter, set to 0.

var cnt = 0;

At the very end of my 'dragend' event of the marker that is supposed to update the polyline every time I drag the marker (and erase the prior polyline), I added that if the counter is larger than 0, remove the polyline. So, on the first run, this oder to remove the polyline is ignored, because there is no polyline. Every next time, it will be executed, and instead of adding yet another line, I get a 'new' polyline, from POINT A, to my marker (POINT B). Here is the code:

if(cnt > 0) { travel.removeFrom(map)};
travel = L.polyline([pointRome, dragPointsArray],{color: 'red', weight: 15, interactive: false}).addTo(map);
cnt++;

Answer 6

Actually, I found that there is a better way to make a polyline disappear (such a distance from one point to another on the map, as you move a marker), is just don't add it to map. I used to do like that, and there would be a line that just wouldn't go away if I clicked on the map. The tooltip of the marker would go away, but the polyline would remain. So... instead of:

travel = L.polyline([pointRome, dragPointsArray],{color: 'red', weight: 3}).addTo(map);

I just added my polyline to the layer group, instead of the map.

travel = L.polyline([pointRome, dragPointsArray],{color: 'red', weight: 3}).addTo(myLayerGroup);

"myLayerGroup" is the name of the layer where all your markers are. Easy.