EasyButton v1 Examples

Living here until it's stable.

Icon Options

L.easyButton accepts a range of options for icons

HTML icon

EasyButton will inject html into the button (+1 for no extra requirements) 


var htmlStar = L.map('html-star', {scrollWheelZoom: false}).setView([37.8, -96], 4);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(htmlStar);

L.easyButton( '<span class="star">&starf;</span>', function(){
  alert('you just clicked the html entity \&starf;');
}).addTo(htmlStar);
   
.star{
  font-size: 1.5em;
}

Font Awesome star icon

EasyButton recognizes a Font Awesome class name at the beginning of the string and builds the icon.
You'll have to be including Font Awesome for this one. 


var faStar = L.map('fa-star', {scrollWheelZoom: false}).setView([37.8, -96], 4);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(faStar);

L.easyButton( 'fa-star', function(){
  alert('you just clicked a font awesome icon');
}).addTo(faStar);

Glyphicon star icon

EasyButton also recognizes Glyphicons class names! (Included with Twitter Bootstrap)
You'll have to be including either Bootstrap or Glyphicons 


var glyphStar = L.map('glyph-star', {scrollWheelZoom: false}).setView([37.8, -96], 4);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(glyphStar);

L.easyButton( 'glyphicon-star', function(){
  alert('you just clicked a glyphicon');
}).addTo(glyphStar);

Other Icon Fonts

EasyButton will still work, you'll probably just need to spefify an extra class name or two

for ionicons , it would be: 

L.easyButton( 'icon ion-home', function(){
  alert('you just clicked an ionicon');
});

for Google's material icons, it would be: 

L.easyButton( '<i class="material-icons">face</i>', function(){
  alert('you just clicked a material icon');
});

Clicks

Simple Clicks

specify your icon & function; it'll do the rest 


var zoomTo = L.map('zoomto', {scrollWheelZoom: false}).setView([37.8, -96], 4);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(zoomTo);

L.easyButton( 'fa-gbp', function(){
  zoomTo.setView([55, -2], 4);
}).addTo(zoomTo);

L.easyButton( 'fa-jpy', function(){
  zoomTo.setView([38, 139], 4);
}).addTo(zoomTo);

L.easyButton( 'fa-usd', function(){
  zoomTo.setView([37.8, -96], 3);
}).addTo(zoomTo);

In the Functions

since the click likely isn't referring to the element itself, this & arguments[0] both refer to the control, and arguments[1] refers to the map it's added to. 


var otherClicks = L.map('other-clicks', {scrollWheelZoom: false}).setView([37.8, -96], 4);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(otherClicks);

L.easyButton( '<strong>1</strong>', function(){
  this.disable();
}).addTo(otherClicks);

L.easyButton( '<strong>A</strong>', function(controlArg, mapArg){
  console.log(controlArg._map == mapArg);
}).addTo(otherClicks);

States

You've seen this above:

L.easyButton( '<span class="star">&starf;</span>', function(){
  alert('you just clicked the html entity \&starf;');
})

That's shorthand for defining a single state like so:


L.easyButton({
  states:[
    {
      icon: '<span class="star">&starf;</span>',
      onClick: function(){ alert('you just clicked the html entity \&starf;'); }
    }
  ]
});

Changing States

you can define two states to do toggle operations:

be sure to change the state inside your onClick function.

Tip: inside your onClick function, both this and the first param refer to the control. 


var scatteredMarkerMap = L.map('toggle-map', {scrollWheelZoom: false}).setView([37.8, -96], 4);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(scatteredMarkerMap);

var markerGroup = L.layerGroup([
      L.marker([37.8, -91]), L.marker([38.8, -86]), L.marker([47.8, -106]),
      L.marker([31.8, -90]), L.marker([39.8, -96]), L.marker([33.8, -100]) ]);

var toggle = L.easyButton({
  states: [{
    stateName: 'add-markers',
    icon: 'fa-map-marker',
    title: 'add random markers',
    onClick: function(control) {
      scatteredMarkerMap.addLayer(markerGroup);
      control.state('remove-markers');
    }
  }, {
    icon: 'fa-undo',
    stateName: 'remove-markers',
    onClick: function(control) {
      scatteredMarkerMap.removeLayer(markerGroup);
      control.state('add-markers');
    },
    title: 'remove markers'
  }]
});
toggle.addTo(scatteredMarkerMap);

Many States

var findMeMap = L.map('changing-icons', {scrollWheelZoom: false})
                  .setView([37.8, -96], 4);

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')
  .addTo(findMeMap);

L.easyButton({
  states:[
    {
      stateName: 'unloaded',
      icon: 'fa-location-arrow',
      title: 'load image',
      onClick: function(control){
        control.state("loading");
        control._map.on('locationfound', function(e){
          this.setView(e.latlng, 17);
          control.state('loaded');
        });
        control._map.on('locationerror', function(){
          control.state('error');
        });
        control._map.locate()
      }
    }, {
      stateName: 'loading',
      icon: 'fa-spinner fa-spin'
    }, {
      stateName: 'loaded',
      icon: 'fa-thumbs-up'
    }, {
      stateName: 'error',
      icon: 'fa-frown-o',
      title: 'location not found'
    }
  ]
}).addTo(findMeMap);

Animating States

useful options:

Animated Toggle

animate leaves all the elements around so that you can specify animations yourself 


var animatedToggleMap = L.map('animate-icons', {scrollWheelZoom: false}).setView([37.8, -96], 4);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(animatedToggleMap);

var randomMarkers = L.layerGroup([
      L.marker([37.8, -110]), L.marker([38.8, -86]), L.marker([47.8, -106]),
      L.marker([31.8, -120]), L.marker([39.8, -96]), L.marker([33.8, -100]) ]);

var animatedToggle = L.easyButton({
  id: 'animated-marker-toggle',
  type: 'animate',
  states: [{
    stateName: 'add-markers',
    icon: 'fa-map-marker',
    title: 'add some markers',
    onClick: function(control) {
      animatedToggleMap.addLayer(randomMarkers);
      control.state('remove-markers');
    }
  }, {
    stateName: 'remove-markers',
    title: 'remove markers',
    icon: 'fa-undo',
    onClick: function(control) {
      animatedToggleMap.removeLayer(randomMarkers);
      control.state('add-markers');
    }
  }]
});
animatedToggle.addTo(animatedToggleMap);
   

.state-remove-markers,
.state-add-markers{
  transition-duration: .5s;
  transform: scaleY(0);
  position: absolute;
  display: block;
  top: 0;
  width: 100%;}

.state-remove-markers{
  transform-origin: 50% 0; }
.state-add-markers{
  transform-origin: 50% 100%; }

.state-remove-markers.remove-markers-active{
  transform: scaleY(1); }

.state-add-markers.add-markers-active{
  transform: scaleY(1); }

Disabling Buttons

your easyButton comes with a disable method that adds a disabled class. Style that class as you'd like for the effect you want

Simple Disable

your easyButton comes with a disable method that adds a disabled class. Style that class as you'd like for the effect you want


var coffeeShopMap = L.map('disable-example', {scrollWheelZoom: false})
coffeeShopMap.setView({lat:37.45, lng:-122.17}, 14);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(coffeeShopMap);


var findCoffee = L.easyButton( 'fa-coffee', function(control){
  alert('"expensive query here"');
});
findCoffee.addTo(coffeeShopMap);

coffeeShopMap.on('zoomend', function(e){
  if(e.target.getZoom() > 13){
    findCoffee.enable();
  } else {
    findCoffee.disable();
  }
});

Fancier Disable

Here's a screen-reader friendly zoom control.

The images are passed as data uris; save those requests for tiles! 

var userDefinedZoomMap = L.map('zoom', {zoomControl: false, scrollWheelZoom: false});
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(userDefinedZoomMap);

// listeners for disabling buttons
userDefinedZoomMap.on('zoomend',function(e){

  var map = e.target,
      max = map.getMaxZoom(),
      min = map.getMinZoom(),
      current = map.getZoom();

  if( current < max ){
    zoomIn.enable() }
  if( current >= max ){
    zoomIn.disable() }
  if( current > min ){
    zoomOut.enable() }
  if( current <= min ){
    zoomOut.disable() }

});

var plusUri = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wYJFTodgbZtSwAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAABoSURBVEjHY2AYBaNg2AJmMvQkMTAwGDAwMHAzMDA8JlYTIxkW/SdHPxO9gm7kWWQNjRNkjB5fMPyXgYEhg1yL1Eh0tCm5FpGSKr/jUz+avOlq0Xco/Y8UTSxkWLQCGk+nR6uKUTC4AQC8oBHyYLAfhwAAAABJRU5ErkJggg=='
var minusUri = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wYJFgAjZzgQwAAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAvSURBVEjHY2AYBaNgFIyCUcDAwMAQzsDA8J8InIPPECZ6uZZpNMJGwSgYBSMAAADZ/wm/p4Wt3gAAAABJRU5ErkJggg=='
var zoomIn = L.easyButton('<img class="zoom-in zoom-btn" src="'+ plusUri +'" alt="zoom in"/>',
                          function(control, map){map.setZoom(map.getZoom()+1);});
var zoomOut = L.easyButton('<img class="zoom-out zoom-btn" src="' + minusUri + '" alt="zoom in"/>',
                           function(control, map){map.setZoom(map.getZoom()-1);});
    var zoomBar = L.easyBar([ zoomIn, zoomOut, ]);

zoomBar.addTo(userDefinedZoomMap);
userDefinedZoomMap.setView({lat:50, lng:0}, 2); 
#zoom .easy-button-button{
  transition-duration: .3s;
  position: relative;
  border-radius: 4px;
  border: solid 0px transparent; }

#zoom .easy-button-container{
  background-color: white;}

#zoom .zoom-btn{
  position: absolute;
  top: 0;
  left: 0;}

#zoom .easy-button-button.disabled {
  height: 0;}