Leaflet.label is plugin for adding labels to markers & shapes on leaflet powered maps.
NOTE: starting with Leaflet 1.0,
L.Labelis added to Leaflet core as
L.Tooltipand this plugin is deprecrated.
bindLabel,
openLabeland so should be replaced by
bindTooltip,
openTooltip, etc.
clickableis now named
interactive
noHideis now named
permanent
offsetis now [6, -6]
directionis now
auto
opacityis now
0.9
the CSS has been fully refactored
Bonus: L.Tooltip also works for paths: polygons, polylines, etc.
Bonus: new directions are supported:
top,
bottom,
center
Bonus: new option
stickywill make the label follow the mouse instead of being displayed at the feature center
Leaflet.label is plugin for adding labels to markers & shapes on leaflet powered maps.
Check out the demo.
If you want to just bind a label to marker that will show when the mouse is over it, it's really easy:
L.marker([-37.7772, 175.2606]).bindLabel('Look revealing label!').addTo(map);
Path overlays works the same:
L.polyline([ [-37.7612, 175.2756], [-37.7702, 175.2796], [-37.7802, 175.2750], ]).bindLabel('Even polylines can have labels.').addTo(map)
If you would prefer the label to be always visible set the
noHide: trueoption and call
showLabel()once added to the map:
L.marker([-37.785, 175.263]) .bindLabel('A sweet static label!', { noHide: true }) .addTo(map);
When you call
bindLabel()you can pass in an options object. These options are:
false
false
""
left|
right|
auto. The direction the label displays in relation to the marker.
autowill choose the optimal direction depending on the position of the marker. Default
right
markerPanewill be used for markers, and the
popupPanefor other objects.
labelAnchor. Default:
[12,-15]
1
true
E.g. To create a static label that automatically positions the label
var myIcon = L.icon({ iconUrl: 'my-icon.png', iconSize: [20, 20], iconAnchor: [10, 10], labelAnchor: [6, 0] // as I want the label to appear 2px past the icon (10 + 2 - 6) }); L.marker([-37.7772, 175.2606], { icon: myIcon }).bindLabel('My label', { noHide: true, direction: 'auto' });
The label is positioned relative to the L.Icon's
iconAnchoroption. To reposition the label set the
labelAnchoroption of your icon. By default
labelAnchoris set so the label will show vertically centered for the default icon (
L.Icon.Default).
E.g. Vertically center an icon with
iconAnchorset as the center of the icon:
var myIcon = L.icon({ iconUrl: 'my-icon.png', iconSize: [20, 20], iconAnchor: [10, 10], labelAnchor: [6, 0] // as I want the label to appear 2px past the icon (10 + 2 - 6) }); L.marker([-37.7772, 175.2606], { icon: myIcon }).bindLabel('Look revealing label!').addTo(map);
When positioning the label L.Label includes a 6px horizontal padding. you will need to take this into account when setting
labelAnchor.
You can set the opacity of a label by calling the
setOpacitymethod on
L.Marker. By default the opacity will either be 0 or 1.
// Sets opacity of marker to 0.3 and opacity of label to 1 markerLabel.setOpacity(0.3);// Sets opacity of marker to 0.3 and opacity of label to 0.3 markerLabel.setOpacity(0.3, true);
// Sets opacity of marker to 0 and opacity of label to 0 markerLabel.setOpacity(0); markerLabel.setOpacity(0, true);
// Sets opacity of marker to 1 and opacity of label to 1 markerLabel.setOpacity(1); markerLabel.setOpacity(1, true);
My previous label plugin is still available at https://github.com/jacobtoye/Leaflet.iconlabel. This plugin is a little harder to use, however if you want to have both the icon and label bound to the same event this plugin is for you.