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);
}