This page is archived
We're keeping this page up as a courtesy to folks who may need to refer to old instructions. We don't plan to update this page.
Leaflet is a Drupal mapping module that is quickly gaining attention for its mobile-friendly interactive controls, simple configuration, and lightweight file size. There is a stable version available for Drupal 7 and a branch in development for Drupal 8. The Leaflet contributed module integrates CloudMade's JavaScript library for interactive maps and provides a field formatter, Views integration, and a developer API. If you are looking for a mapping solution that you can quickly get up and running, then join Amber Matz for the series Mapping with Leaflet and learn how to add beautiful, mobile-friendly maps to your Drupal 7 site.
Leaflet uses Geofield to store a variety of geographical data and formats. So, before we can start mapping, we need to have a way to capture location data in Drupal. Amber will walk you through how to install and configure Geofield for a new content type. Then we'll add Leaflet to the mix and display a latitude/longitude point on an OpenStreetMap.
Next, we'll explore another option for location data storage: geocoded postal addresses. Amber will show you how to configure a Feeds Importer for importing addresses into AddressField and configure Geofield to automatically geocode postal addresses for display on a map.
Finally, you'll learn how to use Views and Leaflet display a map of multiple locations. Then, we'll look at various ways to customize Leaflet and override its default settings.
After completing this series, you should be able to (on a Drupal 7 site):
- Use Geofield to store geospatial data
- Use Leaflet to display single and multiple locations on a map
- Configure Drupal to Geocode postal addresses upon data entry or import
- Use Views to create maps with Leaflet
- Implement various features of the Leaflet library such as customizing map marker icons, swapping out base map layers, enabling marker clustering, and overriding other default settings.
This series provides a solid introduction to Leaflet and Geofield, one of several mapping solutions available in Drupal (see Comparison of mapping modules on drupal.org.) Leaflet's features are extended by a number of different contributed modules. With the growing relevance of location data in web sites and applications, Leaflet is an up-and-coming solution worth adding to your Drupal site building tool kit.
Geographic information is used to find a location, get directions, or check on traffic – and so much more. In the Drupal mapping world, solutions range broadly.
Leaflet is one solution that works for many situations. In this series, you'll get up and running with mapping using Leaflet. We’ll add and configure field types, install Leaflet, and create and customize maps. When you complete this series, you'll be able to create a map of both single and multiple points, geocode address data, configure geofield to store geographic data, and customize the look and feel of your Leaflet maps interface.
Before we can display a location on a map, we need to decide on a location storage method. This is a critical step because not all storage methods are compatible with every mapping module. Since we'll be using Leaflet, we'll need to use Geofield to store our geographic data. Geofield will provide us with a new type of field that we can add to any entity bundle or content type. Geofield provides many different field formatters that can display geographic data in a variety of formats, such as latitude and longitude or well known text.
By the end of this lesson, you should be able to:
- Download and install Geofield and its dependencies GeoPHP and CTools
- Create a field on a content type using Geofield
- Enter a latitude and longitude for a location node
Join Amber Matz as she walks you through how to prep your site to store location data using Geofield module.
Additional resources
Now that we've stored the latitude and longitude for a node, we can display it on a map. In this lesson, we'll take a look at the documentation for Leaflet and we'll download and install the Leaflet JavaScript library and the Leaflet Drupal module, which loads the Leaflet JavaScript library and provides configuration options that we'll use later on.
By the end of this lesson, you should be able to:
- Install Leaflet and its dependencies to your Drupal site
- Configure a Geofield field to display as a Leaflet map
Additional resources
Manually entering a latitude and longitude for each node is a tedious process. Just finding out what those numbers are for a given location less than ideal. One of the most common ways to communicate a location to another person is by using a postal address. How many times do you enter a latitude and longitude into your favorite mapping app to get directions? Hardly ever, right? Most of the time you would just enter the street address and the app "just knows" how to find it. In this lesson, we'll configure our Drupal site to Geocode a postal address into geographic data that our Leaflet map can display.
Additional resources
n the previous lesson, we configured the location content type to collect address data using Address Field module. Then we brought in Geocoder module and configured the Geofield on our location content type to use the data from the Address Field. With Geocoder all set to transform that address data, we are now ready to create some new location nodes. Since the process of geocoding addresses happens behind the scenes when a new node is created or when a node is edited and saved, it was important to do this configuration first, before creating any more location nodes. To expedite data-entry, in this lesson, I'll walk through the process of importing a comma separated value text file or CSV file into a Drupal site with Address Field using Feeds.
By the end of this lesson, you'll understand what data you need to be sure and include in your CSV to avoid trouble with Address Field, how to configure a feeds importer, and how to configure the field mapping in the importer with the somewhat esoteric field names that Address Field provides.
Additional resources
Before we can display a location on a map, we need to decide on a location storage method. This is a critical step because not all storage methods are compatible with every mapping module. Since we'll be using Leaflet, we'll need to use Geofield to store our geographic data. Geofield will provide us with a new type of field that we can add to any entity bundle or content type. Geofield provides many different field formatters that can display geographic data in a variety of formats, such as latitude and longitude or well known text. By the end of this lesson, you should be able to download and install Geofield and its dependencies, add a Geofield to a content type, and enter in the latitude and longitude for a location node.
Additional resources
One of the features of the Leaflet module is the ability to change the default map marker image. In this lesson, we'll take the iconic Druplicon and transform it into a map marker for a Leaflet map. In this lesson you'll learn how to change the default map marker image both using the field formatter in a content type's display settings as well as in Views.
Additional resources
Out-of-the-box, Leaflet module comes with one map option. In this lesson we'll add the Leaflet More Maps module to our toolbox, try out other map options, and take a look at implications for zoom settings when choosing an alternative base map layer.
Additional resources
In this lesson, we'll add the Markercluster library and contributed Drupal module which will transform the behavior the Leaflet map markers to display clusters instead of individual markers.