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) {
        let ts = this;
       this.editButton = L.DomUtil.create('button', 'w3-button w3-white w3-hover-light-blue w3-small leaflet-bar');

       this.editButton.innerHTML = 'edit';
       this.editButton.title = this.title.inactive();

        this.editButton.onclick = function(){
            let zoom = map.getZoom();
            if (editing) {
                map.selectAreaFeature.disable();
                editing = false;
            } else {
                if(!document.getElementById('barrio_form') && zoom <= max_barrio_zoom) map.selectAreaFeature.enable();
                editing = true;
            }
            ts.toggle_style();
        };

        return this.editButton;
      },

    onRemove: function(map) {
        // Nothing to do here
    }
});

L.control.editButton = function(opts) {
    return new L.Control.EditButton(opts);
}