Show endpoints as purple circles rather than purple markers. Fixed a bug where editing polygons would not lead to an update

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