Leaflet Label in action on polygons and markers

Provides a light-weight alternative to marker popups for Leaflet maps using labels, provided by the Leaflet Label javascript plugin.

This module is especially useful when you want to display the equivalent of tooltips (mouse-over labels) for line-strings and polygons (bordered areas). Standard tooltips for markers may already be supported depending on the module you use to drive your Leaflet maps. However you need this module if you want hover-over labels for polygons and line-strings, or if you want to style an alternative look and feel.

Compatibility

Version 7.x-1.0 of this module works with any version of Leaflet.

Installation

  1. Make sure you have the Leaflet module enabled.
  2. Download the Leaflet Label zip from https://github.com/Leaflet/Leaflet.label. Unzip it in your libraries folder, renamed to leaflet_label. The path to the .js file should be sites/all/libraries/leaflet_label/dist/leaflet.label.js
  3. When using the Leaflet Views submodule, select a Title field from the drop-down. This field will now be rendered as a label. Similarly, when using IPGV&M, select a tooltip field to be rendered as a label.

Styling

Marker labels will have the leaflet-label-marker CSS class assigned, while polygons and linestrings get leaflet-label-other. Here's an example that changes the look of your Leaflet Labels on markers only, giving them a yellow background similar to normal tooltips:

.leaflet-label-marker {
  background-color: #fefdcb;
  border: 3px solid black;
  border-radius: 0;
  color: black;
  font-weight: 500;
  opacity: 1;
  padding: 3px;
}

Credits

This module was sponsored by Marzee Labs.

Supporting organizations: 
Original code for Leaflet 7.x-1.0
Compatibility with Leaflet 7.x-1.1+. Added styling options.

Project Information

Downloads