Leaflet/ Leaflet.label

JavaScript

CSS

HTML

Need help with Leaflet.label?

Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

Leaflet

443 Stars

221 Forks

MIT License

167 Commits

55 Opened issues

Description

Leaflet.label is plugin for adding labels to markers & shapes on leaflet powered maps.

Services available

Need anything else?

Contributors list

Readme

Leaflet.label

Name: Leaflet.label
Brand: Leaflet.label
SKU: //Leaflet/Leaflet.label
Rating: 2.8575 (443 reviews)

NOTE: starting with Leaflet 1.0,

L.Label

is added to Leaflet core as
L.Tooltip
and this plugin is deprecrated.

Upgrade path to L.Tooltip

bindLabel

openLabel

and so should be replaced by

bindTooltip

openTooltip

, etc.

option
```
clickable
```
is now named
```
interactive
```
option
```
noHide
```
is now named
```
permanent
```
default
```
offset
```
is now [6, -6]
default
```
direction
```
is now
```
auto
```
default
```
opacity
```
is 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
```
sticky
```
will 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.

Usage examples

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: true

option and call

showLabel()

once added to the map:

L.marker([-37.785, 175.263])
    .bindLabel('A sweet static label!', { noHide: true })
    .addTo(map);

Options

When you call

bindLabel()

you can pass in an options object. These options are:

clickable: Whether or not the label is clickable. Default:
```
false
```
noHide: Doesn't attach event handler for showing/hiding the label on mouseover/out. Default:
```
false
```
className: The css class to add to the label element. Default
```
""
```
direction: One of
```
left
```
|
```
right
```
|
```
auto
```
. The direction the label displays in relation to the marker.
```
auto
```
will choose the optimal direction depending on the position of the marker. Default
```
right
```
pane: Which map pane to put the label into. By default, the
```
markerPane
```
will be used for markers, and the
```
popupPane
```
for other objects.
offset: Position offset from the marker icon's
```
labelAnchor
```
. Default:
```
[12,-15]
```
opacity: Opacity of the label. Default:
```
1
```
zoomAnimation: Whether or Leaflet should use zoom animation on the label. Default:
```
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'
});

Positioning the label for custom icons

The label is positioned relative to the L.Icon's

iconAnchor

option. To reposition the label set the

labelAnchor

option of your icon. By default

labelAnchor

is set so the label will show vertically centered for the default icon (

L.Icon.Default

E.g. Vertically center an icon with

iconAnchor

set 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

Setting the opacity of a label

You can set the opacity of a label by calling the

setOpacity

method 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);

Alternative label plugin

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.