From a8c46585dfcaa57bd9f0180d95fa6b77d557d43f Mon Sep 17 00:00:00 2001
From: Martin Asprusten <Martin.Asprusten@ffi.no>
Date: Wed, 2 Jul 2025 17:09:46 +0200
Subject: [PATCH] Show endpoints as purple circles rather than purple markers.
 Fixed a bug where editing polygons would not lead to an update

---
 index.html                           |  4 ++--
 src/modules/maphandler/maphandler.ts | 27 ++++++++-------------------
 2 files changed, 10 insertions(+), 21 deletions(-)

diff --git a/index.html b/index.html
index db3e6fa..db3b2a2 100644
--- a/index.html
+++ b/index.html
@@ -73,8 +73,8 @@
 		<h2>Instructions:</h2>
 		<p>
 			Click anywhere on the map to calculate where it is possible to freewheel from that point. A set of possible
-			end points will then appear on the map. The farthest possible end point is shown in red, while other possible
-			end points are shown in violet. Click an endpoint to see the calculated route that leads from the start point
+			end points will then appear on the map. The farthest possible end point is shown with a red marker, while other possible
+			end points are shown as purple circles. Click an endpoint to see the calculated route that leads from the start point
 			to the end point.
 		</p>
 		<p>
diff --git a/src/modules/maphandler/maphandler.ts b/src/modules/maphandler/maphandler.ts
index d28461e..91fbb27 100644
--- a/src/modules/maphandler/maphandler.ts
+++ b/src/modules/maphandler/maphandler.ts
@@ -76,11 +76,11 @@ class MapHandler {
 			L.PM.reInitLayer(e.layer);
 
 			if (this.onChangeFunction != null) {
-				e.layer.on('pm:edit', this.onChangeFunction);
-				e.layer.on('pm:drag', this.onChangeFunction);
-				e.layer.on('pm:cut', this.onChangeFunction);
-				e.layer.on('pm:remove', this.onChangeFunction);
-				e.layer.on('pm:rotate', this.onChangeFunction);
+				e.layer.on('pm:edit', this.onChangeFunction.bind(this));
+				e.layer.on('pm:drag', this.onChangeFunction.bind(this));
+				e.layer.on('pm:cut', this.onChangeFunction.bind(this));
+				e.layer.on('pm:remove', this.onChangeFunction.bind(this));
+				e.layer.on('pm:rotate', this.onChangeFunction.bind(this));
 				this.onChangeFunction();
 			};
 		})
@@ -166,15 +166,6 @@ class MapHandler {
 				});
 			}
 		});
-
-		this.exclusionAreaFeatureGroup.addEventListener('pm:change', _ => {
-			let polygons: Polygon[] = [];
-			this.exclusionAreaFeatureGroup.eachLayer(layer => {
-				if (layer instanceof Polygon) {
-					polygons.push(layer);
-				}
-			});
-		});
 	}
 	
 	public getCurrentStartPointId(): number {
@@ -277,18 +268,16 @@ class MapHandler {
 		var firstMarker = true;
 		endpoints.forEach(endpoint => {
 			var settings;
+			var marker;
 			if (firstMarker) {
+				marker = L.marker([endpoint.latitude, endpoint.longitude], {icon: redIcon}).addTo(this.endMarkers);
 				settings = {
 					icon: redIcon
 				};
 			} else {
-				settings = {
-					icon: violetIcon,
-					opacity: 0.7
-				};
+				marker = L.circleMarker([endpoint.latitude, endpoint.longitude], {radius: 2, fillOpacity: 1.0, color: 'purple', bubblingMouseEvents: false}).addTo(this.endMarkers);
 			}
 
-			var marker = L.marker([endpoint.latitude, endpoint.longitude], settings).addTo(this.endMarkers);
 			marker.bindTooltip(Math.round(endpoint.distanceFromStart) + 'm');
 			if (firstMarker) {
 				marker.openTooltip();