diff --git a/sketch/html/app.js b/sketch/html/app.js
index 999fc0f..5364b1d 100644
--- a/sketch/html/app.js
+++ b/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();
+});
diff --git a/sketch/html/editButton.js b/sketch/html/editButton.js
index b918f57..b52e193 100644
--- a/sketch/html/editButton.js
+++ b/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';
- // 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(){
+ this.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) {