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

Works with any recent version of Leaflet and IPGV&M.

Installation

Make sure you have the Leaflet module enabled.
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
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.

Leaflet Label

Issues

Will D10 version exist?ActiveCode Created 7 months ago

Will D10 version exist?
Active
Code
Created 7 months ago