Posted on

Creating custom control button in leaflet

custom control button

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



We should start with extending the original class:



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



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