angular - How to solve error: "mapboxgl: There is already a source with this ID when updating layer"?

Question

I am using Mapbox-gl for showing the map in my code

When updating map lines and re-setting them I am getting this error:

mapboxgl: There is already a source with this ID

Before setting layer and source I am removing it

if (this.map.getLayer('mapLine')) {
  this.map.removeSource('lines');
  this.map.removeLayer('mapLine');
}

After that I am doing this operations:

this.map.addSource('lines', {
    type: 'geojson',
    data: {
      type: 'FeatureCollection',
      features,
    },
  });
  this.map.addLayer({
    id: 'mapLine',
    type: 'line',
    source: {

      type: 'geojson',
      data: {
        type: 'FeatureCollection',
        features,
      },
    },
    paint: { 'line-width': 4, 'line-color': ['get', 'color'] },
  });

However, I am getting errors when trying to add a layer.

Answer 1

Is lines dynamically changing or do you just do it for testing?

When I need dynamic updated data from a geojson I just overwrite the source. The Layer doesn't really change in your example code right? You just want the new Data?

To Update the source you can use:

this.map.getSource('lines').setData(data);

Than in the addLayer code just check if it exists or not with:

if (!this.map.getLayer('mapline')) {
this.map.addLayer({
    id: 'mapLine',
    type: 'line',
    source: {
      type: 'geojson',
      data: {
        type: 'FeatureCollection',
        features,
      },
    },
    paint: { 'line-width': 4, 'line-color': ['get', 'color'] },
  });
}

Hope this helps. If you have questions just ask :) cheers