Use Openlayers to Build Drupal Maps

| Drupal
Use Openlayers to Build Drupal Maps

Openlayers is a Javascript library that allows you to display maps from multiple sources. It works with Mapquest, Yahoo Maps, Stamen, Google Street Map, Open Street Map and more.

Openlayers' flexibility makes it a very useful option. For example, an OSTraining member wanted to use Openlayers because he needed to build a site in China, where Google Maps is blocked.

A note of caution before we begin: in a previous tutorial, we covered Google Maps in Drupal. I mentioned that module was powerful, but also poorly documented and sometimes confusing to use. The same is true of Openlayer. I went on several wild goose chases before I found the right combination of modules, libraries and settings to make this work.

Step #1. Installing Openlayers

Openlayers requires a lot of modules to work successfully:

Also, you'll need to download the geoPHP library and upload it to sites/all/libraries/geoPHP. The image below shows what your file structure should look like. Be careful to download the latest version of this library. Some tutorials and docmentation point to an older version of the library and I found several people commenting that the older version no longer works.

Install the geoPHP library in Drupal
  • Once you have installed and enabled all the modules, go to Structure > Open Layers.
  • If you can't see a map here, then you have more work to do before progressing further. The image below shows what this screen should look like:
Make sure your Openlayers maps are working in Drupal

Step #2. Adding Openlayers fields to nodes

Now let's add a field to our content in order to collect locations.

  • Find your content type and add a "Geofield" field and choose the "Openlayer Maps" widget:
Adding Openlayers fields to nodes with Geofield
  • Openlayers Map: set this to "Openlayers Geofield Widget map".
  • Storage options: set this to "Store each simple feature as a separate field.
Openlayers Geofield Widget map settings
  • Enable geocoding of location data: check this box.
  • Geocode from field: you don't have to choose anything.
Enable geocoding of location data in Openlayers
  • Save the "Map field".
  • Go to the Manage Display tab, and make sure the format for the map field is set to "Geofield Map":
Manage Display for Geofield field

Step #3. Create content with Openlayers maps

  • Go to Add Content and you'll see a Title and map field.
  • Use the tools at the bottom of the map to put markers on the map. In this case, I put a black marker on New York City:
Create content with Openlayers maps
  • Save your content and you should see map successfully published:
Created content with Openlayers maps
It's worth noting that the tools at the bottom of the map are capable of creating some very complex shapes. Here's an example using the hand-drawn line tool:
using the hand-drawn line tool in Openlayers
Here's an example using a hand-drawn, filled-in tool:
using the hand-drawn fill-in tool in Openlayers

Step #4. Use Views with Openlayers

Now let's create a view to show multiple locations on one map.

  • Go to Structure > Views > Add new view.
  • Display format: choose "Geofield Map".
Creating Views with Openlayers
  • Add your Geofield map field to the view:
Adding a map field to Views with Openlayers
  • Click "Settings" next to "Geofield Map":
Changing Geofield display settings in Views
  • Data Source: choose your Geofield field:
Choosing a data source for Views in Openlayers
  • Save your settings and save your view.
  • Visit the view on the front of your site and you will see an Openlayers map with multiple results:
An openlayers map created with Drupal and Views

About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. He was a teacher for many years before starting OSTraining. Steve wrote the best-selling Drupal and Joomla books.