clean up behaviour of editButton

todo: don't draw, only click for treehouses

sketch/html/app.js

@@ -0,0 +1,73 @@
+
+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(tree_markers);
+				map.removeLayer(barrio_markers);
+
+        }
+		if (map.getZoom() <= max_barrio_zoom) {
+				map.addLayer(barrio_markers);
+				map.removeLayer(tree_markers);
+        }
+	}
+function onSelectAreaFeatureEnabled(e){
+    }
+function onSelectAreaFeatureDisabled(e){
+    }
+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'); 
+        // this seems redundant, but I want to check that we removed *the last* of (hopefully, but not guaranteed i guess, only one) barrio_form(s)
+        if(!document.getElementById('barrio_form') && editing && map.getZoom() <= max_barrio_zoom) 
+            map.selectAreaFeature.enable();
+    }
+});
+

sketch/html/editButton.js

@@ -0,0 +1,56 @@
+
+L.Control.EditButton =  L.Control.extend({
+        title: {
+       inactive_treehouse: 'Add a treehouse in the current map area',
+       inactive_barrio: 'Add a barrio in the current map area',
+       active: 'Disable edit mode to drag the map',
+       inactive: function(){
+            let zoom = map.getZoom();
+            if (zoom <= max_barrio_zoom) return this.inactive_barrio;
+          //  if (layer == 'treehouse')  // uncomment if you ever introduce another layer or default value
+                return this.inactive_treehouse;
+       }
+        },
+
+        editButton: null,
+
+        toggle_style: function(){
+            if (editing) {
+                this.editButton.className = this.editButton.className.replace("w3-white", "w3-blue");
+                this.editButton.title = this.title.active;
+            } else {
+                this.editButton.className = this.editButton.className.replace("w3-blue", "w3-white");
+                this.editButton.title = this.title.inactive();
+            }
+        },
+
+      onAdd: function (map) {
+        let ts = this;
+       this.editButton = L.DomUtil.create('button', 'w3-button w3-white w3-hover-light-blue w3-small leaflet-bar');
+
+       this.editButton.innerHTML = 'edit';
+       this.editButton.title = this.title.inactive();
+
+        this.editButton.onclick = function(){
+            let zoom = map.getZoom();
+            if (editing) {
+                map.selectAreaFeature.disable();
+                editing = false;
+            } else {
+                if(!document.getElementById('barrio_form') && zoom <= max_barrio_zoom) map.selectAreaFeature.enable();
+                editing = true;
+            }
+            ts.toggle_style();
+        };
+
+        return this.editButton;
+      },
+
+    onRemove: function(map) {
+        // Nothing to do here
+    }
+});
+
+L.control.editButton = function(opts) {
+    return new L.Control.EditButton(opts);
+}

sketch/html/globals.js

@@ -0,0 +1,2 @@
+const max_barrio_zoom = 16;
+let editing = false;

sketch/html/index.html

@@ -1,10 +0,0 @@
-<!DOCTYPE html>
-<html>
-<title>Sketch HambiMap</title>
-<body>
-<h2>Sketch HambiMap</h2>
-	<a href="main_with_title.html">Sketch with a title area above the map</a>
-	<br/>
-	<a href="main_with_sidebar.html">Sketch where I moved all the stuff from the title area to a sidebar</a>
-</body>
-</html>

sketch/html/index.html

@@ -0,0 +1 @@
+main_with_sidebar.html

sketch/html/main_with_sidebar.html

@@ -70,96 +70,9 @@
 </script>
 <script src="leaflet/leaflet-sidebar-v2/js/leaflet-sidebar.js"></script>
 <script src="leaflet/Leaflet.SelectAreaFeature/src/Leaflet.SelectAreaFeature.js"></script>
-<script>
-const max_barrio_zoom = 16;
-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 active = false;
-       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 (active) {
-                editButton.className = editButton.className.replace("w3-blue", "w3-white");
-                editButton.title = title_inactive();
-                map.selectAreaFeature.disable();
-                active = false;
-            } else {
-                editButton.className = editButton.className.replace("w3-white", "w3-blue");
-                editButton.title = title_active;
-                map.selectAreaFeature.enable();
-                active = true;
-            }
-        }
-
-        return editButton;
-      },
-
-    onRemove: function(map) {
-        // Nothing to do here
-    }
-});
-
-L.control.editButton = function(opts) {
-    return new L.Control.EditButton(opts);
-}
-
-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)
-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
-function onMapMouseUp(e){}    //^^
-function onMapContextMenu(e){}//probably neat for something
-
-map.on('click', onMapClick);
-map.on('zoomend', onMapZoom);
-map.on('mousedown', onMapMouseDown);
-map.on('mouseup', onMapMouseUp);
-map.on('contextMenu', onMapContextMenu);
-
-
-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');
-
-</script>
+<script src="globals.js"></script>
+<script src="editButton.js"></script>
+<script src="app.js"></script>
 
 </body>
 </html>

sketch/html/main_with_title.html

@@ -174,6 +174,7 @@ map.on('zoom', onMapZoom);
 map.on('mousedown', onMapMouseDown);
 map.on('mouseup', onMapMouseUp);
 map.on('contextMenu', onMapContextMenu);
+L.DomUtil.toBack(map);
 </script>
 
 </body>

sketch/html/overview.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+<title>Sketch HambiMap</title>
+<body>
+<h2>Sketch HambiMap</h2>
+	<a href="main_with_title.html">Sketch with a title area above the map</a>
+	<br/>
+	<a href="main_with_sidebar.html">Sketch where I moved all the stuff from the title area to a sidebar</a>
+</body>
+</html>