Basic setup of Drupal 7 + OpenLayers + Geofield + Views 3
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.
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
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
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
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:
- a page showing the maps,
- 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.
# 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.
# 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.
I'll try adding some screenshots soon.
@todo: Add screenshots.