Search code examples
javascriptleafletgeojson

Leaflet remove GeoJSON layer(s)

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?

Solution

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