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

• Leaflet Markercluster - Provides Beautiful Animated Marker Clustering functionality for Leaflet using the Leaflet MarkerCluster library.
• Geocluster - Provides server side clustering (compared to markercluster which is client side).
• Leaflet Widget for Geofield - a Geofield widget that uses the Leaflet widget plugin for adding and removing geometries.
• Leaflet More Maps - adds over 20 attractive map styles such as MapBox, Stamen, Thunderforest and Esri.
• Leaflet MapBox - use your own MapBox map tiles in your map views.
• Leaflet Google Maps - adds the possibility to choose Google Maps layers in leaflet maps.This is now part of Leaflet More Maps
• Leaflet GeoJSON - create Leaflet maps backed by GeoJSON data and leverage a bounding box strategy.
• Leaflet Label - use labels as a light-weight alternative to marker popups for leaflet markers
• Leaflet Popup Outside - show the info bubble window not in a popup (default Leaflet behavior) but in an external div
• Leaflet Hash - Add URL hashes to web pages with Leaflet maps for zoom level and map centering.
• Leaflet Plugins - integration with Plugins. Allows to use service specific API's e.g. Google Maps for Business.
• Leaflet views AJAX popups - load Leaflet Views popups via AJAX on demand one by one rather than on page load alltogether.
• IP Geolocation Views & Maps: adds a swag of cool features such as centering options, markers colour-coded by any field in your View, cross-highlighting between content and map, geocoding and reverse geocoding options.
• Use the search to find other leaflet extension modules.

Resources

• Introduction to Leaflet for Drupal
• A Quick Intro to OpenLayers & Leaflet in Drupal 7
• Location and Mapping Group
• Leaflet Kickstart distribution, a quick way to get the Leaflet, Address Field, Geofield and Geocoder stack up and working
• Building maps in Drupal using Leaflet and Views
• Leaflet GeoJSON