martin/Freewheeling
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -73,8 +73,8 @@
<h2>Instructions:</h2> <h2>Instructions:</h2>
<p> <p>
Click anywhere on the map to calculate where it is possible to freewheel from that point. A set of possible 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 will then appear on the map. The farthest possible end point is shown with a red marker, 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 are shown as purple circles. Click an endpoint to see the calculated route that leads from the start point
to the end point. to the end point.
</p> </p>
<p> <p>

27
src/modules/maphandler/maphandler.ts
View File

@ -76,11 +76,11 @@ class MapHandler {
L.PM.reInitLayer(e.layer); L.PM.reInitLayer(e.layer);
if (this.onChangeFunction != null) { if (this.onChangeFunction != null) {
e.layer.on('pm:edit', this.onChangeFunction); e.layer.on('pm:edit', this.onChangeFunction.bind(this));
e.layer.on('pm:drag', this.onChangeFunction); e.layer.on('pm:drag', this.onChangeFunction.bind(this));
e.layer.on('pm:cut', this.onChangeFunction); e.layer.on('pm:cut', this.onChangeFunction.bind(this));
e.layer.on('pm:remove', this.onChangeFunction); e.layer.on('pm:remove', this.onChangeFunction.bind(this));
e.layer.on('pm:rotate', this.onChangeFunction); e.layer.on('pm:rotate', this.onChangeFunction.bind(this));
this.onChangeFunction(); 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 { public getCurrentStartPointId(): number {
@ -277,18 +268,16 @@ class MapHandler {
var firstMarker = true; var firstMarker = true;
endpoints.forEach(endpoint => { endpoints.forEach(endpoint => {
var settings; var settings;
var marker;
if (firstMarker) { if (firstMarker) {
marker = L.marker([endpoint.latitude, endpoint.longitude], {icon: redIcon}).addTo(this.endMarkers);
settings = { settings = {
icon: redIcon icon: redIcon
}; };
} else { } else {
settings = { marker = L.circleMarker([endpoint.latitude, endpoint.longitude], {radius: 2, fillOpacity: 1.0, color: 'purple', bubblingMouseEvents: false}).addTo(this.endMarkers);
icon: violetIcon,
opacity: 0.7
};
} }
var marker = L.marker([endpoint.latitude, endpoint.longitude], settings).addTo(this.endMarkers);
marker.bindTooltip(Math.round(endpoint.distanceFromStart) + 'm'); marker.bindTooltip(Math.round(endpoint.distanceFromStart) + 'm');
if (firstMarker) { if (firstMarker) {
marker.openTooltip(); marker.openTooltip();