Last updated June 15, 2012. Created by itserich on June 10, 2011.
Edited by ifrik, naught101. Log in to edit this page.

Modules Used
CCK - 6.x-2.8
Chaos Tools - 6.x-1.x-dev
OpenLayers - 6.x-2.x-dev
OpenLayers Geocoder - 6.x-2.x-dev
Views - 6.x-2.11

Goals

This tutorial demonstrates some features of OpenLayers. I had been searching for a way to sort nodes by proximity and chose OpenLayers. Two other proximity modules that I am aware of are Location and Geo. I did learn how to use Location but it appears to require use of a zip code table in the database and required more data be input to locate an address than Geo and Openlayers which use an API. Geo may be a fine option but I could not figure out how to make it work, and OpenLayers has Views and Rules integration which may or may not exist with Geo.

This tutorial demonstrates the following features:

  • Adding location to a node using OpenLayers and OpenLayers Geocoder
  • Viewing a map within the node
  • Viewing an aggregate map with node markers

Instructions

Setting up your content type:

  • Create a new content type, eg. "Map Node". (you can also just do this by adding the fields below to an existing content type)
  • Go to "Manage fields", and add a new field, called "OL Geo Info" or similar:
    Type
    OpenLayers WKT
    Widget type
    OpenLayers Geocoder
  • Go to Display Fields, set both Teaser and Full Node to OpenLayers Map: Default Map

See screen images.

Setting up the data view

For this method, we require two views: the first one aggregates data into a format readable by OpenLayers, the second one displays the open layers map. First we set up the data aggregator view:

  • Go to admin/build/views and create a new Node View, Call it something useful, like "OpenLayers Map Data"
  • Add a filter: Node Type (same as was just created, in this case "Map Node"), and any other filters you want to limit the nodes that are displayed.
  • Make sure your view is set to "display all items".
  • Add a new "Openlayers Data" display to the view.
  • Set the Style to OpenLayers Data
  • Add the WKT Value field, (technically, you can do this with any numerical field, but let's stick to the method...)
  • (Optional) Add any other fields you might want to display on the map (ie. node title, body/teaser).
  • Edit the OpenLayers Data Style options (click the cog icon), and set the map source to OpenLayers WKT, and select the appropriate field: WKT Value.
    (Change this if you've used another method, and want to use eg. numerical lat/long fields)

OpenLayers - Map Preset

Next step is to configure the map.

  • Go to Site Building -> OpenLayers -> Presets -> Add. Create a new map preset, with a memorable name, eg. "My Map"
  • There are four tabs with options to set. The first two are pretty basic - set the options you want.
  • On the layers and styles tab, you probably want to enable at least one background map (eg. OSM, google maps). For some of those maps you'll need an API key. To add an API key, go to Site Building -> OpenLayers -> Layers -> API Keys.
  • Enable your view-based OpenLayers overlay layer
  • On the Behaviours tab, enable any behaviours that you want. You probably want at least "Navigation" and "PanZoom bar". If you want to display more info about your nodes than just their location, then you probably also want to enable the "Pop up" behaviour for your overlay layer.

View 2 - Map Display

This view will display the map that you have just configured.

  • Create a new node type view, call it something like "OL Map Display"
  • Add a Page display. Give it a path, say "my-map", and (optionally) a menu entry
  • Set the style to OpenLayers Map. In the style settings, select your map (You didn't really call it "My Map", did you?)

Results!

If you now go to http://www.mysite.com/my-map you should now be able to see a map of all the nodes with appropriate geographical data. If you enabled the "Pop up" behaviour in your preset, you should also be able to click the map nodes, and get more info about them, including a link to their node page.

Due to the field display settings on the node, you should also have a map on each node page.

IE Troubleshooting
Apparently there are some problems with CSS loading in IE, especially for complex maps. If this happens to you, try the IE Unlimited CSS Loader module.

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

.... allow mw to draw on your experience.
I am looking at a community project to map information points in "my" neighbourhood.

  • I would like to start to use D7, but I noticed that the modules OpenLayers - 6.x-2.x-dev and OpenLayers Geocoder do not exist in a D7 version.
  • I would like to build this project in the spirit of its idea entirely in opnesource - using non-commercial resources - which excludes gmaps.

Sure, the project is more important and so we might have to use gmap - but if it can be avoided by sticking to D6 we will do that.

Any hints and suggestions are welcome as I am in hte research stag of this project. We are are still looking for the name ... so early days.

-----------
Good luck .....
... more recent results of trying Drupal just once are -
www.native-power.de

There is a Drupal 7 version of Openlayers and this is the D7 Geocoder:

http://drupal.org/project/geocoder

I am not using a map right now in D7 so have not kept up to date.