draw barrios

todo: don't draw, only click for treehouses

sketch/html/app.js

@@ -26,8 +26,17 @@ function onMapZoom(e){       //for deciding wether to show barrios or treehouses
 				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
@@ -39,6 +48,9 @@ function onMapMouseUp(e){
         };
         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
@@ -50,7 +62,14 @@ var sidebar = L.control.sidebar({
 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('drawend', 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');});
+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();
+});
 

sketch/html/editButton.js

@@ -1,40 +1,47 @@
+
 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) {
-        var editButton = L.DomUtil.create('button', 'w3-button w3-white w3-hover-light-blue w3-small leaflet-bar');
+       this.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');
+       this.editButton.innerHTML = 'edit';
+       this.editButton.title = this.title.inactive();
 
-       // editButton.style.backgroundColor = 'white';
+        this.editButton.onclick = function(){
-       // 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;
+            //    editing = false;  // /should/ be redundand
             } else {
-                editButton.className = editButton.className.replace("w3-white", "w3-blue");
-                editButton.title = title_active;
                 map.selectAreaFeature.enable();
-                editing = true;
+           //     editing = true; // /should/ be redundand
             }
-        }
+          //  this.toggle_style(); // /should/ be redundand
+        };
 
-        return editButton;
+        return this.editButton;
       },
 
     onRemove: function(map) {