Skip to content

Instantly share code, notes, and snippets.

@mzur
Last active October 10, 2021 16:03
Show Gist options
  • Save mzur/a86169f5a3e6499a2639 to your computer and use it in GitHub Desktop.
Save mzur/a86169f5a3e6499a2639 to your computer and use it in GitHub Desktop.
Simple custom Leaflet Control button.
// from https://gist.github.com/emtiu/6098482
// Usage:
// var someButton = new L.Control.Button(options).addTo(map);
// This calls OnAdd(). See the code for what options are required
// The third parameter passed to L.DomEvent.addListener is the 'this' context
// to use in the callback (second parameter).
L.Control.Button = L.Control.extend({
options: {
position: 'topleft'
},
initialize: function (options) {
this._button = {};
this.setButton(options);
},
onAdd: function (map) {
this._map = map;
this._container = L.DomUtil.create('div', 'leaflet-control-button leaflet-bar');
this._update();
return this._container;
},
onRemove: function (map) {
this._button = {};
this._update();
},
setButton: function (options) {
var button = {
'class': options.class,
'text': options.text,
'onClick': options.onClick,
'title': options.title
};
this._button = button;
this._update();
},
_update: function () {
if (!this._map) {
return;
}
this._container.innerHTML = '';
this._makeButton(this._button);
},
_makeButton: function (button) {
var newButton = L.DomUtil.create('a', 'leaflet-buttons-control-button '+button.class, this._container);
newButton.href = '#';
newButton.innerHTML = button.text;
newButton.title = button.title;
onClick = function(event) {
button.onClick(event, newButton);
};
L.DomEvent
.addListener(newButton, 'click', onClick, this);
return newButton;// from https://gist.github.com/emtiu/6098482
// Usage:
// var someButton = new L.Control.Button(options).addTo(map);
// This calls OnAdd(). See the code for what options are required
// The third parameter passed to L.DomEvent.addListener is the 'this' context
// to use in the callback (second parameter).
L.Control.Button = L.Control.extend({
options: {
position: 'topleft'
},
initialize: function (options) {
this._button = {};
this.setButton(options);
},
onAdd: function (map) {
this._map = map;
this._container = L.DomUtil.create('div', 'leaflet-control-button leaflet-bar');
this._update();
return this._container;
},
onRemove: function (map) {
this._button = {};
this._update();
},
setButton: function (options) {
var button = {
'class': options.class,
'text': options.text,
'onClick': options.onClick,
'title': options.title
};
this._button = button;
this._update();
},
_update: function () {
if (!this._map) {
return;
}
this._container.innerHTML = '';
this._makeButton(this._button);
},
_makeButton: function (button) {
var newButton = L.DomUtil.create('a', 'leaflet-buttons-control-button '+button.class, this._container);
newButton.href = '#';
newButton.innerHTML = button.text;
newButton.title = button.title;
onClick = function(event) {
button.onClick(event, newButton);
};
L.DomEvent.addListener(newButton, 'click', onClick, this);
return newButton;
}
});
}
});
@bettse
Copy link

bettse commented Jul 19, 2016

I think you're missing L.setOptions(this, options); in the initialize, or other position values don't seem to take effect

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