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
`
} 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;
-}