From 2eb53c4d15807f8373bd3d68d15fe68953a53f86 Mon Sep 17 00:00:00 2001
From: vcoppe <vianney.coppe@gmail.com>
Date: Tue, 30 Apr 2024 15:57:47 +0200
Subject: [PATCH] waypoints reactive to file changes

---
 .../src/lib/components/gpx-layer/GPXLayer.ts  | 28 ++++++++++++-------
 1 file changed, 18 insertions(+), 10 deletions(-)

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);