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