diff --git a/frontend/common/map.js b/frontend/common/map.js index 5b822ce..4b991d6 100644 --- a/frontend/common/map.js +++ b/frontend/common/map.js @@ -90,10 +90,7 @@ fetch("layers.json") document.title = data["name"] const layers = data["layers"] for (let key in layers) { - let layer = layers[key] - layer.name = layer['humanname'] - layer.dirname = key - l.push(layer) + l.push({ dirname: key , name: layers[key]["humanname"], color: layers[key]["color"] }); rules.push({ dataLayer: key, symbolizer: new protomapsL.LineSymbolizer(layers[key]) @@ -141,13 +138,6 @@ 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 = { @@ -170,13 +160,16 @@ function scalarProduct(a,b) { } async function recompute_anglemarkers(g) { - purgeLayer(anglemarkers) + for (k=0; k < anglemarkers.length ; k++) { + map.removeLayer(anglemarkers[k]) + } + 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))) @@ -186,16 +179,9 @@ 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 () { @@ -206,8 +192,6 @@ async function updateBrouter () { } markers[markers.length-1]._icon.classList.add("red"); markers[0]._icon.classList.add("green"); - } else { - resetEditing() } geojsons = []; recompute_anglemarkers(geojsons); @@ -215,14 +199,12 @@ 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 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`; + const url = `https://brouter.de/brouter?lonlats=${marker1.lng},${marker1.lat}|${marker2.lng},${marker2.lat}&profile=rail&alternativeidx=0&format=geojson`; fetch(url).then((response) => { if (!response.ok) { throw new Error("HTTP error " + response.status); @@ -233,8 +215,9 @@ 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}; @@ -248,12 +231,11 @@ async function updateBrouter () { } } -async function addBrouterMarker(pos) { - if (!editing) { - editFilename = undefined +map.on('click', function(e) { + if (!editMode) { + return; } - purgeLayer(endmarkers) - const marker = new L.marker(pos, {draggable: true}) ; + marker = new L.marker(e.latlng, {draggable: true}) ; markers.push(marker); marker.on("click", function(e) { map.removeLayer(this); @@ -265,69 +247,17 @@ async function addBrouterMarker(pos) { }); 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); @@ -338,31 +268,16 @@ 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"; @@ -371,44 +286,30 @@ async function pickDirectory(e){ alert("There is no path to save!"); return; } - const filename = document.querySelector('#featurename').value + const filename = window.prompt("Enter filename:", "test"); if (!filename) { return; } - let dat = {type: "FeatureCollection", features: geojsons}; - if (editFilename != undefined && mapJSONs[editFilename]) { - dat = mapJSONs[editFilename] - dat.features = dat.features.concat(geojsons) - } + const dat = {type: "FeatureCollection", features: geojsons}; let file; - let deffilename - if (filename.match(/\.json$|\.geojson$/)) { - deffilename = filename - } else { - deffilename = `${filename}.geojson` - } try { - file = await dirHandle.getFileHandle(deffilename, { + file = await dirHandle.getFileHandle(`${filename}.geojson`, { 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({type: "FeatureCollection", features: geojsons}); + addGeoJsonToMap(dat); 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 12343d5..731b8bb 100644 --- a/frontend/common/styles.css +++ b/frontend/common/styles.css @@ -27,8 +27,3 @@ img.warn { filter: hue-rotate(160deg); } div.edit-ui { display: none; } - -span.warning { - color: red; - font-weight: bold; -}