EasyButton.js

boiled down controls for leaflet maps. It just needs a <string> and a <callback>.

Leaflet has great documentation & a simple api with some tutorials to boot; they’ll get you running quickly.

But they dropped the ball on controls. This sums up Leaflet’s current control situation and why a plugin this plugin’s here — if you already know know why already or if you don’t need controls, buckle up, because this is about to be super boring.

controls or buttons

Leaflet has “controls” that were designed for controlling the map. EasyButton’s “buttons” do whatever, including controlling the map.

Leaflet’s great

Here’s the initialization of a working Leaflet map.

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

plenty simple.

Leaflet’s frustrating

Leaflet’s suggestion for making a control — content’s not important.

 var MyControl = L.Control.extend({
     options: {
         position: 'topright'
     },

     onAdd: function (map) {
         // create the control container with a particular class name
         var container = L.DomUtil.create('div', 'my-custom-control');

         // ... initialize other DOM elements, add listeners, etc.

         return container;
     }
 });

 map.addControl(new MyControl());

If [you] specify your own constructor for the control, you’ll also probably want to process options properly:

 var MyControl = L.Control.extend({
     initialize: function (foo, options) {
         // ...
         L.Util.setOptions(this, options);
     },
     // ...
 });

This will allow you to pass options like position when creating the control instances:

 map.addControl(new MyControl('bar', {position: 'bottomleft'}));

Hefty, compared to a full map.

The Leaflet control

Working from leaflet’s demo above, you’d have a button that… does nothing? Not just that, you aren’t even shown relevant parts of the working buttons in Leaflet’s source.

But hey, you can pass options to it!

An Easy Button

That’s why Leaflet.EasyButton’s around. Here’s the code for a button:

L.easyButton('fa-star', function(){alert('button works')}).addTo(map);

Etc

Most (every?) other part of Leaflet can be brought into working condition with arguments to the constructor or a subsequent method.

L.someLeafletFeature(some,args).addTo(someLeafletObject);
// or
someLeafletObject
  .aFeatureOfThatObject(updateAccordingly)
  .someSortOfAddToFunction(L.someLeafletFeature(some,args,toMakeItWork));

that idea works everywhere: custom icons, pop-ups, image-overlays, even custom layer-controls. But basic controls/buttons slipped through the cracks. This should, and likely will, become a part of a future Leaflet — so that kind of makes this a polyfill, with frills …a polyfrill.