137 lines
4.1 KiB
JavaScript
137 lines
4.1 KiB
JavaScript
let map, drawnItems, drawControl;
|
|
|
|
|
|
function reload_map() {
|
|
fetch("/marker").then(response => response.json()).then(markers => {
|
|
// const map = window.map;
|
|
drawnItems.clearLayers();
|
|
markers.forEach(marker => {
|
|
let mapMarker = L.marker({"lat": marker.latitude, "lng": marker.longitude});
|
|
mapMarker.options["id"] = marker.id;
|
|
mapMarker.options["title"] = marker.name;
|
|
for (const opt in marker.options) {
|
|
mapMarker.options[opt] = marker.options[opt];
|
|
}
|
|
mapMarker.bindLabel(marker.name, {noHide: true});
|
|
mapMarker.bindPopup(marker.name);
|
|
drawnItems.addLayer(mapMarker);
|
|
});
|
|
if (!drawControl) {
|
|
// add drawControl only after some drawnItems exist, so
|
|
// it is not shown disabled
|
|
drawControl = new L.Control.Draw({
|
|
draw: {
|
|
position: 'topleft',
|
|
polygon: false,
|
|
rectangle: false,
|
|
polyline: false,
|
|
circle: false
|
|
},
|
|
edit: {
|
|
featureGroup: drawnItems
|
|
}
|
|
});
|
|
console.log(map);
|
|
console.log(drawControl);
|
|
map.addControl(drawControl);
|
|
}
|
|
});
|
|
}
|
|
|
|
function setup_map() {
|
|
let osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
|
osmAttrib = '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
|
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});
|
|
|
|
map = new L.Map('mapmakr', {layers: [osm], attributionControl: false, center: new L.LatLng(0, 0), zoom: 2 });
|
|
|
|
drawnItems = new L.MarkerClusterGroup({maxClusterRadius: 45});
|
|
map.addLayer(drawnItems);
|
|
reload_map();
|
|
|
|
const refreshButton = new L.easyButton('icon ion-refresh', function() {reload_map();});
|
|
refreshButton.button.style.fontSize = '18px';
|
|
map.addControl(refreshButton);
|
|
|
|
const helpButton = new L.easyButton('icon ion-help-circled', function() {open("about.html");});
|
|
helpButton.button.style.fontSize = '18px';
|
|
map.addControl(helpButton);
|
|
|
|
const controlSearch = new L.Control.Search({layer: drawnItems, propertyName: 'id', initial: false, zoom: 12});
|
|
map.addControl(controlSearch);
|
|
|
|
statsControl = new L.control.attribution({position:'bottomright', prefix:''});
|
|
map.addControl(statsControl);
|
|
|
|
scaleControl = new L.control.scale();
|
|
map.addControl(scaleControl);
|
|
|
|
terminator = new L.terminator();
|
|
terminator.options.opacity = 0.2;
|
|
terminator.options.fillOpacity = 0.2;
|
|
terminator.addTo(map);
|
|
setInterval(() => updateTerminator(terminator), 60000); // 1 minute
|
|
|
|
function updateTerminator(t) {
|
|
var t2 = L.terminator();
|
|
t.setLatLngs(t2.getLatLngs());
|
|
t.redraw();
|
|
}
|
|
|
|
// called after new marker is created
|
|
map.on('draw:created', function (e) {
|
|
let type = e.layerType, layer = e.layer;
|
|
if (type !== 'marker') {
|
|
return;
|
|
}
|
|
|
|
let name = prompt("Marker name:", "");
|
|
if (name) {
|
|
layer.options.id = null;
|
|
layer.options.title = name;
|
|
layer.bindPopup(name);
|
|
drawnItems.addLayer(layer);
|
|
let requestOptions = {
|
|
method: "POST",
|
|
headers: {
|
|
"Accept": "application/json",
|
|
"Content-Type": "application/json"
|
|
},
|
|
body: JSON.stringify({
|
|
"name": name,
|
|
"latitude": layer.getLatLng()["lat"],
|
|
"longitude": layer.getLatLng()["lng"],
|
|
"options": {}
|
|
})
|
|
};
|
|
fetch("/marker", requestOptions).then(() => reload_map());
|
|
}
|
|
});
|
|
|
|
map.on('draw:edited', function (e) {
|
|
e.layers.eachLayer(layer => {
|
|
let type = layer.layerType, id = layer.options.id;
|
|
let requestOptions = {
|
|
method: "PATCH",
|
|
headers: {
|
|
"Accept": "application/json",
|
|
"Content-Type": "application/json"
|
|
},
|
|
body: JSON.stringify({
|
|
"name": layer.options.name,
|
|
"latitude": layer.getLatLng()["lat"],
|
|
"longitude": layer.getLatLng()["lng"]
|
|
})
|
|
};
|
|
fetch("/marker/" + id, requestOptions).then(() => reload_map());
|
|
});
|
|
});
|
|
|
|
map.on('draw:deleted', function (e) {
|
|
e.layers.eachLayer(layer => {
|
|
let type = layer.layerType, id = layer.options.id;
|
|
fetch("/marker/" + id, {method: "DELETE"}).then(() => reload_map());
|
|
});
|
|
});
|
|
}
|