I'm coloring areas on the map by creating GeoJSON layers in leaflet. First I create an empty layer:

var layerPostalcodes=L.geoJSON().addTo(map);

Then I create a geojson element containing the shape information and add it to the layer:

layerPostalcodes.addData(geojson);

This displays the areas on the map correctly. Now, onclick of a button I'd like to remove all the shapes from the map. This is not working. I've tried several approaches:

layerPostalcodes.clearLayers();

or via a LayerGroup, by adding the GeoJSON layer to it so I can use removeLayer(). But, this does not even display the shapes let alone remove them.

var layerGroup = new L.LayerGroup();
layerGroup.addLayer(layerPostalcodes);
layerGroup.addTo(map);
layerGroup.removeLayer(layerPostalcodes);

What am I doing wrong?

I'm coloring areas on the map by creating GeoJSON layers in leaflet. First I create an empty layer:

var layerPostalcodes=L.geoJSON().addTo(map);

Then I create a geojson element containing the shape information and add it to the layer:

layerPostalcodes.addData(geojson);

This displays the areas on the map correctly. Now, onclick of a button I'd like to remove all the shapes from the map. This is not working. I've tried several approaches:

layerPostalcodes.clearLayers();

or via a LayerGroup, by adding the GeoJSON layer to it so I can use removeLayer(). But, this does not even display the shapes let alone remove them.

var layerGroup = new L.LayerGroup();
layerGroup.addLayer(layerPostalcodes);
layerGroup.addTo(map);
layerGroup.removeLayer(layerPostalcodes);

What am I doing wrong?

• javascript
• leaflet
• geojson

• 1 What about trying layerPostalcodes.clearLayers()? – kboul Commented Nov 5, 2018 at 12:58
• 1 Tried that already, see first approach :-) Doesn't work.. – Ilse Commented Nov 5, 2018 at 13:26
• 1 Then remove it like this: map.removeLayer(layerPostalcodes). – kboul Commented Nov 5, 2018 at 13:50

4 Answers 4

Add the layerGroup to the map before you add the layerPostalCodes to it.

var layerGroup = new L.LayerGroup();
layerGroup.addTo(map);
layerGroup.addLayer(layerPostalcodes);
layerGroup.removeLayer(layerPostalcodes);

Or

var layerGroup = new L.LayerGroup();
layerGroup.addTo(map);
layerGroup.addLayer(layerPostalcodes);
map.removeLayer(layerGroup);

Nothing worked for me so I had a look at the Chrome Developer tool. If you click the highlight element feature and actually click whatever you want to remove, you'll see it's now and element on the page with a class id. So I simply used

$(".<class name>").remove();

from jQuery and it worked!

For me, nothing worked in this thread and I used @Rastin answer above to come up with a reliable solution:

$(".leaflet-interactive").remove(); //removes previously drawn lines! 

BTW, I had my lines drawn as:

route_lines = L.geoJSON(myLines, { style: myStyle }).addTo(map);

Add your GeoJSON layer to a group, and when you want to remove the layer use the remove method on the group layer.

const layer = L.layerGroup([L.geoJSON(geojsonData)]);
layer.addTo(map);
layer.remove();