Display distance and number of warnings

frontend/common/map.js

@@ -90,7 +90,10 @@ fetch("layers.json")
 				document.title = data["name"]
 				const layers = data["layers"]
 				for (let key in layers) {
-						l.push({ dirname: key , name: layers[key]["humanname"], color: layers[key]["color"] });
+						let layer = layers[key]
+						layer.name = layer['humanname']
+						layer.dirname = key
+						l.push(layer)
 						rules.push({
 								dataLayer: key,
 								symbolizer: new protomapsL.LineSymbolizer(layers[key])
@@ -138,6 +141,13 @@ let geojsons = [];
 let geojson;
 let editlayer;
 
+async function purgeLayer(l) {
+		while (l.length > 0) {
+				map.removeLayer(l.pop());
+		}
+}
+		
+
 function addGeoJsonToMap(dat) {
 		if (editlayer != undefined) {
 				const style = {
@@ -160,16 +170,13 @@ function scalarProduct(a,b) {
 }
 
 async function recompute_anglemarkers(g) {
-		for (k=0; k < anglemarkers.length ; k++) {
-				map.removeLayer(anglemarkers[k])
-		}
-		anglemarkers = [];
+		purgeLayer(anglemarkers)
 		const limit = document.getElementById("angle").value
-		
+		let distance = 0
 		for (j=0; j< g.length; j++) {
 				const coords = g[j].geometry.coordinates;
-				console.log(coords);
 				for (let i=1; i < coords.length - 1; i++) {
+						distance += L.latLng(coords[i][1],coords[i][0]).distanceTo(L.latLng(coords[i-1][1],coords[i-1][0]))
 						const a = computeVector(coords,i);
 						const b = computeVector(coords,i+1);
 						let angle = Math.acos(scalarProduct(a,b)/Math.sqrt(scalarProduct(a,a)*scalarProduct(b,b)))
@@ -179,9 +186,16 @@ async function recompute_anglemarkers(g) {
 								mark.addTo(map);
 								mark._icon.classList.add("warn");
 						}
-						console.log(angle)
 				}
 		}
+		document.querySelector("#distance").innerHTML = `${(distance / 1000).toFixed(2)} km`
+		const markSpan = document.querySelector("#anglemarkers")
+		markSpan.innerHTML = `${anglemarkers.length} warning${anglemarkers.length != 1 ? "s" : ""}`
+		if (anglemarkers.length > 0) {
+				markSpan.classList.add("warning")
+		} else {
+				markSpan.classList.remove("warning")
+		}
 }
 
 async function updateBrouter () {
@@ -192,6 +206,8 @@ async function updateBrouter () {
 				}
 				markers[markers.length-1]._icon.classList.add("red");
 				markers[0]._icon.classList.add("green");
+		} else {
+				resetEditing()
 		}
 		geojsons = [];
 		recompute_anglemarkers(geojsons);
@@ -199,12 +215,14 @@ async function updateBrouter () {
 				map.removeLayer(geojson);
 		}
 		if (markers.length < 2) {
+				document.querySelector("#save").disabled = true
 				return;
 		}
 		for (let i = 0; i < markers.length - 1 ; i++) {
 				const marker1 = markers[i].getLatLng();
 				const marker2 = markers[i+1].getLatLng();
-				const url = `https://brouter.de/brouter?lonlats=${marker1.lng},${marker1.lat}|${marker2.lng},${marker2.lat}&profile=rail&alternativeidx=0&format=geojson`;
+				const profile = document.querySelector("#brouter-profile").value;
+				const url = `https://brouter.de/brouter?lonlats=${marker1.lng},${marker1.lat}|${marker2.lng},${marker2.lat}&profile=${profile}&alternativeidx=0&format=geojson`;
 				fetch(url).then((response) => {
 						if (!response.ok) {
 								throw new Error("HTTP error " + response.status);
@@ -215,9 +233,8 @@ async function updateBrouter () {
 								if (geojson != undefined) {
 										map.removeLayer(geojson);
 								}
+								document.querySelector("#save").disabled = false
 								delete data.features[0].properties.messages;
-
-								console.log(data.features[0].geometry.coordinates)
 								geojsons.push(data.features[0]);
 								recompute_anglemarkers(geojsons);
 								const dat = {type: "FeatureCollection", features: geojsons};
@@ -231,11 +248,12 @@ async function updateBrouter () {
 		}
 }
 
-map.on('click', function(e) {
-		if (!editMode) {
-				return;
+async function addBrouterMarker(pos) {
+		if (!editing) {
+				editFilename = undefined
 		}
-		marker = new L.marker(e.latlng, {draggable: true}) ;
+		purgeLayer(endmarkers)
+		const marker = new L.marker(pos, {draggable: true}) ;
 		markers.push(marker);
 		marker.on("click", function(e) {
 				map.removeLayer(this);
@@ -247,17 +265,69 @@ map.on('click', function(e) {
 		});
 		marker.addTo(map);
 		updateBrouter();
+}
+
+map.on('click', function(e) {
+		if (!editMode) {
+				return;
+		}
+		addBrouterMarker(e.latlng)
 });
 
 
 async function quitEdit(e) {
 		e.stopPropagation()
 		L.DomEvent.preventDefault(e);
+		purgeLayer(endmarkers)
+		purgeLayer(markers)
+		purgeLayer(mapFeatures)
+		markers = []
+		updateBrouter()
+		recompute_anglemarkers([]);
+
 		editMode = false;
 		document.querySelector(".edit-ui").style.display = "none";
 		document.getElementById("edit-mode").style.display = "block";
 }
 
+const endmarkers = []
+const mapFeatures = []
+const mapJSONs = {}
+let editFilename
+let editing
+
+async function resetEditing() {
+		editFilename = undefined;
+		document.querySelector('#featurename').value = ""
+		editing = false
+		document.querySelector('#featurename').innerHTML = ""
+}
+
+async function startEdit(e) {
+		editing = true
+		purgeLayer(endmarkers)
+		addBrouterMarker(this._latlng)
+}
+
+async function whenClicked(e, feature, filename) {
+		if (markers.length > 0) {
+				return
+		}
+		L.DomEvent.stopPropagation(e)
+		purgeLayer(endmarkers)
+		const coords = feature.geometry.coordinates
+		const start = new L.marker(L.latLng(coords[0][1],coords[0][0])).addTo(map)
+		const end = new L.marker(L.latLng(coords[coords.length-1][1],coords[coords.length-1][0])).addTo(map)
+		for (let mark of [start, end]) {
+				endmarkers.push(mark)
+				mark.on('click', startEdit)
+		}
+		editFilename = filename
+		document.querySelector('#featurename').value = editFilename
+}
+
+
+
 async function pickDirectory(e){
 		e.stopPropagation()
 		L.DomEvent.preventDefault(e);
@@ -268,16 +338,31 @@ async function pickDirectory(e){
 				}
 				const layerspan = document.querySelector("#layername")
 				layerspan.innerHTML = ""
+				document.querySelector("#brouter-profile").value = "rail";
 				for (i = 0; i < l.length ; i++ ) {
-						console.log(l[i].dirname);
 						if (l[i].dirname === dirHandle.name) {
-								console.log(l[i])
-								console.log(this)
 								editlayer = l[i];
+								const profile = editlayer["brouter-profile"] ?? "rail" ;
+								document.querySelector("#brouter-profile").value = profile;
 								layerspan.innerHTML = "Editing layer " + layer_legend(l[i]) + "<br>" 
 								break;
 						}
 				}
+				for await (const [name, handle] of dirHandle.entries()) {
+						if (handle.kind === 'file' && name.endsWith("json")) {
+								const fileData = await handle.getFile();
+								const feature = JSON.parse(await fileData.text());
+								const mapFeature = L.geoJson(feature, {
+										style : { "color": "#000", "width": 5 },
+										onEachFeature: function (feature, layer) {
+												layer.on('click', (event) => whenClicked(event, feature, name))
+										}
+								})
+								mapJSONs[name] = feature
+								mapFeature.addTo(map)
+								mapFeatures.push(mapFeature)
+						}
+				}
 				editMode = true;
 				document.getElementById("edit-mode").style.display = "none";
 				document.querySelector(".edit-ui").style.display = "block";
@@ -286,30 +371,44 @@ async function pickDirectory(e){
 						alert("There is no path to save!");
 						return;
 				}
-				const filename = window.prompt("Enter filename:", "test");
+				const filename = document.querySelector('#featurename').value
 				if (!filename) {
 						return;
 				}
-				const dat = {type: "FeatureCollection", features: geojsons};
+				let dat = {type: "FeatureCollection", features: geojsons};
+				if (editFilename != undefined && mapJSONs[editFilename]) {
+						dat = mapJSONs[editFilename]
+						dat.features = dat.features.concat(geojsons)
+				}
 				let file;
+				let deffilename
+				if (filename.match(/\.json$|\.geojson$/)) {
+						deffilename = filename
+				} else {
+						deffilename = `${filename}.geojson`
+				}
 				try {
-						file = await dirHandle.getFileHandle(`${filename}.geojson`, {
+						file = await dirHandle.getFileHandle(deffilename, {
 								create: true
 						});
 				} catch (error) {
 						alert(`Could not open file: ${error.message}`);
 						return
 				}
+				if (editFilename != undefined && filename != editFilename) {
+						await dirHandle.removeEntry(editFilename)
+				}
 				const blob = new Blob([JSON.stringify(dat)]);
 				const writableStream = await file.createWritable();
 				await writableStream.write(blob);
 				await writableStream.close();
-				addGeoJsonToMap(dat);
+				addGeoJsonToMap({type: "FeatureCollection", features: geojsons});
 				for (i=0; i<markers.length; i++) {
 						map.removeLayer(markers[i]);
 				}
 				markers = [];
 				updateBrouter();
+				resetEditing();
 				alert("Saved file!");
 		}
 }
@@ -326,9 +425,13 @@ if (edit) {
 						buttonDiv.innerHTML = `<button id="edit-mode" onClick="pickDirectory(event)" >Edit</button>
 <div class="edit-ui">
 <div id="layername" ></div>
+<span id="distance">0.0 km</span> - <span id="anglemarkers" >0 warnings</span><br>
+<label for="featurename">Filename</label><br><input type="text" id="featurename"><br>
+<label for="brouter-profile">Brouter Profile</label><br>
+<input type="text" id="brouter-profile" onchange="updateBrouter()" ><br>
 <label for="angle">Turn restriction sensitivity</label><br>
 <input type="range" min="0" step="0.05" max="1" value="0.35" class="slider" id="angle" onchange="recompute_anglemarkers(geojsons)" ><br>
-<button id="save" onClick="pickDirectory(event)" >Save</button><button id="quit" onclick="quitEdit(event)" >Quit</button>
+<button id="save" onClick="pickDirectory(event)" disabled>Save</button><button id="quit" onclick="quitEdit(event)" >Quit</button>
 </div>`
 				} else {
 						buttonDiv.innerHTML = "Your browser does not support editing. <br> As of 2025, editing is supported on Chromium-based browsers only.";

frontend/common/styles.css

@@ -27,3 +27,8 @@ img.warn { filter: hue-rotate(160deg); }
 div.edit-ui {
 	display: none;
 }
+
+span.warning {
+	color: red;
+	font-weight: bold;
+}