Skip to content

Instantly share code, notes, and snippets.

@ejh
Created June 15, 2012 08:11
Show Gist options
  • Save ejh/2935327 to your computer and use it in GitHub Desktop.
Save ejh/2935327 to your computer and use it in GitHub Desktop.
Leaflet control button example
L.Control.Button = L.Control.extend({
options: {
position: 'bottomleft'
},
initialize: function (options) {
this._button = {};
this.setButton(options);
},
onAdd: function (map) {
this._map = map;
var container = L.DomUtil.create('div', 'leaflet-control-button');
this._container = container;
this._update();
return this._container;
},
onRemove: function (map) {
},
setButton: function (options) {
var button = {
'text': options.text, //string
'iconUrl': options.iconUrl, //string
'onClick': options.onClick, //callback function
'hideText': !!options.hideText, //forced bool
'maxWidth': options.maxWidth || 70, //number
'doToggle': options.toggle, //bool
'toggleStatus': false //bool
};
this._button = button;
this._update();
},
getText: function () {
return this._button.text;
},
getIconUrl: function () {
return this._button.iconUrl;
},
destroy: function () {
this._button = {};
this._update();
},
toggle: function (e) {
if(typeof e === 'boolean'){
this._button.toggleStatus = e;
}
else{
this._button.toggleStatus = !this._button.toggleStatus;
}
this._update();
},
_update: function () {
if (!this._map) {
return;
}
this._container.innerHTML = '';
this._makeButton(this._button);
},
_makeButton: function (button) {
var newButton = L.DomUtil.create('div', 'leaflet-buttons-control-button', this._container);
if(button.toggleStatus)
L.DomUtil.addClass(newButton,'leaflet-buttons-control-toggleon');
var image = L.DomUtil.create('img', 'leaflet-buttons-control-img', newButton);
image.setAttribute('src',button.iconUrl);
if(button.text !== ''){
L.DomUtil.create('br','',newButton); //there must be a better way
var span = L.DomUtil.create('span', 'leaflet-buttons-control-text', newButton);
var text = document.createTextNode(button.text); //is there an L.DomUtil for this?
span.appendChild(text);
if(button.hideText)
L.DomUtil.addClass(span,'leaflet-buttons-control-text-hide');
}
L.DomEvent
.addListener(newButton, 'click', L.DomEvent.stop)
.addListener(newButton, 'click', button.onClick,this)
.addListener(newButton, 'click', this._clicked,this);
L.DomEvent.disableClickPropagation(newButton);
return newButton;
},
_clicked: function () { //'this' refers to button
if(this._button.doToggle){
if(this._button.toggleStatus) { //currently true, remove class
L.DomUtil.removeClass(this._container.childNodes[0],'leaflet-buttons-control-toggleon');
}
else{
L.DomUtil.addClass(this._container.childNodes[0],'leaflet-buttons-control-toggleon');
}
this.toggle();
}
return;
}
});
@niconil
Copy link

niconil commented Nov 18, 2014

if i put a 150 px width image, the button is 150 px wide
it seems to not take account of maxWidth option

i use leaflet 0.7.3

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment