diff --git a/frontend/common/map.js b/frontend/common/map.js index 76d8289..4342863 100644 --- a/frontend/common/map.js +++ b/frontend/common/map.js @@ -15,8 +15,6 @@ 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(); @@ -45,7 +43,7 @@ let pointPaintRules = [ stroke: 'white', width: 1.5, }), - filter: (z,f) => { return f.props.zoom > 0 && f.props.zoom < z } + filter: (z,f) => { return f.props.zoom < z } } ] @@ -70,7 +68,7 @@ let pointRules = [ return `400 ${size}px sans-serif`; }, }), - filter: (z,f) => { return f.props.zoom > 0 && f.props.zoom < z }, + filter: (z,f) => { return f.props.zoom < z }, sort: (a,b) => { return a.zoom - b.zoom } } ]; @@ -96,7 +94,6 @@ fetch("layers.json") } ); const strecken = protomapsL.leafletLayer({ - attribution: "", url: data["pmtiles_url"] ?? "strecken.pmtiles", maxDataZoom: data["maxZoom"] ?? 10, maxZoom: 19, @@ -107,7 +104,6 @@ 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, @@ -124,7 +120,6 @@ fetch("layers.json") let dirHandle; let editMode = false; let markers = []; -let anglemarkers = []; let geojsons = []; let geojson; let editlayer; @@ -142,83 +137,35 @@ 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=0; i< markers.length; i++) { + for (i=1; i< markers.length-1; 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) => { - if (!response.ok) { - throw new Error("HTTP error " + response.status); - } - return response.json() - }) + fetch(url).then((response) => response.json()) .then((data) => { if (geojson != undefined) { map.removeLayer(geojson); } - delete data.features[0].properties.messages; - - console.log(data.features[0].geometry.coordinates) + delete data.features[0].properties.messages 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"); - } - ) } } @@ -241,14 +188,6 @@ 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); @@ -257,21 +196,18 @@ 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]; - layerspan.innerHTML = "Editing layer " + layer_legend(l[i]) + "
" + this.innerHTML = "Editing layer " + layer_legend(l[i]) + "
" + this.innerHTML 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!"); @@ -282,15 +218,9 @@ async function pickDirectory(e){ return; } const dat = {type: "FeatureCollection", features: geojsons}; - let file; - try { - file = await dirHandle.getFileHandle(`${filename}.geojson`, { - create: true - }); - } catch (error) { - alert(`Could not open file: ${error.message}`); - return - } + const file = await dirHandle.getFileHandle(`${filename}.geojson`, { + create: true + }); const blob = new Blob([JSON.stringify(dat)]); const writableStream = await file.createWritable(); await writableStream.write(blob); @@ -313,22 +243,8 @@ if (edit) { customButton.onAdd = () => { const buttonDiv = L.DomUtil.create('div', 'legend'); if ("showDirectoryPicker" in window) { - // 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 = ` -
-
-
-
- -
` + buttonDiv.innerHTML = ``; + buttonDiv.addEventListener('click', pickDirectory, this) } 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..150beda 100644 --- a/frontend/common/styles.css +++ b/frontend/common/styles.css @@ -1,4 +1,3 @@ - body { margin: 0; padding: 0; @@ -22,8 +21,3 @@ body { } img.red { filter: hue-rotate(120deg); } img.green { filter: hue-rotate(-120deg); } -img.darkred { filter: hue-rotate(160deg); } -img.warn { filter: hue-rotate(160deg); } -div.edit-ui { - display: none; -} diff --git a/scripts/mapbuilder.sh b/scripts/mapbuilder.sh index 5616ce4..ae8f8e1 100755 --- a/scripts/mapbuilder.sh +++ b/scripts/mapbuilder.sh @@ -15,17 +15,8 @@ do done - tippecanoe -aN -z"$zoom" -o "$temp/strecken.pmtiles" $temp/*.json -if [ -f "$1/points.json" ] -then - ogr2ogr -t_srs WGS84 "$temp/points.json" "$1/points.json" - tippecanoe -aN -z12 -r1 -o "$temp/points.pmtiles" "$temp/points.json" - jq '.points_url = "points.pmtiles"' "$1/layers.json" > "$2/layers.json" -fi - - -mv $temp/*.pmtiles "$2" +mv $temp/strecken.pmtiles "$2" rm -r $temp