Start writing on editing feature
This commit is contained in:
parent
e4bb95c1c8
commit
54ba75dd1c
3 changed files with 154 additions and 75 deletions
154
frontend/common/map.js
Normal file
154
frontend/common/map.js
Normal file
|
|
@ -0,0 +1,154 @@
|
|||
|
||||
const rules = new Array;
|
||||
const l = new Array;
|
||||
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 += '<span class="dot" style="background: ' + l[i]["color"] + '" ></span>' + l[i]["name"] + "<br>";
|
||||
}
|
||||
return div;
|
||||
};
|
||||
|
||||
|
||||
const map = L.map("map", { center: [52,13], zoom: 3, minZoom: 0 });
|
||||
|
||||
function update_hash() {
|
||||
const {lat, lng} = this.getCenter();
|
||||
const zoom = this.getZoom();
|
||||
const digits = 4;
|
||||
window.history.replaceState(null, '', `#map=${zoom}/${lat.toFixed(digits)}/${lng.toFixed(digits)}`);
|
||||
}
|
||||
|
||||
function onHashChange() {
|
||||
const hash = document.location.hash;
|
||||
const coords = decodeURIComponent(hash.slice(5)).split("/") // strip off the #map= part
|
||||
const latLng = L.latLng(parseFloat(coords[1]), parseFloat(coords[2]));
|
||||
map.setView(latLng, parseInt(coords[0]));
|
||||
}
|
||||
|
||||
map.on("moveend", update_hash);
|
||||
map.on("zoomend", update_hash);
|
||||
|
||||
fetch("layers.json")
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
document.title = data["name"]
|
||||
layers = data["layers"]
|
||||
for (let key in layers) {
|
||||
l.push({ name: layers[key]["humanname"], color: layers[key]["color"] });
|
||||
rules.push({
|
||||
dataLayer: key,
|
||||
symbolizer: new protomapsL.LineSymbolizer(layers[key])
|
||||
});
|
||||
}
|
||||
const tiles = data["tilelayer"]
|
||||
var osm = L.tileLayer(
|
||||
tiles["url_template"],
|
||||
{
|
||||
maxZoom: 19,
|
||||
attribution: tiles["attribution"]
|
||||
}
|
||||
);
|
||||
var strecken = protomapsL.leafletLayer({
|
||||
url: "strecken.pmtiles",
|
||||
maxDataZoom: data["maxZoom"] ?? 10,
|
||||
maxZoom: 19,
|
||||
paintRules: rules,
|
||||
});
|
||||
|
||||
osm.addTo(map);
|
||||
legend.addTo(map);
|
||||
strecken.addTo(map);
|
||||
})
|
||||
|
||||
let dirHandle;
|
||||
let editMode = false;
|
||||
let markers = [];
|
||||
let geojsons = [];
|
||||
let geojson;
|
||||
|
||||
async function updateBrouter () {
|
||||
if (markers.length < 1) {
|
||||
return;
|
||||
}
|
||||
geojsons = [];
|
||||
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())
|
||||
.then((data) => {
|
||||
if (geojson != undefined) {
|
||||
map.removeLayer(geojson);
|
||||
}
|
||||
geojsons.push(data.features[0]);
|
||||
const dat = {type: "FeatureCollection", features: geojsons};
|
||||
geojson = L.geoJSON(dat);
|
||||
geojson.addTo(map);
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
map.on('click', function(e) {
|
||||
// if (!editMode) {
|
||||
// return;
|
||||
// }
|
||||
marker = new L.marker(e.latlng, {draggable: true}) ;
|
||||
markers.push(marker);
|
||||
updateBrouter();
|
||||
marker.on("click", function(e) {
|
||||
map.removeLayer(this);
|
||||
markers = markers.filter(item => item != this);
|
||||
updateBrouter();
|
||||
console.log(markers);
|
||||
})
|
||||
marker.addTo(map);
|
||||
});
|
||||
|
||||
|
||||
async function pickDirectory(){
|
||||
if (!editMode) {
|
||||
dirHandle = await window.showDirectoryPicker();
|
||||
document.getElementById("edit-mode").style.color = "red";
|
||||
document.getElementById("edit-mode").innerHTML = "save";
|
||||
editMode = true;
|
||||
} else {
|
||||
const filename = window.prompt("Enter filename:", "test");
|
||||
const dat = {type: "FeatureCollection", features: geojsons};
|
||||
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);
|
||||
await writableStream.close();
|
||||
alert("Saved file!");
|
||||
}
|
||||
}
|
||||
|
||||
const customButton = L.control({ position: 'topright' });
|
||||
customButton.onAdd = () => {
|
||||
const buttonDiv = L.DomUtil.create('div', 'button-wrapper');
|
||||
|
||||
buttonDiv.innerHTML = `<button id="edit-mode" >Edit</button>`;
|
||||
buttonDiv.addEventListener('click', () => pickDirectory())
|
||||
return buttonDiv;
|
||||
};
|
||||
customButton.addTo(map)
|
||||
|
||||
|
||||
|
||||
function resize() {
|
||||
document.getElementById("map").style.height = window.innerHeight + 'px';
|
||||
}
|
||||
resize();
|
||||
window.addEventListener('resize', () => {
|
||||
resize();
|
||||
});
|
||||
|
||||
window.addEventListener("hashchange", onHashChange);
|
||||
onHashChange();
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
|
||||
const rules = new Array;
|
||||
const l = new Array;
|
||||
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 += '<span class="dot" style="background: ' + l[i]["color"] + '" ></span>' + l[i]["name"] + "<br>";
|
||||
}
|
||||
return div;
|
||||
};
|
||||
|
||||
|
||||
const map = L.map("map", { center: [52,13], zoom: 3, minZoom: 0 });
|
||||
|
||||
function update_hash() {
|
||||
const {lat, lng} = this.getCenter();
|
||||
const zoom = this.getZoom();
|
||||
const digits = 4;
|
||||
window.history.replaceState(null, '', `#map=${zoom}/${lat.toFixed(digits)}/${lng.toFixed(digits)}`);
|
||||
}
|
||||
|
||||
function onHashChange() {
|
||||
const hash = document.location.hash;
|
||||
const coords = decodeURIComponent(hash.slice(5)).split("/") // strip off the #map= part
|
||||
const latLng = L.latLng(parseFloat(coords[1]), parseFloat(coords[2]));
|
||||
map.setView(latLng, parseInt(coords[0]));
|
||||
}
|
||||
|
||||
map.on("moveend", update_hash);
|
||||
map.on("zoomend", update_hash);
|
||||
|
||||
fetch("layers.json")
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
document.title = data["name"]
|
||||
layers = data["layers"]
|
||||
for (let key in layers) {
|
||||
l.push({ name: layers[key]["humanname"], color: layers[key]["color"] });
|
||||
rules.push({
|
||||
dataLayer: key,
|
||||
symbolizer: new protomapsL.LineSymbolizer(layers[key])
|
||||
});
|
||||
}
|
||||
const tiles = data["tilelayer"]
|
||||
var osm = L.tileLayer(
|
||||
tiles["url_template"],
|
||||
{
|
||||
maxZoom: 19,
|
||||
attribution: tiles["attribution"]
|
||||
}
|
||||
);
|
||||
var strecken = protomapsL.leafletLayer({
|
||||
url: "strecken.pmtiles",
|
||||
maxDataZoom: data["maxZoom"] ?? 10,
|
||||
maxZoom: 19,
|
||||
paintRules: rules,
|
||||
});
|
||||
|
||||
osm.addTo(map);
|
||||
legend.addTo(map);
|
||||
strecken.addTo(map);
|
||||
})
|
||||
|
||||
function resize() {
|
||||
document.getElementById("map").style.height = window.innerHeight + 'px';
|
||||
}
|
||||
resize();
|
||||
window.addEventListener('resize', () => {
|
||||
resize();
|
||||
});
|
||||
|
||||
window.addEventListener("hashchange", onHashChange);
|
||||
onHashChange();
|
||||
|
||||
Loading…
Add table
Reference in a new issue