Reputation: 3472
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
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
Reputation: 414
You should remove layer first then remove its source.
map.removeLayer(id);
map.removeSource(id);
in your case id = 'route'
.
Upvotes: 17
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