From 59a75a7041c6a65d9afe8e9a15e24a821ce513ee Mon Sep 17 00:00:00 2001
From: ecyht2 <ecyht2@nottingham.edu.my>
Date: Wed, 17 Apr 2024 08:40:33 +0000
Subject: [PATCH 1/3] feat: Markers can now be removed

---
 src/js/map/add_point.js | 65 ++++++++++++++++++++++++-----------------
 1 file changed, 39 insertions(+), 26 deletions(-)

diff --git a/src/js/map/add_point.js b/src/js/map/add_point.js
index 0e24d32..e8eb1f6 100644
--- a/src/js/map/add_point.js
+++ b/src/js/map/add_point.js
@@ -110,7 +110,7 @@ export const markers = [];
 
 /** MaplibreJS source of the GEOJSON data.
  *
- * @type{import("maplibre-gl/dist/maplibre-gl.js").GeoJSONSource} */
+ * @type{import("maplibre-gl").GeoJSONSource} */
 export let source = undefined;
 
 map.once("load", async () => {
@@ -165,11 +165,45 @@ function source_loaded() {
 
         // Adding marker
         logging.info("Adding new marker");
-        add_marker(location);
+        const marker = create_marker(location);
+        markers.push(marker);
+        line_coords.push(location);
     });
 }
 
-/** Redraws all the markers on the map.
+/** 
+ * Creates a new marker at the given location.
+ *
+ * @param {number} index - The index of the marker.
+ * @param {import("maplibre-gl").LngLatLike} location - The location of the marker.
+ * @returns {import("maplibre-gl").Marker} The created marker.
+ *
+ * @example
+ * ```javascript
+ * const location = [37.7749, -122.4194];
+ * const marker = create_marker(0, location);
+ * ```
+ */
+function create_marker(location) {
+    const marker = new Marker({
+        draggable: true
+    })
+        .setLngLat(location)
+        .addTo(map);
+
+    marker.getElement().addEventListener("contextmenu", (e) => {
+        if (e.button === 2) {
+            const index = markers.findIndex((m) => m === marker);
+            line_coords.splice(index, 1);
+            markers[index].remove();
+            markers.splice(index, 1);
+        }
+    });
+    return marker;
+}
+
+/** 
+ * Redraws all the markers on the map.
  *
  * This function will mutate the markers variable.
  * */
@@ -187,12 +221,9 @@ export function redraw_markers() {
         const location = line_coords[i];
 
         // Adding draggable markers
-        markers[i] = new Marker({
-            draggable: true,
-        })
-            .setLngLat(location)
-            .addTo(map);
+        markers[i] = create_marker(location);
     }
+
     if (markers.length > 1) {
         const start = markers[0].getElement();
         start.replaceChildren(start_image);
@@ -201,22 +232,4 @@ export function redraw_markers() {
     }
 }
 
-/** Addas a new marker to the map.
- *
- * @param {import("maplibre-gl/dist/maplibre-gl.js").LngLatLike} location The location of the new marker.
- * */
-function add_marker(location) {
-    const marker_line_index = markers.length;
-    logging.debug(`Line Marker Index: ${marker_line_index.toString()}`);
-
-    // Adding draggable markers
-    const marker = new Marker({
-        draggable: true
-    })
-        .setLngLat(location)
-        .addTo(map);
-
-    markers.push(marker);
-}
-
 export default path_data;

From 94640e08b214cf8413a396b557f1483540509a8f Mon Sep 17 00:00:00 2001
From: ecyht2 <ecyht2@nottingham.edu.my>
Date: Wed, 17 Apr 2024 08:52:59 +0000
Subject: [PATCH 2/3] fix: Export path stop exporting stray markers

---
 src/js/map/add_point.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/js/map/add_point.js b/src/js/map/add_point.js
index e8eb1f6..9ab48fd 100644
--- a/src/js/map/add_point.js
+++ b/src/js/map/add_point.js
@@ -167,7 +167,6 @@ function source_loaded() {
         logging.info("Adding new marker");
         const marker = create_marker(location);
         markers.push(marker);
-        line_coords.push(location);
     });
 }
 
@@ -194,7 +193,6 @@ function create_marker(location) {
     marker.getElement().addEventListener("contextmenu", (e) => {
         if (e.button === 2) {
             const index = markers.findIndex((m) => m === marker);
-            line_coords.splice(index, 1);
             markers[index].remove();
             markers.splice(index, 1);
         }

From 2182bbcd32f0844bab54af17e2198e20578bd0d0 Mon Sep 17 00:00:00 2001
From: ecyht2 <ecyht2@nottingham.edu.my>
Date: Wed, 17 Apr 2024 08:55:34 +0000
Subject: [PATCH 3/3] doc: Updated create_marker docs

---
 src/js/map/add_point.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/js/map/add_point.js b/src/js/map/add_point.js
index 9ab48fd..8e61bc5 100644
--- a/src/js/map/add_point.js
+++ b/src/js/map/add_point.js
@@ -171,16 +171,15 @@ function source_loaded() {
 }
 
 /** 
- * Creates a new marker at the given location.
+ * Creates a new marker for the map.
  *
- * @param {number} index - The index of the marker.
  * @param {import("maplibre-gl").LngLatLike} location - The location of the marker.
  * @returns {import("maplibre-gl").Marker} The created marker.
  *
  * @example
  * ```javascript
  * const location = [37.7749, -122.4194];
- * const marker = create_marker(0, location);
+ * const marker = create_marker(location);
  * ```
  */
 function create_marker(location) {