Use Openlayers to Build Drupal Maps

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

Instructor

  • Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.

0 0 votes
Blog Rating
Subscribe
Notify of
16 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Radium

How about in Drupal 8?

steve

Not much progress yet, I’m afraid [url=https://www.drupal.org/node/2361715]https://www.drupal.org/node…[/url]

Meg Lee Chin

No markers appear in my map. Aren’t you missing the data layer in views? Also, shouldn’t the data layer be brought into an openlayers map?

steve

@megleechin No, I just used one of the default data layers. But you’re right … there’s a whole other tutorial to be written on data layers.

Meg Lee Chin

Thanks for the reply!

Maurizio

+1 for a tutorial on data layers for version 3. AFAIK there is no other way to have multiple switchable data layers on a map in Drupal

Rodrigo

You said: “If you can’t see a map here, then you have more work to do before progressing further.”…

Well.. thats what happening to me. Could you give me a hint?., Thanks a lot.

Dirkozoid

Yes, I need that information, too! Please help!

daniel-pickering

Try using the Dev release of openlayers.
The module can be a little touchy.
Thanks

Daniel

Dirkozoid

Thank you so much for your quick response 🙂
I am going to try it this evening.

Dirkozoid

It really works with the latest 7.x-3.x-dev release. Thank you so much! You’re fantastic!

daniel-pickering

You are most welcome 🙂

Simon O'Toole

I have tried 7.x-3.1 and 7.x-3.x-dev and am having no success in getting the default UI map to show in Structure-> Openlayers.

When using 7.x-3.1, space for the map block is there but no map. If i check the “Load javascript debug integration files” checkbox i get the UI controls but no map.

When using the dev release i get nothing. Any ideas?

[urlcomment image]https://uploads.disquscdn.c…[/url] [urlcomment image]https://uploads.disquscdn.c…[/url]

daniel-pickering

Hi Simon,
Do you get any errors in the dblogger ?
Thanks

Daniel

Simon O'Toole

No errors, no.

It is working with dev release. It took me a while to find out that it was working as with the dev release, the demo “default UI map” is not accessible on the structure->openlayers page. I was trying to get this to work before moving forward in your tutorial as instructed. The maps are visible if i go into structures->openlayers->maps and click on the edit option for a map then click on the preview button.
Thank you for your response.

Umair

Currently I have a combination of location and gmap module on a website. I would like to replace gmap and google geocoder as well. Is using leaflet and ip geolocation module enough?

16
0
Would love your thoughts, please comment.x
()
x