X Marks the Spot: A Beginner's Guide to Online Maps in Drupal

Published March 7, 2014

X Marks the Spot sample map
Mapping address data in Drupal can be confusing, if only because of the great number of contributed modules available that involve online maps. Picking the right module (or combination of modules) is challenging - especially for site builders who are new to mapping in Drupal. In this tutorial, we'll utilize the popular and well-supported [Geofield](http://www.drupal.org/project/geofield) module as one of the key ingredients in the common task of entering address data and having it displayed on an interactive map.

This tutorial contains step-by-step instructions for accomplishing this task, as well as a screencast demonstrating all of the steps.

We'll use the example of adding DrupalCamp address information to a Drupal 7 site. The site will then automatically display the DrupalCamp on a map on each camp's page, as well as display all camps on a single map. Finally, we're going to look at some of the options for using different map base layers.

This tutorial assumes that you're familiar with Drupal's "big 5" (content types, taxonomy, menus, users/roles/permissions, and blocks/regions/themes), the [Views](http://www.drupal.org/project/views) module, as well as downloading, installing, and enabling modules.

Here are the basic steps of what we'll be doing:

1. Create a new DrupalCamp content type with a standard (postal) address field.
2. Add a (Geofield) field to the DrupalCamp content type to store each address's corresponding latitude and longitude. The [Geocoder](http://www.drupal.org/project/geocoder) module will be used to convert the postal address into latitude and longitude values.
4. Configure the DrupalCamp content type so that a the latitude and longitude field are displayed as a map.
5. Create a view that displays all DrupalCamp nodes' address information on a single map.
6. Check out the various options for changing the look of the maps.

##Screencast

##Create a new "DrupalCamp" Content Type

We're going to use the [Address Field](http://www.drupal.org/project/addressfield) module (which requires the [Chaos tools](http://www.drupal.org/project/ctools) module) to allow users to easliy input postal address information for each camp. Once the module is enabled, create a new "DrupalCamp" content type and add a new field of type "Postal address" (provided by the Address Field module). Give it a label of "Location", and set its configuration as follows (anything not listed can be left at default values):

* Available countries: United States
* Format handlers: Address form (country-specific) and Name

DrupalCamp content type

## Provide a Field to Store Latitude and Longitude

The [Geofield](http://www.drupal.org/project/geofield) module is used to store geographic data in Drupal 7. It can store points, lines, and polygons, but for this example, we'll just be storing individual points (locations) - luckily, this is the easiest (and most common) scenario. The Geofield module also requires the [Chaos tools](http://www.drupal.org/project/ctools) module as well as the [geoPHP](http://www.drupal.org/project/geophp) module.

The Geofield module also comes with the Geofield Map module, which we'll be using later in this tutorial.

Before we go ahead and add a new Geofield field type field to our DrupalCamp content type, we're going to want to go ahead and also enable the [Geocoder](http://www.drupal.org/project/geocoder) module. This is because the Geocoder module provides a widget for the Geofield field type that we're going to use. The Geocoder module also requires the [Chaos tools](http://www.drupal.org/project/ctools) and [geoPHP](http://www.drupal.org/project/geophp) modules.

Now that we have all the required modules enabled, let's go ahead and add a new field to our DrupalCamp content type. Give it a label of "Location lat/lon", use a field type of "Geofield", and set its widget to "Geocode from another field" (this is where the Geocoder module comes in). Settings for the field are (anything not listed can be left at default values):

* Geocode from field: Location
* Geocoder: Google Geocoder

DrupalCamp Location Lat/Lon field settings

These two field settings are the key for automatically converting postal address data entered in the "Location" field into latitude/longitude data stored in the "Location lat/lon" field. The settings instruct the Geocoder module to grab the postal address data and send it to the Google Geocoder web service which does the heavy lifting of converting it to a latitude and longitude. Other geocoding services are available, but each one provides different capabilities and different usage limits. For Google Geocoder:

* [Limit of 2,500 requests per 24 hour period](https://developers.google.com/maps/documentation/geocoding/#Limits) - additional requests are available at various price points.
* [Works for most countries](http://gmaps-samples.googlecode.com/svn/trunk/mapcoverage_filtered.html)

**Note: you'll need to have an active internet connection for the Geocoding to work.**

_Feel free to add other fields to the DrupalCamp content type at your lesiure, but for this tutorial, this is all that we're going to need._

## Display a Map for Each DrupalCamp Node

At this point, we're ready to add some DrupalCamp nodes. [Find](http://www.drupical.com/) [some](http://buildamodule.com/drupal-camps-calendar) DrupalCamps to enter - be sure to enter complete location information for each.

You'll notice that as each one is added the "Location lat/lon" field displays something like "POINT (-90.3288385 38.6491536)". Navigate on over to the "Manage Display" settings for the DrupalCamp content type and notice that the formatter for the field is set to "Well Known Text (WKT)". [According to Wikipedia](http://en.wikipedia.org/wiki/Well-known_text):

Well Known Text (WKT) is a text markup language for representing vector geometry objects on a map, spatial reference systems of spatial objects and transformations between spatial reference systems.

While useful, it doesn't really provide site visitors with what they're looking for. By enabling the Geofield Map module (which comes with Geofield), we can now utilize the "Geofield Map" formatter on the "Location lat/lon" field (via the "Manage Display" page of our DrupalCamp content type). Select this, then set the formatter's settings as follows (anything not listed can be left at default values):

* Zoom: 15

DrupalCamp content type Manage Display settings

Now, go back and take a look at one of your DrupalCamp nodes; instead of the Well Known Text data, you should see a Google Map with a pin at the location of the DrupalCamp. Note that this is a fully-enabled Google Map that you can pan, zoom, and do most anything else you do with any other Google Map.

**Note: you'll need to have an active internet connection for the map to display.**

##View All DrupalCamps on a Single Map

The ability to view numerous DrupalCamps on a single map is the next logical step. The [Views module](http://www.drupal.org/project/views) provides the ability to display lists of content. In this case, our content is DrupalCamp, and instead of a traditional "list", we're going to output our view as a map.

Let's create a new view called "All DrupalCamps". Give it a single page display with a path of "all-drupalcamps" and filter it by:

* Content: Published = Yes
* Content: Type = DrupalCamp

For fields, we'll keep it simple:

* Content: Title
* Content: Location lat/lon

In the "Content: Location lat/lon" settings, click to "Exclude it from display" and leave other settings at their default values.

We want to be sure that we display all the DrupalCamp nodes on a single map, so modify the Pager settings as well:

* Pager: Display all items

All that is left at this point is to set the Format of the display. Click on "Unformatted text" in the Format settings, and change the format to "Geofield Map". For its settings use the following (anything not listed can be left at default values):

* Data Source: Location lat/lon
* Popup Text: title

The "Data Source" setting tells the Geofield Map formatter where to look for the latitude and longitude data. In this case, the Geofield-based "Location lat/lon" field that we included in our list of fields for this view. The "Popup Text" setting instructs Geofield Map to use the title field as the text to display when the camp's pin is clicked.

DrupalCamp All DrupalCamps view

Navigate to the "all-drupalcamps" page on your site and you should see a Google Map with a pin displayed for each DrupalCamp node on your site.

##Alternative Map Styles

While the Geofield Map module outputs only Google Maps, the [Leaflet](http://www.drupal.org/project/leaflet) module provides a number of alternative "base layers" that can give your map various looks. While the Leaflet module does a lot more than just provide alternate base layers, we'll only be looking at this functionality in this tutorial.

The Leaflet module requires the [Libraries module](http://www.drupal.org/project/libraries), the [Entity API module](http://www.drupal.org/project/entity), as well as the 3rd-party [Leaflet JS library](http://leafletjs.com/download.html). Be sure to read the [installation instructions](https://drupal.org/node/1645460) to make sure everything is installed properly.

The Leaflet module comes with several modules. For this tutorial, we'll need to enable the "Leaflet", "Leaflet More Maps", and "Leaflet views". modules.

Once everything is enabled, navigate back to the edit page for the "All DrupalCamps" view. Click to change the Format from "Geofield Map" to "Leaflet Map". Set the format settings as follows (anything not listed can be left at default values):

* Data Source: Content: Location lat/lon
* Title Field: Content: Title
* Map: pick one!

Leaflet map

The "Map" setting provides numerous different options for various base layers for your map. Depending on the type of content and/or the style of the site, one base layer may be more appropriate than another. There are a good number of other options in the "Leaflet Map" settings, including the ability to use custom "points" (or "pins") and vector display options (for when the map is displaying more than just points). There's also a "Descriptive Content" field that can be used to display additional content about the DrupalCamp when the pin is clicked. This is commonly populated with a trimmed version of the body field of the node.

##Wrap-up

Over the years, there have been lots of ways for displaying interactive maps on a Drupal site. Each iteration provides more features and easier setup and configuration. What this tutorial covered is just scratching the surface of what can be done. There are numerous Geofield- and Leaflet-related modules that extend the functionality of the basics presented here, be sure to check them out!

##Resources

* [Checking in With Drupal Mapping (October 19, 2013)](https://www.drupalcampatlanta.com/session/checking-drupal-mapping) - presentation by [Brandon Morrison](https://drupal.org/user/77766) from DrupalCamp Atlanta.
* [Interactive maps with Leaflet and more (April 13, 2013)](http://2013.drupalalpeadria.org/session/interactive-maps-leaflet-and-mo…) - presentation by [Josef Dabernig](http://drupal.org/user/228295) from Drupal Camp Alpe-Adria.

##Bonus!

* Interested in inputting geographic information via a map (instead of geocoding or typing in latitudes and longitudes)? The [OpenLayers](http://www.drupal.org/project/openlayers) module provides an input widget for Geofield.

Comments

[...] this task, as well as a screencast demonstrating all of the steps.<!––>read more drupal, drupal answers, drupal king, drupal modules, drupal stack exchange, drupal supportShare [...]

Great intro to maps! Getting started with maps in Drupal can be daunting as there are so many! The set of modules you picked (Geofield, Geocoder, Addressfield, Views, Leaflet, Leaflet More Maps) is probably my favourite starter pack.
Once site builders get hooked (I've found playing with maps very addictive), they may want to do things like:
o color markers or add little font-icons based on the value of a field in the View, like a price range, content type, taxonomy term
o auto-zoom and center the map on the visitor's (changing) location
o customize marker info balloons that pop up when you click a marker (for instance display in the balloon a super-detailed map of the area around the marker location, or a photograph)

Here's the great thing: you can get all of the above by adding to the set-up described one more module: IPGV&M, http://drupal.org/project/ip_geoloc. No need to redo or start from scratch. Keep what you've got, then enable IPGV&M and select the above options from its configuration pages.

Finally, to really top of what is by then already a seriously good mapping station, install Leaflet MarkerCluster .

Map heaven!

Mapping is a OMG most of the times, so this screencast really comes along as nothing but a savior. Very straightforward, concise, and yet thorough enough to actually get down to the dirty parts of implementation.
Many thanks to you Mike, for the time you've put into this, and for getting it out to all of us to use and learn from.

Submitted by Roger Nyman (not verified) on Sun, 03/09/2014 - 10:33

[...] with the modules Mike discusses in this talk. If you’re interested, he has written up an article to accompany the video.Great Opportunity for BeginnersThe past couple of years OSTraining has done [...]

Thank you for the article; good information. Would be strengthened with the inclusion of a (even brief) comparison to other approaches, pros/cons of each, and reason for choosing this one. Thinking in particular of location module, which has 50,000 installs against geofield's 20,000, yet is omitted from the discussion.

Submitted by Dwight (not verified) on Mon, 03/17/2014 - 04:32

Author comment

Dwight,

I didn't mention the Location module because I believe that the vast majority of those 47,000+ installs are on Drupal 6 (and earlier) site as well as Drupal 7 sites that were migrated from Drupal 6 (and earlier).

I can't think of a single use case where I would recommend new sites using Location module over GeoField and the other modules I discuss above. They represent a much more modern, flexible, and sustainable method for mapping in Drupal.

-mike

Great article, will you be offering a similar tutorial for Drupal 8?

Submitted by Wes Roepken (not verified) on Fri, 02/09/2018 - 07:50

Sign up to receive email notifications of whenever we publish a new blog post or quicktip!

Name
CAPTCHA