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

This commit is contained in:
Martin Asprusten 2025-07-02 17:09:46 +02:00
parent 7c0dd3ee4e
commit a8c46585df
2 changed files with 10 additions and 21 deletions

View File

@ -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>

View File

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