Basic concept

The OpenLayers module allows to display any content with geo data (node, user, taxonomy terms) as layers on top of base maps (base layers) in map presets. It provides a user interface to configure the styles of this content (color of dots, thickness of lines, highlighting, ...), and the behaviour of the maps (zooming, tool tips, ...).
Layers, map presets, styles and behaviours are stored as objects.
The configurations can be exported to code or included to features with the Features module.
The OpenLayers modules also provides a CCK field for adding geo data to nodes.

Note: In Drupal 6 the map presets are called presets (admin/build/openlayers/presets) but this is changed to maps (admin/structure/openlayers/maps) with the Drupal 7 OpenLayers module.

Example: Display node locations on a map

This example is a step-by-step manual for displaying the locations of several nodes on a map.
This manual is relevant for Drupal 6, but important difference with OpenLayers in Drupal 7 are noted until there is a dedicated Drupal 7 manual.

Required modules

  • OpenLayers: OpenLayers, Openlayers UI, OpenLayers Views, OpenLayers CCK
  • CTools
  • Views: Views, Views UI
  • CCK: Content, Number

Note: In Drupal 7, the OpenLayers module focuses on displaying data and therefore does not provide its own input field anymore. You can use the Geofield module for inputting geo data.

Overview of the main steps

The following four steps switch between Views and OpenLayers module and back.
The order of these steps is important and cannot be changed.

  1. Add geo data to node. You can add geo data to a node with the OpenLayers CCK field, but you can also use other modules like Geofield.
  2. Make a data overlay layer in Views.
    1. Create a new view.
    2. Add appropriate filters (example: published, content type)
    3. Add your geofield, a field for title, a field for description
    4. Change the Format to "OpenLayers Data Overlay"
    5. Choose your Map Data Sources from the fields you added
    6. Add a new display to your view: choose "OpenLayers Data Overlay"
    7. Save your view.
  3. Configure a map preset. Create a full map object in the OpenLayers admin interface.
    1. Create a base map. Start by cloning the "Default Map"
    2. On the "Layers & Styles" tab, locate the "Overlay layers" section at the bottom of the page, and you should see the view overlay display created in the previous step. Check the boxes for enabled and activated
    3. Optionally add behaviors for the map
  4. Display the map through Views.
    1. Edit your view that contains the "OpenLayers Data Overlay" created in the second step.
    2. Create a second view display (page, content pane, block)
    3. Change the Format of only your new display to "OpenLayers Map"
    4. From the "Map" drop-down, select the map created in the previous step.

Step-by-step instructions

1. Add geo data to node

The first step is to create a mechanism for storing geo-related data. Geo data can come in different formats (e.g longitude and lattitude, well-known text WTK) or be entered directly as points on a map. In order to create maps with the OpenLayers module, it does not matter in which format the data is entered.
In this example we create two CCK number fields, (1) one to store longitude (2) a second to store latitude. Alternatively, you can also use the the OpenLayers WKT Widget, or Geo module or other options.

  1. Add two number fields to your content type for latitude and longitude. Set their type to float.
    Adding Longitude
  2. Users now can add content with geo data.
    For the sake of this manual you will need to add at least one node in order to have content that can be displayed.
    Adding a Node

2. Make a data overlay layer in Views

The OpenLayers module adds a plugin to Views to create OpenLayers Data overlays. This view display will not actually be visible, but serves to pull the required data from the nodes. It also allows you to add filters, arguments and relationships to the data you want to display on the final map, as well as the number of locations to be displayed. (Please see the Views documentation for more details on how to use Views.)

  1. Add a new Node View.
  2. Add a OpenLayers Data display.
  3. Add fields that contains the geo data. Optionally you can add a field that contains the name and a description of this location.
    In this example you need to add the following fields:
    • Content: Latitude
    • Content: Longitude
    • Node: Title, and
    • Node: Body.
  4. Edit the settings of the OpenLayers Data style.
    In the style settings of OpenLayers Data, you define in which format the geo data is provided, which fields contain the geo data, and optionally the title and the description.
    • In this case, choose Other: Lat/Lon as Map Data Sources, then appropriate the Latitude and Longitude fields in the pull-down menus that appear underneath.
    • Choose Node: Title as title field, and Node: Body as description.
      Selecting Fields on the Style Plugin
  5. Add a meaningful title for your display in order to recognize it in the next step.
  6. Save the view.

3. Configure a map preset

A map preset is a collection of settings, layers, behavior, and styles that define an OpenLayers map. It is called preset in Drupal 6, but will be renamed to maps in Drupal 7.

  1. Go to Site Building » OpenLayers » Preset , and either add a new preset or clone an existing one. (Note: Make sure you have enabled the "administer openlayers" user permission.)
  2. Configure your map preset.
    • The General Settings allows to change title, description, size of the map as well as other map specific settings.
    • Center and Bounds allows you to determine where the map will start from: on which point it will center and at which zoom level it will display initially.
    • Behaviors are events and functions that can be added to the map, e.g whether or not you want to display tool tips, a bar to zoom in etc. Some of these options fulfil similar functions, so they might not work well together.
      • In this example, locations have a title and a description so add a Pop up to add clickable pop up to your final map.
    • In Layers and Styles you can choose a base map (base layer) that will act as the background of your map.
      It is also possible to add several layers here, order them and choose whether they should be initially enabled.
      • Add the Overlay layer that you created in step 2.

      Setting up layers

  3. Save your preset.

4. Display the map through Views.

Make a second view display that is used to actually display the map.
If you have changed the number of items to display, or used arguments and relationships in the OpenLayers Data overlay then these need to be present in this display as well.
This View display can be in a new view or part of the same view as the OpenLayers Data display. Keeping both displays together has advantages if you have used filters etc. as long as you ensure the necessary overrides.

  1. Add a display in which your map will be displayed. In most cases this will be a page, content pane or block.
    For this example add a page display.
  2. Choose the OpenLayers Map Style. If you used the same view as before, make sure you use Override here.
    Setting up display view
  3. In the Style settings, choose the map preset you created in step 3.
  4. Set a path for your new page. If you created a block or content pane you need to add them to a region later.
  5. Save your view.

You now can see your page at its path.
Finished Map

Other examples

See more OpenLayers Handbook pages for more help, e.g. how to create a map to display on each node.

Comments

WigglyKoala’s picture

I had a bit of a problem getting the markers to show up. I realised I needed to set a filter of node: type = story. Then worked perfectly. Love this module!

jomski’s picture

I did everything the tutorial said to do and the markers for the nodes did not still show up even after setting filter to story.
I'm using a clean install drupal with only the necessary modules required for openlayers to work.
Any pointers into something I am missing out? Settings in the presets?

maddmatt’s picture

I got stuck at Add Node View, nothing in the Advanced Help or anywhere else for that matter!!

WigglyKoala’s picture

On the left of the views UI it will say :

defaults
Openlayers data
then there is a drop down box with page in it click add display.

As it says Please see the Views documentation to understand this terminology better. A good understanding of views makes using this a lot easier.

itserich’s picture

Which view is supposed to have a filter?

I tried to filter for the node type which contains the longitude and latitude on a) both views and b) each view separately, and no icon.

Is there even supposed to be an icon? Ugh.

itserich’s picture

Check the end of the comments for two simple corrections.

I spent days trying to figure out a proximity module and am hopefully halfway there.

Plenty of people must have figured this out, please post comments.

R.J. Steinert’s picture

See the openlayers_proximity project.

Be well,
R.J. Steinert III
RjSteinert.com

"Happiness is the process not the place."
-Diener

digitalclover’s picture

I'm having an issue towards the very end of this tutorial. After I create the "Page" display, and set the style to "OpenLayers Map"; the "Field" selection becomes grayed out and states, "The style selected does not utilize fields." Because of this, it shows a blank map when I go to the view page location. Is there something I'm missing?

geraldito’s picture

same happend to me. after changing Style to "OpenLayers Data" in display "OpenLayers Data" everthing workes fine.

baal32’s picture

Sorry, this is a rather dense question... I'm reading the documentation but I can't seem to figure this out - is OpenLayers for presentation only? I mean, if I want users to be able to select a location on a map to be associated with a node, does OpenLayers handle this?

I can get the map to display but clicking on it when creating or editing a node does nothing at all....

mattcasey’s picture

check out OpenLayers Geocoder - contains a CCK widget

davidhk’s picture

This tripped me up for a while - I couldn't get any points to show on the map. Finally realised that 'Map Data Sources:' doesn't have any default value, and you must click 'Other: Lat/Lon point' to get the points to show up.

itserich’s picture

Is that in the first or second view?

And is 'Map Data Sources' a Field, in the basic settings block, somewhere else?

tmcw’s picture

Please post on the OpenLayers Issue queue with any bug reports and support requests. We cannot provide support on Book Pages.

MrFezziwig’s picture

Hi,

I've installed the OpenLayers module, along with CKK and Views, but I'm not sure how to add a map to a page. I've created a content type for OpenLayers, but when I add that to a page I don't see a map. (If I'm logged in as the admin and press View, I don't see it; however, I see it when I press Edit. So, I know the map is working somewhere.)

Am I suppose to create a view? If so, can someone please tell me how?

Cheers

tmcw’s picture

Please post on the OpenLayers Issue queue with any bug reports and support requests. We cannot provide support on Book Pages.

jomski’s picture

Hi,
can anyone help me out here? I'm using openlayers v1 and I would like to restrict the map to just the continent of Africa for example. I've looked through the settings for the module and I cannot seem to come up with a way to do this. can anyone point me in the right direction?
Thanks

WigglyKoala’s picture

Not used version 1 but with 2 the Restrict extent settings are in the presets center & bounds you have to enable it then shift drag on the example map to set it

mattcasey’s picture

In Openlayers 2, you can also restrict zoom in the configuration when you clone one of the default layer types.

itserich’s picture

Ultimately, I did see a map, but no marker. So, not sure if it worked or not.

itserich’s picture

FYI, these simple changes worked for me.

In step 2, steps 3 & 4 should be reversed. The OpenLayers Data Style should be changed and then the fields are available to be changed.

During Step 2, a filter should be added for the node type of whatever node type was used to input the lat / long.

In setting up the Centerpoint in a preset map, enter it as long / lat. I think the standard is lat / long.

Also, my icon is an orange dot. Beautiful orange dot.

kapayne’s picture

Sooo great - where do I send beer?

Gimmickless’s picture

While the tutorial is great for posting a single point on a single map in a single node, it's not that clear as to how multiple points can be posted on the same map. I'm still new to Drupal, so most of this probably is my inexperience.

WigglyKoala’s picture

You need to create a view with some extra filters in it. such as Content type: story.

Then it will pull all contents which are a story content type together in this new view and then make a new map preset if you want. After youve mastered Views you will have a better understanding of how to use openlayers.

Balbo’s picture

Why is ctools in the "Required Modules"?

kirsta’s picture

Great initial overview. Thanks!

drupalmaster’s picture

Hello;

Good I like it

Medart’s picture

Hello;

I just finish an application using drupal and openlayers with mapserver postgis
if you are interessting i will put a tutorial of Drupal 7.0 and OpenLayers 7.x.1
ti show how we can add a map using WMS service and add Style and Multiples Layers

See You Soon ;)

jayxdev’s picture

Thx ! Your website doesn't work ! :/

Medart’s picture

Hello ! yes my website is down for some construction i will put the tutorial in a new blogger and give you the link sooon

naught101’s picture

This tutorial works almost exactly the same with drupal 7, with some slight changes to the screenshots. The only real differences are that the OpenLayers UI is now at admin/structure/openlayers, and the "presets" are now called "maps"

ashii’s picture

asanchez75’s picture

great! thanks a lot!

jebbushell’s picture

quickstart@qs10:~$ drush dl openlayers_geocoder --select
No release history available for openlayers_geocoder 7.x. [warning]

jevans337’s picture

I am converting an Openlayers 6.x-1.x compatible custom module to the 6.x-2.0 version of the Openlayers module. I quite frankly struggling with the significant differences in the OL module and how that affects my custom module.

I am not creating a custom node as I am calling a Web Serviec and retrieving a set of coordianates for an object and a set of polygons that are postioned around the object. I have finally gotten the presets reconfigured so I can see the map on my page when I render it but now I need to add in the 'features' (points and polygons to a vector layer on top of my preset map. I have read through the documentation and find that the phrase "convert your layers and other code to the new format" a bit lacking in substance.

Does anyone have an example or can point me to an example of a custom module, not creating a new node type and not using views, that can show the actual code used to generate the preset, the vector layer and the features to add to the vector layer all of which gets rendered on a page using the openlayers_render function?

Thank you,

Jeff

lucy’s picture

Hi,

I'm able to output the map with nodes positions on it, but it I would like to add some more fields output to the bubble displayed after clicking the marker (more than just a title and description)
I guess, that the variables appearing on the data view Format Setting in Attributes and Styling section are for that, but the description is a bit confusing to me. It has something to do with Openlayers -> Styles or should I output them somehow in theme?

lucy’s picture

  1. Creating custiom .js in theme
  2. Registering it in .info file
  3. Using code from http://drupal.org/node/844960#comment-5074702 in it where extra_field is taken from {$extra_field}
natureofdorset’s picture

Can I use relationships to bring my location data from one content type to the one I want to map? I have a node type of locations containing the longitude/latitude for each location. I then have a node type of occurrences, each occurrence having a different location. I want to map occurrences on a single map but using the long/lat contained in the locations node. I have joined these two files using a relationship. I have a view that displays exactly what I want but in a table form (ie all the occurrences with their locations and co-ordinates) - can I use Open Layers to turn that into a map?

[Please say 'yes' lol as I can't find any other way that seems likely as Gmap doesn't do it!]

Thanks

Peter

mikenn’s picture

If your markers are not showing, may be like me you had a multi-language site without "Clean URLs" being installed.

See:
Broken image of marker in map when Drupal translation paths are used. http://drupal.org/node/1404912

openlayers tries and fails to get the image, e.g.:
localhost/?q=sites/all/modules/openlayers/themes/default_dark/img/marker-blue.png

The solution is to either apply Clean URLs (as I did) or install the patch at comment 7.

It always pays to check your logs, or have drupal devel show error messages in the UI.

MatthijsG’s picture

If you're looking how to change the format to "OpenLayers Data Overlay" (step 2, sub 4), see this screenshot ..

http://drupal.org/files/issues/Picture%204_1_26.png

Maybe this should be described beter.

(source: http://drupal.org/node/1111298#comment-4515888)

======
There are 10 people who can count binary
They who can and they who don't

giovannirinaldi’s picture

i don't understand how to use 'element_id' parameter! what is its purpose?
Thanks