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;
}
});
@geomajor56
Copy link

I'm a javascript newb and I haven’t a clue how to implement this. Any chance you could send an example my way?
Am I close?

myButton = L.Control.Button({
options:{
'text':'My Button',
'onClick':zoomFull
}
})

@pegahakhavan
Copy link

I dont know how to implement this code. would you mind send an example or demo? thank you, Gist

@Xennis
Copy link

Xennis commented Apr 1, 2014

Example usage:

var myButtonOptions = {
      'text': 'MyButton',  // string
      'iconUrl': 'images/myButton.png',  // string
      'onClick': my_button_onClick,  // callback function
      'hideText': true,  // bool
      'maxWidth': 30,  // number
      'doToggle': false,  // bool
      'toggleStatus': false  // bool
}   

var myButton = new L.Control.Button(myButtonOptions).addTo(map);
function my_button_onClick() {
    console.log("someone clicked my button");
}

@ezsi
Copy link

ezsi commented Aug 6, 2014

I think at line 31

'doToggle': options.toggle, 

should be

'doToggle': options.doToggle,

@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