48 lines
1.7 KiB
JavaScript
48 lines
1.7 KiB
JavaScript
|
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);
|
||
|
|
}
|