Leaflet module
Advanced Drupal integration with the Leaflet JS mapping library.
A Modern, Lightweight Open-Source JavaScript Library for Interactive Web Mapping.
Drupal Community documentation (WIP)
General Information
Leaflet module provides integration with Leaflet JS library. It is dependent on the Drupal Geofield Module.
Requirements
The Leaflet module requires the Geofield module.
Featured options and functionalities.
- Easy to use API for extended Leaflet Map definition & customisation;
- Leaflet Default Widget, with advanced integration with Leaflet-Geoman plugin for creating and editing Points and Geometries (Linestring, Polygon) Layers;
- Leaflet Tooltips and Popups;
- Leaflet Multi Maps Base Layers Control;
- Leaflet Overlays Control via Drupal Views Grouping;
- Dynamic Markers Icons and Paths/Geometries Styling, with tokens and replacement patterns
- Markerclustering,via Leaflet.markercluster plugin;
- Leaflet Gesture handling, via Leaflet.GestureHandling plugin;
- Reset Map View Control via Leaflet.ResetView plugin;
- Fullscreen Control, via Leaflet.Control.FullScreen plugin;
- User Location Control, via Leaflet.Locate plugin;
- Feature Additional Properties settings for advanced / dynamic customisation of Leaflet Map and Features rendering logics;
- Address Search Geocoding with Autocomplete integration (requires Geocoder module);
- Token and Replacement Patterns in Leaflet components settings;
- Multiple Leaflet maps (mixed of Leaflet Formatters, Views and Widgets) on the same page;
- Drupal hooks for altering and interacting with its functionalities;
- etc. ...
Installation and Use
-
Require/Download the Leaflet module using Composer, which is simply running the following command from your project package root (where the main composer.json file is situated):
composer require drupal/leafletwhich will also download the required Geofield Module dependency and GeoPHP library.
-
Enable the Leaflet module to be able to use Leaflet Map Geofield Widget and Leaflet Map Geofield Formatter;
-
Enable Leaflet Views (leaflet_views) submodule for Leaflet Map Views integration. You need to add at least one geofield to the Fields list, and select the Leaflet Map style in the Display Format;
-
Enable Leaflet Markercluster (leaflet_markercluster) submodule for Leaflet Markercluster Js plugin functionalities, both in the Leaflet Map Formatter and Leaflet Map View;
-
Add/enable and configure the Geoocoder module to implement Geocoding Control(with Autocomplete) for Leaflet Map Address search, in Leaflet Map Widget, Formatter and View;
API Usage
Rendering a Leaflet map programmatically is as simple as instantiating the LeafletService and its leafletRenderMap method:
\Drupal::service('leaflet.service')->leafletRenderMap($map, $features, $height)which expects 3 parameters:
-
$map: An associative array defining a map. See hook_leaflet_map_info(). The module defines a default map with a OpenStreet Maps base layer.
-
$features: This is an associative array of all the Leaflet features you want to plot on the map. A feature can be a point, linestring, polygon, multipolygon, multipolygon, or json object. Additionally, features can be grouped into Leaflet layer groups, so they can be controlled together,
-
$height: The map height, expressed in css units.
Tips & Tricks
-
Bind events on geojson (json) features
@see: https://www.drupal.org/project/leaflet/issues/3186029
$features[] = [
'type' => 'json',
'json' => $geojson,
'events' => [
'click' => 'Drupal.manageGeojsonClick', // or whatever callback
],
];
$this->leaflet->leafletRenderMap($map_info, $features, $height),