diff --git a/sketch/html/app.js b/sketch/html/app.js
new file mode 100644
index 0000000..999fc0f
--- /dev/null
+++ b/sketch/html/app.js
@@ -0,0 +1,56 @@
+
+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: © OpenStreetMap contributors' }).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: '', // 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');});
+
diff --git a/sketch/html/editButton.js b/sketch/html/editButton.js
new file mode 100644
index 0000000..b918f57
--- /dev/null
+++ b/sketch/html/editButton.js
@@ -0,0 +1,47 @@
+L.Control.EditButton = L.Control.extend({
+
+ onAdd: function (map) {
+ var editButton = L.DomUtil.create('button', 'w3-button w3-white w3-hover-light-blue w3-small leaflet-bar');
+
+ //var editButton = L.DomUtil.create('button', 'leaflet-bar leaflet-control leaflet-control-custom');
+
+ // editButton.style.backgroundColor = 'white';
+ // editButton.style.backgroundSize = "30px 30px";
+ let title_inactive_treehouse = 'Add a treehouse in the current map area';
+ let title_inactive_barrio = 'Add a barrio in the current map area';
+ let title_active = 'Disable edit mode to drag the map';
+ title_inactive = function(){
+ let zoom = map.getZoom();
+ if (zoom <= max_barrio_zoom) return title_inactive_barrio;
+ // if (layer == 'treehouse') // uncomment if you ever introduce another layer or default value
+ return title_inactive_treehouse;
+ };
+
+ editButton.innerHTML = 'edit';
+ editButton.title = title_inactive();
+
+ editButton.onclick = function(){
+ if (editing) {
+ editButton.className = editButton.className.replace("w3-blue", "w3-white");
+ editButton.title = title_inactive();
+ map.selectAreaFeature.disable();
+ editing = false;
+ } else {
+ editButton.className = editButton.className.replace("w3-white", "w3-blue");
+ editButton.title = title_active;
+ map.selectAreaFeature.enable();
+ editing = true;
+ }
+ }
+
+ return editButton;
+ },
+
+ onRemove: function(map) {
+ // Nothing to do here
+ }
+});
+
+L.control.editButton = function(opts) {
+ return new L.Control.EditButton(opts);
+}
diff --git a/sketch/html/globals.js b/sketch/html/globals.js
new file mode 100644
index 0000000..b118e62
--- /dev/null
+++ b/sketch/html/globals.js
@@ -0,0 +1,2 @@
+const max_barrio_zoom = 16;
+let editing = false;
diff --git a/sketch/html/main_with_sidebar.html b/sketch/html/main_with_sidebar.html
index dc21e86..ffb453e 100644
--- a/sketch/html/main_with_sidebar.html
+++ b/sketch/html/main_with_sidebar.html
@@ -70,96 +70,9 @@
-
+
+
+