Feb
20
2015
by eidam

Creating custom control button in leaflet

In this post, I would like to shortly describe how to easily create, style and use self-defined control button.

 

L.Control.extend

We should start with extending the original class:

 

onAdd

onAdd method should be now filled with definition of div, its styling and event handlers. For example:

 

map.addControl

Initialization is done by addControl method called on map object:

 

Working example:

See the Pen Leaflet custom control by Eidam (@eidam61) on CodePen.

Also,  I should mention that we can use existing plugins. For example http://cliffcloud.github.io/Leaflet.EasyButton/.