diff --git a/frontend/common/map.js b/frontend/common/map.js index 4b991d6..5b822ce 100644 --- a/frontend/common/map.js +++ b/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]) + "
" 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; iEdit
+0.0 km - 0 warnings
+

+
+


- +
` } else { buttonDiv.innerHTML = "Your browser does not support editing.
As of 2025, editing is supported on Chromium-based browsers only."; diff --git a/frontend/common/styles.css b/frontend/common/styles.css index 731b8bb..12343d5 100644 --- a/frontend/common/styles.css +++ b/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; +}