Add hue-map and favicon to attributions

README.md

@@ -16,6 +16,6 @@ First, run npm run build:emscripten, then run npx vite.
 Run npm run build. This will first run the emscripten build, and then the typescript build. The resulting website ends up in the dist/ folder.
 
 ## Attributions
-This library uses the [leaflet](https://leafletjs.com/) library, which is licensed under the [2-clause BSD license](https://opensource.org/license/bsd-2-clause). It also uses the [leaflet-geoman-free](https://geoman.io/docs/leaflet/) and [proj4](http://proj4js.org/) libraries, which are licensed under the [MIT license.](https://opensource.org/license/mit). It also uses typescript definitions for [leaflet](https://www.npmjs.com/package/@types/leaflet) and [geojson](https://www.npmjs.com/package/@types/geojson), which are also licensed under the [MIT license](https://opensource.org/license/mit).
+This library uses the [leaflet](https://leafletjs.com/) library, which is licensed under the [2-clause BSD license](https://opensource.org/license/bsd-2-clause). It also uses the [leaflet-geoman-free](https://geoman.io/docs/leaflet/), [hue-map](https://github.com/giraugh/hue-map), and [proj4](http://proj4js.org/) libraries, which are licensed under the [MIT license.](https://opensource.org/license/mit). It also uses typescript definitions for [leaflet](https://www.npmjs.com/package/@types/leaflet) and [geojson](https://www.npmjs.com/package/@types/geojson), which are also licensed under the [MIT license](https://opensource.org/license/mit).
 
-The SVG icons used for creating and deleting map areas are copied, unaltered, from [Font Awesome](https://fontawesome.com), and are licensed under the [Creative Commons Attribution 4.0 International](https://creativecommons.org/licenses/by/4.0/) license. The colored map markers are from the [leaflet-color-markers](https://github.com/pointhi/leaflet-color-markers) library, and are licensed under the [2-clause BSD license](https://opensource.org/license/bsd-2-clause).
+The SVG icons used for creating and deleting map areas, as well as the favicon for the webiste, are copied, unaltered, from [Font Awesome](https://fontawesome.com), and are licensed under the [Creative Commons Attribution 4.0 International](https://creativecommons.org/licenses/by/4.0/) license. The colored map markers are from the [leaflet-color-markers](https://github.com/pointhi/leaflet-color-markers) library, and are licensed under the [2-clause BSD license](https://opensource.org/license/bsd-2-clause).

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 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.
 		</p>
 		<p>
@@ -94,12 +94,12 @@
 		<p>
 			This library uses the <a href="https://leafletjs.com/">leaflet</a> library, which is licensed under the 
 			<a href="https://opensource.org/license/bsd-2-clause">2-clause BSD license</a>. It also uses 
-			the <a href="https://geoman.io/docs/leaflet/">leaflet-geoman-free</a> and 
+			the <a href="https://geoman.io/docs/leaflet/">leaflet-geoman-free</a>, <a href="https://github.com/giraugh/hue-map">hue-map</a>, and 
 			<a href="http://proj4js.org/">proj4</a> libraries, which are licensed under the
 			<a href="https://opensource.org/license/mit">MIT license</a>.
 		</p>
 		<p>
-			The icons used for creating and deleting map areas are copied, unaltered, from 
+			The icons used for creating and deleting map areas, as well as the favicon for the webiste, are copied, unaltered, from 
 			<a href="https://fontawesome.com">Font Awesome</a>, and are licensed under the
 			<a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International</a>
 			license. The colored map markers are from the 

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: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();
 			};
 		})
@@ -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 = {
+				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');
 			if (firstMarker) {
 				marker.openTooltip();