diff --git a/frontend/common/map.js b/frontend/common/map.js
index 4342863..76d8289 100644
--- a/frontend/common/map.js
+++ b/frontend/common/map.js
@@ -15,6 +15,8 @@ legend.onAdd = function (map) {
const map = L.map("map", { center: [52,13], zoom: 3, minZoom: 0 });
+map.attributionControl.setPrefix('Made with Streckenkarte' );
+
function update_hash() {
const {lat, lng} = this.getCenter();
@@ -43,7 +45,7 @@ let pointPaintRules = [
stroke: 'white',
width: 1.5,
}),
- filter: (z,f) => { return f.props.zoom < z }
+ filter: (z,f) => { return f.props.zoom > 0 && f.props.zoom < z }
}
]
@@ -68,7 +70,7 @@ let pointRules = [
return `400 ${size}px sans-serif`;
},
}),
- filter: (z,f) => { return f.props.zoom < z },
+ filter: (z,f) => { return f.props.zoom > 0 && f.props.zoom < z },
sort: (a,b) => { return a.zoom - b.zoom }
}
];
@@ -94,6 +96,7 @@ fetch("layers.json")
}
);
const strecken = protomapsL.leafletLayer({
+ attribution: "",
url: data["pmtiles_url"] ?? "strecken.pmtiles",
maxDataZoom: data["maxZoom"] ?? 10,
maxZoom: 19,
@@ -104,6 +107,7 @@ fetch("layers.json")
strecken.addTo(map);
if ("points_url" in data) {
const points = protomapsL.leafletLayer({
+ attribution: "",
url: data["points_url"],
maxDataZoom: data["maxZoom"] ?? 10,
maxZoom: 19,
@@ -120,6 +124,7 @@ fetch("layers.json")
let dirHandle;
let editMode = false;
let markers = [];
+let anglemarkers = [];
let geojsons = [];
let geojson;
let editlayer;
@@ -137,35 +142,83 @@ function addGeoJsonToMap(dat) {
return g;
}
+function computeVector(coords, i) {
+ return [coords[i][0] - coords[i-1][0], coords[i][1] - coords[i-1][1]];
+}
+
+function scalarProduct(a,b) {
+ return a[0] * b[0] + a[1] * b[1]
+}
+
+async function recompute_anglemarkers(g) {
+ for (k=0; k < anglemarkers.length ; k++) {
+ map.removeLayer(anglemarkers[k])
+ }
+ anglemarkers = [];
+ const limit = document.getElementById("angle").value
+
+ 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++) {
+ 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)))
+ if (angle > limit ) {
+ let mark = new L.marker(L.latLng(coords[i][1],coords[i][0]))
+ anglemarkers.push(mark);
+ mark.addTo(map);
+ mark._icon.classList.add("warn");
+ }
+ console.log(angle)
+ }
+ }
+}
+
async function updateBrouter () {
if (markers.length > 0) {
- for (i=1; i< markers.length-1; i++) {
+ for (i=0; i< markers.length; i++) {
markers[i]._icon.classList.remove("red");
+ markers[i]._icon.classList.remove("darkred");
}
markers[markers.length-1]._icon.classList.add("red");
markers[0]._icon.classList.add("green");
}
geojsons = [];
+ recompute_anglemarkers(geojsons);
+ if (geojson != undefined) {
+ map.removeLayer(geojson);
+ }
if (markers.length < 2) {
- if (geojson != undefined) {
- map.removeLayer(geojson);
- }
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`;
- fetch(url).then((response) => response.json())
+ fetch(url).then((response) => {
+ if (!response.ok) {
+ throw new Error("HTTP error " + response.status);
+ }
+ return response.json()
+ })
.then((data) => {
if (geojson != undefined) {
map.removeLayer(geojson);
}
- delete data.features[0].properties.messages
+ 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};
geojson = addGeoJsonToMap(dat);
})
+ .catch(err => {
+ markers[i]._icon.classList.add("darkred");
+ markers[i+1]._icon.classList.add("darkred");
+ }
+ )
}
}
@@ -188,6 +241,14 @@ map.on('click', function(e) {
});
+async function quitEdit(e) {
+ e.stopPropagation()
+ L.DomEvent.preventDefault(e);
+ editMode = false;
+ document.querySelector(".edit-ui").style.display = "none";
+ document.getElementById("edit-mode").style.display = "block";
+}
+
async function pickDirectory(e){
e.stopPropagation()
L.DomEvent.preventDefault(e);
@@ -196,18 +257,21 @@ async function pickDirectory(e){
if (!dirHandle) {
return;
}
+ const layerspan = document.querySelector("#layername")
+ layerspan.innerHTML = ""
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];
- this.innerHTML = "Editing layer " + layer_legend(l[i]) + "
" + this.innerHTML
+ layerspan.innerHTML = "Editing layer " + layer_legend(l[i]) + "
"
break;
}
}
-
- document.getElementById("edit-mode").style.color = "red";
- document.getElementById("edit-mode").innerHTML = "save";
editMode = true;
+ document.getElementById("edit-mode").style.display = "none";
+ document.querySelector(".edit-ui").style.display = "block";
} else {
if (geojsons.length < 1) {
alert("There is no path to save!");
@@ -218,9 +282,15 @@ async function pickDirectory(e){
return;
}
const dat = {type: "FeatureCollection", features: geojsons};
- const file = await dirHandle.getFileHandle(`${filename}.geojson`, {
- create: true
- });
+ let file;
+ try {
+ file = await dirHandle.getFileHandle(`${filename}.geojson`, {
+ create: true
+ });
+ } catch (error) {
+ alert(`Could not open file: ${error.message}`);
+ return
+ }
const blob = new Blob([JSON.stringify(dat)]);
const writableStream = await file.createWritable();
await writableStream.write(blob);
@@ -243,8 +313,22 @@ if (edit) {
customButton.onAdd = () => {
const buttonDiv = L.DomUtil.create('div', 'legend');
if ("showDirectoryPicker" in window) {
- buttonDiv.innerHTML = ``;
- buttonDiv.addEventListener('click', pickDirectory, this)
+ // const button = L.DomUtil.create('button');
+ // button.id = 'edit-mode';
+ // button.innerHTML = 'Edit';
+ // buttonDiv.appendChild(button)
+ // button.addEventListener('click', pickDirectory, this)
+ L.DomEvent.disableClickPropagation(buttonDiv);
+ buttonDiv.addEventListener('mouseover', L.DomEvent.stopPropagation);
+ buttonDiv.addEventListener('click', L.DomEvent.preventDefault)
+ buttonDiv.addEventListener('click', L.DomEvent.stopPropagation)
+ buttonDiv.innerHTML = `
+