CODEWITHSUNDEEP
mapbox-gl-js
Pablo Estrada
Pablo Estrada

Reputation: 3472

Mapbox GL Js: adding and removing GeoJSON sources and layers

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?

Upvotes: 16

Views: 33689

Answers (3)

jnicho02
jnicho02

Reputation: 2717

...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);
}

Upvotes: 15

Elhakim
Elhakim

Reputation: 414

You should remove layer first then remove its source.

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

in your case id = 'route'.

Upvotes: 17

Pablo Estrada
Pablo Estrada

Reputation: 3472

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.

Upvotes: 23

Related Questions