HambiMap/sketch/html/app.js

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: &copy; <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 onSelectAreaFeatureEnabled(e){
        editing = true;
        editButton.toggle_style();
    }
function onSelectAreaFeatureDisabled(e){
        editing = false;
        editButton.toggle_style();
    }
function onMapMouseDown(e){}  //probably needed for Barrio creation -> nope.
function onMapMouseUp(e){
    console.log(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');
	    // TODO disable drawing feature until sidebar panel is removed. In other words: You may only draw if there is no barrio form already open
	    if(document.getElementById('barrio_form')) 
                map.selectAreaFeature.disable();
    }
}
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('drawend', onMapMouseUp); // because registering a listener on mouseup or layeradd breaks the SelectFeature plugin
map.on('contextMenu', onMapContextMenu);
map.on('selectareadisabled', onSelectAreaFeatureDisabled);
map.on('selectareaenabled', onSelectAreaFeatureEnabled);
sidebar.on('closing', function(e) {
    if(document.getElementById('barrio_form')) 
        sidebar.removePanel('barrio_form'); 
    if(!document.getElementById('barrio_form')) 
        map.selectAreaFeature.enable();
});