Recibo este error al crear una línea de seguimiento en vivo en mi mapa de MapBox.

Tengo que usar la misma API en otro lugar de este archivo. Supongo que ese es el problema ... ¿Hay alguna manera de resolver esto?

Error -

 Error: There is already a source with this ID at i.addSource (mapbox-gl.js?e192:33) at r.addSource (mapbox-gl.js?e192:33) at VueComponent._callee5$ (Dashboard.vue?98fa:142) at tryCatch (runtime.js?96cf:45) at Generator.invoke [as _invoke] (runtime.js?96cf:271) at Generator.prototype.<computed> [as next] (runtime.js?96cf:97) at asyncGeneratorStep (asyncToGenerator.js?3b8d:5) at _next (asyncToGenerator.js?3b8d:27)

llamada montada -

 mounted() { this.createMap(); window.setInterval(() => { this.getLocation() }, 500) },

Primera llamada a la API -

 async getLocation() { const res = await getLocations() this.center = [res.data[0].longitude,res.data[0].latitude]; // Reverse Geocoding using MapBox API axios.get(`https://api.mapbox.com/geocoding/v5/mapbox.places/${this.center}.json?access_token=${this.access_token}`) .then(async (response) => { this.loading = false; this.lat = response.data.query[1].toFixed(6); this.lng = response.data.query[0].toFixed(6); this.place_name = response.data.features[0].place_name; this.uncertainty_radius = res.data[0].uncertaintyRadiusInMeters; this.map.flyTo({center: [this.lng, this.lat], zoom: 16.5}); }); await this.mapMarker(); await this.targetTrackingLine() },

Esta es mi siguiente función de línea:

 async targetTrackingLine() { if (this.lng !== "0.000000" && this.lng !== "") { const response = await fetch( `https://api.mapbox.com/geocoding/v5/mapbox.places/${this.center}.json?access_token=${this.access_token}` ); const data = await response.json(); // save full coordinate list for later const coordinates = data.query; console.log(coordinates) // start by showing just the first coordinate data.query.coordinates = [coordinates[0]]; // add it to the map this.map.addSource('trace', {type: 'geojson', data: data}); this.map.addLayer({ 'id': 'trace', 'type': 'line', 'source': 'trace', 'paint': { 'line-color': '#000', 'line-width': 4 } }); // on a regular basis, add more coordinates from the saved list and update the map let i = 0; const timer = setInterval(() => { if (i < coordinates.length) { data.query.coordinates.push(coordinates[i]); this.map.getSource('trace').setData(data); i++; } else { window.clearInterval(timer); } }, 10); } }