Mapbox GL Js: adding and removing GeoJSON sources and layers

Question

Im having a problems adding and removing layers in mapbox gl.

I have this layer:

   map.addLayer({
        "id": "route",
        "type": "line",
        "source": {
            "type": "geojson",
            "data": {
                "type": "Feature",
                "properties": {},
                "geometry": {
                    "type": "LineString",
                    "coordinates": [
                        [-122.48369693756104, 37.83381888486939],
                        [-122.48348236083984, 37.83317489144141],
                        [-122.48339653015138, 37.83270036637107],
                        [-122.48356819152832, 37.832056363179625],
                        [-122.48404026031496, 37.83114119107971],
                        [-122.48404026031496, 37.83049717427869],
                        [-122.48348236083984, 37.829920943955045],
                        [-122.48356819152832, 37.82954808664175],
                        [-122.48507022857666, 37.82944639795659],
                        [-122.48610019683838, 37.82880236636284],
                        [-122.48695850372314, 37.82931081282506],
                        [-122.48700141906738, 37.83080223556934],
                        [-122.48751640319824, 37.83168351665737],
                        [-122.48803138732912, 37.832158048267786],
                        [-122.48888969421387, 37.83297152392784],
                        [-122.48987674713133, 37.83263257682617],
                        [-122.49043464660643, 37.832937629287755],
                        [-122.49125003814696, 37.832429207817725],
                        [-122.49163627624512, 37.832564787218985],
                        [-122.49223709106445, 37.83337825839438],
                        [-122.49378204345702, 37.83368330777276]
                    ]
                }
            }
        },
        "layout": {
            "line-join": "round",
            "line-cap": "round"
        },
        "paint": {
            "line-color": "#888",
            "line-width": 8
        }
    });

then I remove it by doing:

map.removeLayer('route')

Everything works fine.

However when trying to add the same layer again I get the following error:

Error: There is already a source with this ID

Even though I'm adding a Layer. I don't know how to get the source removed because the source does not have an ID.

My final result is to be able to add and remove this layer by clicking on a button.

Can anyone help me here?

score 22 · Accepted Answer · answered Apr 15 '18 at 00:26

22

I just found out that the source is created with the same id as in the layer so:

map.removeSource('route')

Worked perfectly to completely remove both the layer and source.

answered Apr 15 '18 at 00:26

Pablo Estrada

3,182
4
30
74

7

Thanks for posting. I edited & added the extra step of `map.removeLayer()`. If I just performed a `map.removeSource()` first, then Mapbox GL JS threw this error `Error: "Source "route" cannot be removed while layer "route" is using it."` – RobLabs Sep 11 '18 at 15:45
Then remove that layer and reinit it after add new layer. – PriyankMotivaras Feb 10 '21 at 10:26

score 17 · Answer 2 · answered Oct 08 '20 at 23:21

17

You should remove layer first then remove its source.

map.removeLayer(id);
map.removeSource(id);

in your case id = 'route'.

answered Oct 08 '20 at 23:21

Elhakim

404
5
10

score 14 · Answer 3 · answered Nov 24 '20 at 10:04

14

...and check that the source/layer exist before you try to remove them

if (map.getLayer(id)) {
  map.removeLayer(id);
}
if (map.getSource(id)) {
  map.removeSource(id);
}

answered Nov 24 '20 at 10:04

jnicho02

2,567
1
15
10

Mapbox GL Js: adding and removing GeoJSON sources and layers

3 Answers3