antonia/streckenkarte
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Display currently edited layer, hide edit button if not supported

Browse source
This commit is contained in:
Antonia 2025-03-10 18:56:43 +01:00
parent 954e8c4500
commit 2fee843c52
1 changed files with 40 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
frontend/common/map.js
View file

@ -1,3 +1,6 @@
function layer_legend(layer) {
return '<span class="dot" style="background: ' + layer["color"] + '" ></span>' + layer["name"];
}
const rules = new Array; const rules = new Array;
const l = new Array; const l = new Array;
@ -5,7 +8,7 @@ var legend = L.control({position: 'bottomleft'});
legend.onAdd = function (map) { legend.onAdd = function (map) {
var div = L.DomUtil.create('div', 'legend'); var div = L.DomUtil.create('div', 'legend');
for (var i = 0; i < l.length; i++) { for (var i = 0; i < l.length; i++) {
div.innerHTML += '<span class="dot" style="background: ' + l[i]["color"] + '" ></span>' + l[i]["name"] + "<br>"; div.innerHTML += layer_legend(l[i]) + "<br>";
} }
return div; return div;
}; };
@ -36,7 +39,7 @@ fetch("layers.json")
document.title = data["name"] document.title = data["name"]
layers = data["layers"] layers = data["layers"]
for (let key in layers) { for (let key in layers) {
l.push({ name: layers[key]["humanname"], color: layers[key]["color"] }); l.push({ dirname: key , name: layers[key]["humanname"], color: layers[key]["color"] });
rules.push({ rules.push({
dataLayer: key, dataLayer: key,
symbolizer: new protomapsL.LineSymbolizer(layers[key]) symbolizer: new protomapsL.LineSymbolizer(layers[key])
@ -67,6 +70,7 @@ let editMode = false;
let markers = []; let markers = [];
let geojsons = []; let geojsons = [];
let geojson; let geojson;
let editlayer;
async function updateBrouter () { async function updateBrouter () {
if (markers.length < 2) { if (markers.length < 2) {
@ -87,7 +91,14 @@ async function updateBrouter () {
} }
geojsons.push(data.features[0]); geojsons.push(data.features[0]);
const dat = {type: "FeatureCollection", features: geojsons}; const dat = {type: "FeatureCollection", features: geojsons};
if (editlayer != undefined) {
const style = {
"color": editlayer.color
};
geojson = L.geoJSON(dat, {style: style});
} else {
geojson = L.geoJSON(dat); geojson = L.geoJSON(dat);
}
geojson.addTo(map); geojson.addTo(map);
}) })
} }
@ -104,15 +115,28 @@ map.on('click', function(e) {
map.removeLayer(this); map.removeLayer(this);
markers = markers.filter(item => item != this); markers = markers.filter(item => item != this);
updateBrouter(); updateBrouter();
console.log(markers);
}) })
marker.on("dragend", function(e) {
updateBrouter();
});
marker.addTo(map); marker.addTo(map);
}); });
async function pickDirectory(){ async function pickDirectory(e){
e.stopPropagation()
L.DomEvent.preventDefault(e);
if (!editMode) { if (!editMode) {
dirHandle = await window.showDirectoryPicker(); dirHandle = await window.showDirectoryPicker();
for (i = 0; i < l.length ; i++ ) {
console.log(l[i].dirname);
if (l[i].dirname === dirHandle.name) {
editlayer = l[i];
this.innerHTML = "Editing layer " + layer_legend(l[i]) + "<br>" + this.innerHTML
break;
}
}
document.getElementById("edit-mode").style.color = "red"; document.getElementById("edit-mode").style.color = "red";
document.getElementById("edit-mode").innerHTML = "save"; document.getElementById("edit-mode").innerHTML = "save";
editMode = true; editMode = true;
@ -130,16 +154,17 @@ async function pickDirectory(){
} }
} }
const customButton = L.control({ position: 'topright' }); if ("showDirectoryPicker" in window) {
customButton.onAdd = () => { const customButton = L.control({ position: 'topright' });
const buttonDiv = L.DomUtil.create('div', 'button-wrapper'); customButton.onAdd = () => {
const buttonDiv = L.DomUtil.create('div', 'legend');
buttonDiv.innerHTML = `<button id="edit-mode" >Edit</button>`; buttonDiv.innerHTML = `<button id="edit-mode" >Edit</button>`;
buttonDiv.addEventListener('click', () => pickDirectory()) buttonDiv.addEventListener('click', pickDirectory, this)
return buttonDiv; return buttonDiv;
}; };
customButton.addTo(map) customButton.addTo(map)
}
function resize() { function resize() {