Last updated 12 September 2016. Created on 18 June 2012.
Edited by dbt102, RdeBoer, apperceptions, HongPong. Log in to edit this page.

The Drupal 7 Leaflet module provides integration with Leaflet, the modern open-source JavaScript library for mobile-friendly interactive maps.

Leaflet currently offers:

  • Field formatter that can show a map for fields that contain geospatial data
  • Views integration that plots data on a map (using the sub module Leaflet Views)
  • API for displaying data on a map

Required & recommended modules

  • Libraries, cTools and Entity are required for installing Leaflet and Leaflet Views.
  • Geofield is the preferred module for storing geo data in a field.
  • Addressfield & Geocoder make a nice combination for storing street address information in separate fields and automatically turning this into the geo data.
  • Views allows creating lists of data that can be plotted on a Leaflet map.
  • Token provides replacement tokens that may be used to customize the Popup text in the field formatter settings.

Installation

  1. Install and enable Leaflet and its required modules in the usual way. Learn more about installing Drupal modules.
  2. Download the latest stable Leaflet JavaScript library (e.g. 0.7.5 at the time of writing) and place it in sites/all/libraries, changing the folder name to leaflet.

The Leaflet module will look for sites/all/libraries/leaflet/leaflet.js. Likewise, the file leaflet.css and images folder included in the distribution should sit next to leaflet.js.

Older versions expected an extra dist directory, i.e. sites/all/libraries/leaflet/dist/leaflet.js. This has been deprecated in line with the Leaflet JS directory structure, so if you're upgrading from a very old version of the library delete your existing sites/all/libraries/leaflet folder.

Configure

You need fields that contain geo spatial data in your website to be able to display a Leaflet map.

Show Leaflet map on a webpage

Leaflet includes a field formatter that makes it possible to show geospatial data (e.g., longitude and latitude) on a map.
To enable the map:
1. Select "Manage display" for the desired entity (node, user, taxonomy term, etc)
2. In the select list "Format" of the field that contains the geo data, choose "Leaflet"
3. Click the cog wheel on the right for more configuration options (such as map type, width, icon)
4. Click "Update" to save the settings
5. Click "Save"

Using Tokens for Popup Text

You can use tokens instead of static text for Popups that use the Leaflet field formatter.
1. Download and enable Token module.
2. Access the Leaflet field formatter settings by navigating to the display settings on the content type where you have added a Geofield that uses the Leaflet format and click on the gear icon.
3. Expand the Popup Settings fieldset.
4. Expand the Tokens fieldset.
5. Choose one or more tokens from the list inside the expanded Tokens fieldset and copy/paste them into the Popup Text field inside the expanded Popup fieldset. For example, to use the node's title as Popup Text, copy/paste in [node:title] into the Popup Text field.
6. Click the Update button.
7. Click the Save button.
8. To test, access a node of this content type that has data in the Geofield and displays as a Leaflet map and click on the marker to show the Popup Text. If token syntax appears instead of the replacement text you were expecting, make sure you've done step 1 (enable Token module).

Create a view with a Leaflet map

You can have maps on node displays and maps on views displays, thanks to Views integration. The process is very similar to adding and setting up a plugin on Views.

1. Enable the module "Leaflet Views" at Admin > Modules (admin/modules)
2. Create a View that displays nodes of the content type that you want to include in the map.
3. Add a Geofield/Geocode field, set to the default "Well Known Text (WKT)" formatter. If you need them, also add fields for the Title and Description.
4. Set the view's Format to "Leaflet Map", and choose the Geo data field you just set up as the "Data Source".
5. Set the "Title Field" option to your chosen Title field, then set up the "Description Content" in one of two ways:
   5a. Use the Description field you set up earlier.
   5b. Use the "<node entity>" option and then select a View mode. Most often, this will be the Teaser view mode, which you can then set up for your mapped nodes in that content type's "Manage display" tag.
6. Choose a Map type.
7. Click Apply and Save your View. You won't be able to see the map in the View preview, but if you go to the page where your view is being rendered, you'll be able to see your nodes on the map.

API Usage

Rendering a map is as simple as calling a single method, leaflet_render_map(),
which takes 3 parameters.

$map
An associative array defining a map. See hook_leaflet_map_info() and hook_leaflet_map_info_alter() to configure Leaflet settings like scrollWheelZoom. The module defines a default map with a OpenStreet Maps base layer.

$height (string)
Height of the map expressed in pixels. Append 'px'. Default: '400px'.

$features
This is the tricky part. This is an associative array of all the 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 layer groups so they can be controlled together, http://leafletjs.com/reference.html#layergroup. A feature will look something like:

$features = array(
  array(
    'type' => 'point',
    'lat' => 12.32,
    'lon' => 123.45,
    'icon' => array(
      'iconUrl' => 'sites/default/files/mymarker.png'
    ),
    'popup' => l($node->title, 'node/' . $node->nid),
    'leaflet_id' => 'some unique ID'
  ),
  array(
    'type' => 'linestring',
    'points' => array(
      0 => array('lat' => 13.24, 'lon' => 12.32),
      1 => array('lat' => 13.24, 'lon' => 12.32),
      2 => array('lat' => 13.24, 'lon' => 12.32),
      3 => array('lat' => 13.24, 'lon' => 12.32),
      4 => array('lat' => 13.24, 'lon' => 12.32),
    ),
    'popup' => l($node->title, 'node/' . $node->nid),
    'leaflet_id' => 'some unique ID'
  ),
  array(
    'type' => 'json',
    'json' => [JSON OBJECT],
    'properties' = array(
      'style' => [style settings],
      'leaflet_id' => 'some unique ID'
    )
  )
);

Leaflet extension modules

Resources

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

quiron’s picture

Hi folks,

it will be nice to extend this page to explain something about: [JSON OBJECT] and [style settings]. Also add information about the missing param height, wich is documentend in the module readme.

thanks so much.

Exploratus’s picture

What is Style settings and Json Object. Please elaborate...

eleuthere’s picture

Hi,
I use Leaflet to display a geofield added to a content type.
When I display an individual content of the type, I would like the location to be displaied at the center of the map, as it is actually, but I would also like to disallow user to swipe the map. I find that usefull when selecting a place, not displaying it.
Any tip anyone ?
If I can help testing anyone's code, tell me.
Eleuthere

Long time Linux user, new to Drupal, trying to get help and help in return.