57 lines
2.4 KiB
JavaScript
57 lines
2.4 KiB
JavaScript
|
|
||
|
|
var map = L.map('map').setView([50.880301, 6.560531], 13,);
|
||
|
|
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { minZoom: 12, maxZoom: 19, attribution: 'Map data: © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>' }).addTo(map);
|
||
|
|
let editButton = L.control.editButton({position: 'topright'});
|
||
|
|
map.addControl(editButton,);
|
||
|
|
|
||
|
|
var barrio_markers = L.layerGroup(); //overlay where all barrio markers will be added
|
||
|
|
var tree_markers = L.layerGroup(); //overlay where all tree(house) markers will be added
|
||
|
|
var test_tree_marker = L.marker([50.880301, 6.560531]).addTo(tree_markers);
|
||
|
|
map.addLayer(tree_markers);
|
||
|
|
|
||
|
|
|
||
|
|
function onMapClick(e){ //for adding a tree(house)
|
||
|
|
if (editing && map.getZoom() > max_barrio_zoom) {
|
||
|
|
sidebar.open('tree');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function onMapZoom(e){ //for deciding wether to show barrios or treehouses
|
||
|
|
if (map.getZoom() > max_barrio_zoom) {
|
||
|
|
map.addLayer(barrio_markers);
|
||
|
|
map.removeLayer(tree_markers);
|
||
|
|
|
||
|
|
}
|
||
|
|
if (map.getZoom() <= max_barrio_zoom) {
|
||
|
|
map.addLayer(tree_markers);
|
||
|
|
map.removeLayer(barrio_markers);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function onMapMouseDown(e){} //probably needed for Barrio creation -> nope.
|
||
|
|
function onMapMouseUp(e){
|
||
|
|
if (editing && (map.getZoom() <= max_barrio_zoom)) {
|
||
|
|
// use selectfeature.getAreaLatLng() to fill in hidden fields of the form
|
||
|
|
// add a new panel
|
||
|
|
let panelContent = {
|
||
|
|
id: 'barrio_form', // UID, used to access the panel
|
||
|
|
tab: '<i class="fa fa-tents"></i>', // content can be passed as HTML string,
|
||
|
|
pane: 'TODO: put form for barrio input here',//someDomNode.innerHTML, // DOM elements can be passed, too
|
||
|
|
title: 'Barrio Form', // an optional pane header
|
||
|
|
};
|
||
|
|
sidebar.addPanel(panelContent);
|
||
|
|
sidebar.open('barrio_form');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function onMapContextMenu(e){}//probably neat for something
|
||
|
|
|
||
|
|
var sidebar = L.control.sidebar({
|
||
|
|
container: 'sidebar', // the DOM container or #ID of a predefined sidebar container that should be used
|
||
|
|
}).addTo(map).open('home');
|
||
|
|
|
||
|
|
map.on('click', onMapClick);
|
||
|
|
map.on('zoomend', onMapZoom);
|
||
|
|
map.on('mousedown', onMapMouseDown);
|
||
|
|
map.on('selectAreaFeature:mouseUp', onMapMouseUp); // because registering a listener on mouseup or layeradd breaks the SelectFeature plugin
|
||
|
|
map.on('contextMenu', onMapContextMenu);
|
||
|
|
sidebar.on('closing', function(e) {sidebar.removePanel('barrio_form');});
|
||
|
|
|