I am working on Angular project. I have loaded Mapbox map. There is database set up which has some kind of campaigns, each campaign has its own polygon. When user chooses a campaign, it should fire plotPolygon(coordinates) function. This function is below in code, and it will add the source for Mapbox (source being coordinates of polygon) with map.addSource(). Each time when user clicks on different campaign, source should be changed and different polygon should be added to Mapbox. I think that the previous source should also be deleted at the same time. I'm a bit confused on how to do this. Input variable polygon in my case is changing every time when function plotPolygon is called. Result I get is that when function is called first time, I get polygon plotted, and on each subsequent call nothing will change, polygon will stay plotted. What it should do is delete old polygon and plot a new one.

This is function which I made:

plotPolygon(polygon: any) {
  //PLOTTING polygons
  // Add a data source containing GeoJSON data.
  this.map.addSource('CampPoly', {
    'type': 'geojson',
    'data': {
    'type': 'Feature',
    'geometry': {
    'type': 'Polygon',
    // These coordinates outline CampPoly.
    'coordinates': polygon
    }
    }
    });

    // Add a new layer to visualize the polygon.
  this.map.addLayer({
    'id': 'CampPoly',
    'type': 'fill',
    'source': 'CampPoly', // reference the data source
    'layout': {},
    'paint': {
    'fill-color': '#0080ff', // blue color fill
    'fill-opacity': 0.5
    }
    });
    // Add a black outline around the polygon.
  this.map.addLayer({
    'id': 'outline',
    'type': 'line',
    'source': 'CampPoly',
    'layout': {},
    'paint': {
    'line-color': '#000',
    'line-width': 3
    }
    });
  }