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.
- 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”.
- Storage options: set this to “Store each simple feature as a separate field.
- Enable geocoding of location data: 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:
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:
How about in Drupal 8?
Not much progress yet, I’m afraid [url=https://www.drupal.org/node/2361715]https://www.drupal.org/node…[/url]
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?
@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.
Thanks for the reply!
+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
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.
Yes, I need that information, too! Please help!
Try using the Dev release of openlayers.
The module can be a little touchy.
Thanks
Daniel
Thank you so much for your quick response 🙂
I am going to try it this evening.
It really works with the latest 7.x-3.x-dev release. Thank you so much! You’re fantastic!
You are most welcome 🙂
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?
[url
]https://uploads.disquscdn.c…[/url] [url
]https://uploads.disquscdn.c…[/url]
Hi Simon,
Do you get any errors in the dblogger ?
Thanks
Daniel
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.
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?