Basic setup of Drupal 7 + OpenLayers + Geofield + Views 3

Our goal

This configuration will setup Drupal 7 with our nodes plotted on an OpenLayers map, using Views module to gather and channel the information to the OpenLayers module. And Geofield letting you input geo data easily via the node add form. We'll also have the OpenLayers Cluster strategy implemented.

Intro

Drupal 7 has been out there for a while already, but not all modules have gotten around yet being compatible. While development on the needed modules for this setup is in beta and RC fases, the documentation is also ... in that fase or say ... not yet completely up to version.

After reading a lot of posts and some Drupal handbook pages on this subject, I noticed most of them are still aiming at D6. And a lot of questions about Drupal 7 versions are not really answered. So I've put together a small how-to combining notes from other posts and a bit of common sense and came to this configuration.

Let's get started!

Step 1: Install Drupal + the modules

Required modules:
Install Drupal 7 (used 7.12 at the time of writing)
Install Views3 (used views-7.x-3.3)
Install CTools (used ctools-7.x-1.0)
Install GeoField (used geofield-7.x-1.0)
Install OpenLayers (used openlayers-7.x-2.0-beta1)
Install Libraries (used libraries-7.x-1.0)
Install library geoPHP (used geoPHP version 0.8)
Download the geoPHP library from https://github.com/downloads/phayes/geoPHP/geoPHP.tar.gz
From the README:

Unarchive the library files and place in sites/all/libraries
Your directory structure should look like: /sites/all/libraries/geoPHP/geoPHP.inc

Optional:
Install Devel module (used devel-7.x-1.2.tar.gz) to generate a bunch of nodes to display on the map.

Quick install of Drupal 7 + the modules above using Drush:
In my setup the webroot directory is called 'oltest7'. So the first command would be run from /var/www for example.

Note: The setup of Drush is not part of this how-to.

drush dl drupal-7.x --drupal-project-rename=oltest7
cd oltest7
drush si minimal --db-url=mysql://root@localhost/oltest7_2
# newer Drush versions will print your User name and User password
 
# enable the field ui
drush en field_ui
 
# install view 3 + ctools
drush dl views-7.x
drush en view views_ui
# it will ask to donwload ctool because it views depends on ctools
# answer (y) to all
 
# install geofield + library
drush dl geofield-7.x
drush en geofield
# it will ask to download library module and enable it
# answer (y) to all
 
# install openlayers
# most stable at this point is beta 1
drush dl openlayers 7.x-2.0-beta1
drush en openlayers_views openlayers_ui openlayers
 
# optional: install devel for node creation
drush dl devel-7.x
drush en devel_generate devel
 
# install the geoPHP library
# from the web root directory
mkdir sites/all/libraries
cd sites/all/libraries
wget github.com/downloads/phayes/geoPHP/geoPHP.tar.gz --no-check-certificate
tar zxvf geoPHP.tar.gz

Depending on your Drush version...
The user / pass to your new site will be admin / admin or Drush will print out the user name and user password just after the Drush si command.

Step 2: Configure the OpenLayers module

Drush installed all modules in sites/all/modules/.
This shouldn't matter, but it's just here as a side note.

Step 2.1: Configure OpenLayers Geofield WIDGET map

We'll set a basic configuration for a map we use to enter the location data into Drupal.

# Go to 
admin/structure/openlayers/maps
# and 
clone the WIDGET map
Give the map title a name that makes sense to you, so you can recognize it later on.
# and
Save

You can configure the map later in the way you want it to work for your users.

Step 2.2: Configure OpenLayers Geofield FORMATTER map - part 1

This step is a lot like the config for the widget map, but this map will be used for output. The nodes will be plotted on this map.

Again, we'll set a basic configuration for a map we use to output the location data from Drupal.

# go to 
admin/structure/openlayers/maps
# and
clone the Geofield Formatter Map map
Give the map title a name that makes sence to you, so you can recognize it later on
# and
Save

You can configure the map later in the way you want the output to display your nodes.
We'll come back to this later to configure the Cluster strategy on the map.

Step 3: Configure a content type

We'll need a content type to enter nodes.
This content type will need a field to hold the geo data.

# go to
admin/structure/types

# and
add content type which suits your needs
# I used "Map item" for this example, the machine name will be "map-item".
Edit the content type and add a field
with name = "Location"
of type = "Geofield"
of widget type = "OpenLayers Map"

In the field configuation:

select the widget you configured in the previous step (2.1) for
"OpenLayers Map" setting.
# and
select "Store each simple feature as a separate field." from the Storage options

The latter will store the points and lines as single features, for my case this was what I wanted, mainly because of counting the single features.

Step 4: Add some nodes

At this point it's practical to quickly add some nodes so you'll some data show up when you create the views.

Step 5: Configure Views

We use Views to scrape for nodes and send em of the to OpenLayers.
In Views we'll create two displays:

  1. a page showing the maps,
  2. an "OpenLayers Data Overlay"

Step 5.1: Add and configure a Views OpenLayers Data Overlay

Add the view

# go to 
admin/structure/views/add
# configure the view
show = content
type = Map item (or whatever ctype name you used)
# You don't have to create a page at this point yet.
Click "Continue and Edit"

Once you're in the view..
The Format show will be set to Fields and the Content: Title field will be added there by default.
We'all also need the geo information for the map. In view:

Add the "Content: Location" field
# Save it with the default settings

This display is were we actually scrap Drupal for the nodes to plot on the map!
After we add the OpenLayers Data Overlay display:

# At the top of the view 
click the "+ Add" 
# to add a views display and 
select "OpenLayers Data Overlay"

In the Format/Format section of the display:

select the "OpenLayers Data Overlay" radio
# next
In the "Map Data Sources" select box, select "WKT".
In the "WKT Field" select box, select "Content: Location".
In the "WKT Title" select box, select "Content: Title".

Note: Override the settings for this views display if you'll be adding more displays to this view. Don't apply the OpenLayes Data Overlay to all the displays!

I only configured the title field, since it's all I want to show in the map popup balloon. If you want to show another node field, configure the Description field in the section above with node field you would like to see in there. You'll have to go back and add the field to the view before you can configure it in the OpenLayers Data Overlay settings.

At this point you should see some WKT appear in the Views preview for the nodes you have entered already.

Step 5.2: Add and configure a Views page

This is were we plot the scraped nodes from 2.3 on the map!
Note: You could do this in an entirely different view.

# at the top of the same view 
click the "+ Add" 
# to add a views display and 
select "Page"

In the Format/Format section

select the "OpenLayers Map" radio

In the Map select box,

select "YOUR CUSTOM FORMATTER MAP"

In the Page settings/Path section

type path where this page will be at. 
# I used "map", my page will be at http://localhost/map

Note: There won't be any nodes showing on the map just yet, since we haven't configured the map to show them ... yet!
We'll do this next... first: Save the view!

Step 6: Configure Geofield FORMATTER map - part 2

We want to the node to show up on the map. For this to happen we have to add the OpenLayers Overlay Data layer to the map.

# go back to 
admin/structure/openlayers/maps
# and 
edit the Geofield formatter map
go to vertical tab "Layers and styles" 
# and 
in the "overlay" table tick the checkboxes "Enabled" and "Activated" 
of your newly created OpenLayers Data Overlay
# and 
hit "Save"

If you go to the page you've just created. You should see a map with you nodes showing up.

Step 7: Cluster strategy (Optional)

Cluster Strategy let's you group the nodes to one point on the map for points that are close to each other. This functionality is in OpenLayers module already. We only have to enable it in the Formatter map.

So..

# go to
admin/structure/openlayers/maps 
# and 
edit your Geofield FORMATTER map
click the vertical tab "Behaviors"
tick the "Cluster Features"
tick the "<openlayers data overlay created by views>"
Distance = 20 # pixel distance on the map at the current zoom level
Threshold = 2 # minimal feature count within the "Distance"
Click "Save"

Go to the page you create to show the map and hit 'refresh'. Depending on the zoomlevel your map features / nodes will the clustered into 1 feature.

Note: If you used Devel module to generate nodes, then the Cluster strategy might show unexpected output when it comes to multipoint, polygon and line entries.

Step 8: Pop Up for Features (Optional)

The Pop Up for Features functionality provides a small balloon on the map when you click the feature. It's on the page and vertical tab as the Cluster Strategy functionality.

So..

# go to
admin/structure/openlayers/maps 
# and 
edit your Geofield FORMATTER map
click the vertical tab "Behaviors"
tick the "Pop Up for Features"
tick the "<openlayers data overlay created by views>"
Click "Save"

And that's it!
If you followed all the steps above you should now have a view showing a map using the OpenLayers module. Displaying your nodes with Cluster Strategy and Popup up balloons when you click on the feature in the map.

Comments? Suggestions?
I'll try adding some screenshots soon.

@todo: Add screenshots.

Reacties

I've created a map exactly as you show. But I don't see a way to change the locations once I've placed an icon pin. Suppose I drop it in the wrong location first time and simply want to move it? (using Drupal 7) How would I do this?

I guess if you have an answer for me, please email me because I don't see a place to look for answers to the comments.

Thanks.

Rick
no1there@austin.rr.com

Member since:
1 juli 2010
Last activity:
2 jaar 13 weken

We simply re-drop the pin. So we don't actually move/modify the existing pin.
Our map is configured to allow only one pin. So clicking the map in a different spot, will move the pin.

I know there is a button (plus-sign with arrows) to modify an existing pin, but that doesn't seem to work that well. I haven't tried it with newer versions of the OpenLayers or Geofield module. So handling multi point features could be a problem in this case.

Is there a way to have an attachment or something that lists the location names of the markers on the map and when you mouse over them it triggers the correct tooltip of pop up?

Thanks great tutorial...
Might want to add Mollom to check spam in comments (and add Botcha and Captcha modules). It will get rid of pretty much all spam for Drupal.

Member since:
25 maart 2010
Last activity:
4 weken 2 dagen

We are already using Mollom and it filters most of the spam but sometime something slips through. I've cleaned the mess.

I have done all the steps which you have mentioned, It's all working fine except only one issue. My node is configured to enter multiple locations but in views map it is showing only one point. Also If I draw any rectangle or custom shapes none of the markers are showing for that node on views map.

Please suggest.

Thank you for the wunderfull description. It is working great !

well since I was getting POINTS in the render data like below, I thought I could get a map with points on it...but I only get a map of Africa with NO POINTS ......

array (
  0 => 
  array (
    'projection' => 'EPSG:4326',
    'attributes' => 
    array (
      'title' => '<div class="views-field views-field-title">        <span class="field-content"><a href="/content/starbucks-sb">Starbucks SB</a></span>  </div>',
      'field_location' => '<div class="views-field views-field-field-location">    <span class="views-label views-label-field-location">Location: </span>    <div class="field-content">POINT (-119.7054674 34.4240721)</div>  </div>',
      'name' => '<div class="views-field views-field-title">        <span class="field-content"><a href="/content/starbucks-sb">Starbucks SB</a></span>  </div>',
    ),
    'style' => NULL,
    'wkt' => '<h3>POINT (-119.7054674 34.4240721)',</h3>
  ),

Nieuwe reactie inzenden

De inhoud van dit veld is privé en zal niet openbaar worden gemaakt.
  • Adressen van webpagina's en e-mailadressen worden automatisch naar links omgezet.
  • Toegelaten HTML-tags: <a> <b> <img> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <h2> <h3>
  • Regels en paragrafen worden automatisch gesplitst.
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <c>, <cpp>, <drupal5>, <drupal6>, <java>, <javascript>, <php>, <python>, <ruby>. The supported tag styles are: <foo>, [foo].

Meer informatie over formaatmogelijkheden

Door gebruik van dit formulier accepteert u Mollom's privacybeleid.