diff --git a/website/src/lib/components/gpx-layer/GPXLayer.ts b/website/src/lib/components/gpx-layer/GPXLayer.ts index ded70c94..1f1da064 100644 --- a/website/src/lib/components/gpx-layer/GPXLayer.ts +++ b/website/src/lib/components/gpx-layer/GPXLayer.ts @@ -102,9 +102,19 @@ export class GPXLayer { this.map.on('mouseenter', this.layerId, toPointerCursor); this.map.on('mouseleave', this.layerId, toDefaultCursor); } + } - if (this.markers.length == 0) { - get(this.file).wpt.forEach((waypoint) => { + updateData() { + let source = this.map.getSource(this.layerId); + if (source) { + source.setData(this.getGeoJSON()); + } + + let markerIndex = 0; + get(this.file).wpt.forEach((waypoint) => { // Update markers + if (markerIndex < this.markers.length) { + this.markers[markerIndex].setLngLat(waypoint.getCoordinates()); + } else { let marker = new mapboxgl.Marker().setLngLat(waypoint.getCoordinates()); marker.getElement().addEventListener('click', (e) => { marker.setPopup(this.popup); @@ -113,7 +123,12 @@ export class GPXLayer { }); this.markers.push(marker); - }); + } + markerIndex++; + }); + + while (markerIndex < this.markers.length) { // Remove extra markers + this.markers.pop()?.remove(); } this.markers.forEach((marker) => { @@ -121,13 +136,6 @@ export class GPXLayer { }); } - updateData() { - let source = this.map.getSource(this.layerId); - if (source) { - source.setData(this.getGeoJSON()); - } - } - remove() { this.map.off('click', this.layerId, this.selectOnClickBinded); this.map.off('mouseenter', this.layerId, toPointerCursor);