Removing a source in mapbox gl js doesn't remove its layers

Question

I'm trying to selectively remove a source in mapbox gl js, I'm using map.removeSource('<SOURCE_ID>') but nothing happens. The layers still remain on the map. I've created an example in Codepen.

Answer 1

You've got to remove the source and the layer. Call removeLayer first (since it depends on the source) and then remove the source next.