Building maps using Openlayers in Drupal 7


Implementing maps in Drupal7 is not easy as it was in Drupal6 using Gmap but Gmap module is not developed for Drupal7. I was working with maps in Drupal7 and personally I felt that there are less documentation on maps in Drupal7. So, I thought to write this blog which can probably help my readers in implementation of maps. Related to implementation luckily we have Openlayers module in Drupal7.

Openlayers with maps, what sounds like the small task of showing some nodes on a map with the following collection of modules and dependencies:

  • Geofield : which hold the geo coordinates in our content
  • Address field: to hold postal address in our content
  • Geocoder: to convert address data into geographical data
  • geoPHP: Geocoder dependency
  • Openlayers

With some additional dependencies

  • Ctools
  • Views 3

Step 1: First you have to install above module and enable them included with Openlayers and its sub modules

  • openlayers_ui
  • openlayers_views

Step 2: Create content and add following fields

  • Addressfield : Postal address , zipcode , city
  • Location : field_type – Geofield , Widget – Geocode from another field

Selection_012

Address field will store your postal address of your business and geofield will take those address in location field and fetch geo coordinates of all businesses.

Selection_013

Step 3: Creating a Map

Openlayers come with many configurable option. I will describe basic options which you need for creating map. We need a base layer which is our map with some additional behaviors and styles on it. Secondly, Openlayer overlay which we will setup using views later.

Getting started with creating map

Go to structures > Openlayers > maps. Click add map and fill all details. Your map details should look like below.

Selection_014

Configure layer & style for your map.

Selection_015

Configure some behavior for map.

Selection_017

Selection_019

Now we are done with creating map which we will use for displaying data on it later.

Step 4: Creating Openlayer Overlay or you can say map view.

We need two things

  • Openlayer overlay to display data on map
  • Page or block to display map

Go to structures > Views > add new view .

Values for view

  • Show : Content
  • of type : Business information
  • create a page : Checked

Click on continue & edit. Here we will change some things in our view.

Add these values to your view

  • Format : Map > business map > Apply(all display)

Selection_020

  • Add Fields : 1) Title 2) Location . You should also set path of you page.

Now we will change some settings of our Openlayers overlay. Click on settings side by Format Openlayers Data Overlay | Settings.

  • Map data sources > WKT
  • WKT field > content : Location
  • Title Field > content : Title

Selection_021

What just we did ?

We created our map and added overlay for our data to display on map using views.

Last Step

We will add this Overlay to our map which we created earlier . Go to Structures > Openlayers > Maps > business map > layers & style . You probably see your view their in list . Just enable them so this map will use overlay for displaying content.

Selection_023

That’s it at this point we had a page available containing map with overlays displaying data when you hover them.

Selection_024

Thanks to Sonali , Anirudha , Chetan for reading draft of this.