Check your version
This collection covers a topic in Drupal 7 which may or may not be the version you're using. We're keeping this tutorial online as a courtesy to users of Drupal 7, but we consider it archived.
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.
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
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.
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.
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.
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.