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