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.

 

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/.

Posted on

Text labels in leaflet

Labels are fundamental part of cartography but when it comes to web map APIs, it’s not always easy to handle them. In leaflet we can use L.divIcon class and set “html” parameter.

This divIcon could be then assigned to marker this way:

 

Styling this label could be done

a) by specifying the className parameter:

 

and then the css rule, for example:

 

or b) by defining inline style in html  parameter

 

In case we want to use annotation for more object, we can write a function

and call it this way:

 

A working example:

See the Pen Labels in leaflet by Eidam (@eidam61) on CodePen.


Another way is to use an existing plugin, for example https://github.com/Leaflet/Leaflet.label