I encountered an issue while trying to create a live tracking feature on my MapBox map.
The error seems to be related to using the same API elsewhere in the file. I suspect this is causing the problem. Is there a way to resolve this issue?
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)
Mounted call -
mounted() {
this.createMap();
window.setInterval(() => {
this.getLocation()
}, 500)
},
First API call -
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()
},
Implemented function for displaying tracking line -
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);
}
}