https://github.com/CliffCloud/Leaflet.EasyButton
leaflet control buttons with icons and callbacks
https://github.com/CliffCloud/Leaflet.EasyButton
buttons javascript leaflet map
Last synced: about 1 month ago
JSON representation
leaflet control buttons with icons and callbacks
- Host: GitHub
- URL: https://github.com/CliffCloud/Leaflet.EasyButton
- Owner: CliffCloud
- License: mit
- Created: 2014-05-13T02:05:25.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2024-02-22T12:44:05.000Z (over 1 year ago)
- Last Synced: 2025-04-27T19:06:23.873Z (about 1 month ago)
- Topics: buttons, javascript, leaflet, map
- Language: JavaScript
- Homepage: http://cliffcloud.github.io/Leaflet.EasyButton/v1/
- Size: 4.03 MB
- Stars: 534
- Watchers: 14
- Forks: 123
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# L.EasyButton
The easiest way to add buttons with Leaflet — so simple it fits in a gif:
### More [running examples and docs](http://danielmontague.com/projects/easyButton.js/v2/examples/)
-----------------------------------------------------------------------------------
## Boilerplate Examples
These use `YOUR_LEAFLET_MAP` as a placeholder;
remember to change it to the variable name of your map.
##### Hello World
open a popup
```javascript
var helloPopup = L.popup().setContent('Hello World!');
L.easyButton('fa-globe', function(btn, map){
helloPopup.setLatLng(map.getCenter()).openOn(map);
}).addTo( YOUR_LEAFLET_MAP );
```
##### Map State
set the map's center and use an `img` for the icon
```javascript
L.easyButton('
', function(btn, map){
var antarctica = [-77,70];
map.setView(antarctica);
}).addTo( YOUR_LEAFLET_MAP );
```
##### Button States
change the button's function and appearance
```javascript
var stateChangingButton = L.easyButton({
states: [{
stateName: 'zoom-to-forest', // name the state
icon: 'fa-tree', // and define its properties
title: 'zoom to a forest', // like its title
onClick: function(btn, map) { // and its callback
map.setView([46.25,-121.8],10);
btn.state('zoom-to-school'); // change state on click!
}
}, {
stateName: 'zoom-to-school',
icon: 'fa-university',
title: 'zoom to a school',
onClick: function(btn, map) {
map.setView([42.3748204,-71.1161913],16);
btn.state('zoom-to-forest');
}
}]
});
stateChangingButton.addTo( YOUR_LEAFLET_MAP );
```
-----------------------------------------------------------------------------------
## Download/Install
EasyButton version `2.x.x` and up expect Leaflet `1.x.x` or higher;
for Leaflet `0.7.x` use EasyButton `1.3.x`.
### jsDelivr
```
```
### NPM
```
npm install --save leaflet-easybutton
```
### Bower
```
bower install --save Leaflet.EasyButton
```
### Icon Dependencies
If you haven't already, make sure to install/include the icon library of your
choice (your lib should have its own instructions)
— EasyButton should work with anything!