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: Openlayers

jQuery Update

CTools

Libraries

Libraries API

geoPHP

geoField 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.

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:

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:

Openlayers Map : set this to "Openlayers Geofield Widget map".

: set this to "Openlayers Geofield Widget map". Storage options: set this to "Store each simple feature as a separate field.

Enable geocoding of location data : check this box.

: check this box. Geocode from field: you don't have to choose anything.

Save the "Map field".

Go to the Manage Display tab, and make sure the format for the map field is set to "Geofield Map":

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:

Save your content and you should see map successfully published:

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:

Here's an example using a hand-drawn, filled-in tool:

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".

Add your Geofield map field to the view:

Click "Settings" next to "Geofield Map":

Data Source: choose your Geofield field:

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: