gandalf/HambiMap
1
0
Fork 0
Code Issues 2 Pull requests Packages Projects Releases Wiki Activity

draw barrios

Browse source 
todo: don't draw, only click for treehouses
This commit is contained in:
Gandalf 2023-08-13 17:26:38 +02:00
parent 6635036974
commit 0b52b51d45
2 changed files with 54 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
sketch/html/app.js
View file

@ -26,8 +26,17 @@ function onMapZoom(e){ //for deciding wether to show barrios or treehouses
map.removeLayer(barrio_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 onMapMouseDown(e){} //probably needed for Barrio creation -> nope.
function onMapMouseUp(e){ function onMapMouseUp(e){
console.log(e);
if (editing && (map.getZoom() <= max_barrio_zoom)) { if (editing && (map.getZoom() <= max_barrio_zoom)) {
// use selectfeature.getAreaLatLng() to fill in hidden fields of the form // use selectfeature.getAreaLatLng() to fill in hidden fields of the form
// add a new panel // add a new panel
@ -39,6 +48,9 @@ function onMapMouseUp(e){
}; };
sidebar.addPanel(panelContent); sidebar.addPanel(panelContent);
sidebar.open('barrio_form'); 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 function onMapContextMenu(e){}//probably neat for something
@ -50,7 +62,14 @@ var sidebar = L.control.sidebar({
map.on('click', onMapClick); map.on('click', onMapClick);
map.on('zoomend', onMapZoom); map.on('zoomend', onMapZoom);
map.on('mousedown', onMapMouseDown); 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); 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();
});

67
sketch/html/editButton.js
View file

@ -1,40 +1,47 @@
L.Control.EditButton = L.Control.extend({ 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) { 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"; if (editing) {
let title_inactive_treehouse = 'Add a treehouse in the current map area'; map.selectAreaFeature.disable();
let title_inactive_barrio = 'Add a barrio in the current map area'; // editing = false; // /should/ be redundand
let title_active = 'Disable edit mode to drag the map'; } else {
title_inactive = function(){ map.selectAreaFeature.enable();
let zoom = map.getZoom(); // editing = true; // /should/ be redundand
if (zoom <= max_barrio_zoom) return title_inactive_barrio; }
// if (layer == 'treehouse') // uncomment if you ever introduce another layer or default value // this.toggle_style(); // /should/ be redundand
return title_inactive_treehouse;
}; };
editButton.innerHTML = 'edit'; return this.editButton;
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) { onRemove: function(map) {