This tutorial will show you how to display an OpenLayers map on each node that has a location set, in a block or content pane.

The instructions below are based on, and many steps are similar to, the process to create an aggregate map displaying points for all geolocated nodes. It's recommended that you browse that article first, and build your aggregate map first if you are doing so, before proceeding below.

Overview: Displaying an OpenLayers map on each node

  1. Add geolocation data to nodes. This can be done by inputting latitude and longitude coordinates directly, or by using the OpenLayers WKT CCK field or Geo module (see optional modules, below).
  2. Make a data overlay in Views. We will leverage Views to get the data from each node and create an overlay for the map.
  3. Configure a map preset. Using the OpenLayers interface, we will create a full map object, including the overlay made in Step 2. A map preset references settings, layers, styles and behaviors and assembles them into a map.
  4. Make a display in Views. We will create a second view to display the map itself in a block or content pane.

Required modules

Optional modules

You will need to have either CCK's number module, the OpenLayers WKT CCK field, Geo module, or some other method for storing geolocated data.

You will be able to display the resulting map in either a block, or in a Panels content pane.

Building your node map with OpenLayers

First, add geolocation data to some nodes.

  1. Create a field for storing geolocated data in your content type. Options are inputting the latitude and longitude directly in a CCK number field, using the OpenLayers WKT CCK field, or Geo module.
  2. Once you've created your fields, add some nodes with locations.

Second, create a view that will pull the OpenLayers data from each node.

  1. Create a new view of the "node" type.
  2. In the drop-down menu at the top left, select the OpenLayers Data type and add a display.
  3. Select the Style and be sure "OpenLayers Data" is chosen.
  4. Add fields for the node title, geolocation data (latitude/longitude fields, OpenLayers WKT value, etc.), and the node body content. Add the node ID field, and exclude it from the display by ticking the first checkbox.
  5. Next to the Style (OpenLayers Data), click on the cog wheel.
    • Map data sources: This will be either "Other: Lat/Lon Point" or "OpenLayers WKT" depending on your method of storing geolocated data.
    • Select your latitude and longitude fields or the WKT field.
    • Select the node title field and any field you want to use as the description field, such as the node body.
      Selecting Fields on the Style Plugin
  6. Add an argument for the node ID. Under "Action to take if argument is not present," select "Provide default argument," and select "Node ID from URL" below it. Under "Action to take if argument does not validate," select "Display all values."
  7. Add a filter that restricts this view to the appropriate nodes -- such as a particular content type, or nodes in which the geolocation data field (lat/long, OpenLayers WKT, Geo, etc.) is not null.
  8. Add a meaningful title to your OpenLayers Data display, as it will show up in the map preset information in the next step.

Third, create a map preset that will hold the layers, behaviors and styles defining the display of your OpenLayers map.

  1. Go to Site Building » OpenLayers » Preset » Add, or directly to admin/build/openlayers/presets/add. You can also clone an existing map preset.
  2. General information: These settings let you set the description and size of the map. For our purposes, set the width of the map to auto, so that it will expand to the width of the block or content pane in which it is displayed. Set the height to something nonzero, such as 250px. You may also want to set the "image path" to use different map navigations images (pan, zoom, etc.) than the default images; one option is MapBox's dark theme, which you can use by using an image path of http://js.mapbox.com/theme/dark/. You should also tick the final box, "Hide empty map," to suppress the display of a map on nodes with no location information.
  3. Center & Bounds: You will likely not need to set these, as we will set the map to automatically center on and zoom to the individual node one is viewing. You can, if you like, restrict the extent to which people may pan the map by using the "Restrict Extent" setting and drawing a box on the map.
  4. Skip "Behaviors" and move down to Layers & Styles: Here is where you select both the base map and the OpenLayers Data overlay created in the view in step two. Select the map projection of "900913," and enable and set as default at least one of the base layers provided. Below this, tick all three checkboxes next to your overlay (weight, enabled, activated). Scroll back up to the top and save your preset.
  5. Now, visit Behaviors: The map navigation options listed at the top of this page are up to you to determine for your map. In order to have the map center on and zoom to the node one is viewing, check the "Zoom to Layer" option. Select the view you created in step two, which will be appended with _openlayers_1. (This can only be done after enabling it in the "Layers & Styles" section.) Set a zoom level such as 10 -- you will need to experiment to see what zoom level works for you. Save your preset again.

Finally, create a second, different view to generate the OpenLayers map. It is not recommended you use the same view as in step two, but instead create a new one.

  1. Create a new view of the "node" type.
  2. In the drop-down menu at the top left, select either block, or (if you are using Panels module) content pane, and add a display.
  3. Select the Style and choose "OpenLayers Map." In the style settings, select the map preset that you created in step three. Save your view.
  4. Add the block or content pane that you've created into your node display through the blocks or Panels interfaces, and you'll have a map displayed on each node.

Comments

rahulbot’s picture

Great tutorial - so helpful! I have a followup question about how to set up a view with multiple layers that each need a different argument.

To be specific - I have a neighborhood page which contains a map of all the places associated with that neighborhood via a node reference on each place. That is working great based on these instructions (I added the first panel argument to the view pane settings argument input)!

However, on the place page I want to have a map that includes all the places in the neighborhood this place is part of, and highlights the place you are looking at with a different icon. Based on the underlying principles of this tutorial, I had the idea to use multiple map layers with unique map styles. So I set up another OpenLayers Data view which selects just one place with a nid argument. Then I set up a map preset that includes the layer for my initial view (which takes in a neighboorhood nid as an argument), and my new layer (which takes in a place nid argument). Then I created a view that uses that preset. However, I can't figure out how to set up the content pane argument inputs on that view to get both the place nid and the node-referenced neighborhood nid into the map preset.

Any advice? Do I need to use contexts as the arguments in that view pane? Hope that description made sense. Thanks.

sco_tt’s picture

Thanks for this great tutorial!

For people using Views 3 and Drupal 7:
In #6 of the second part of this tutorial, remember that Arguments have become "Contextual Filters." I achieved the same results by adding a contextual Filter for "Content:NID" then checking "Provide default value" then selecting "Content ID from URL" in the dropdown.

mgifford’s picture

Would be great to have this documented for Drupal 7. Lots has changed.

@sco_tt - I can find the Content NID reference easily enough, but am unable to find "Provide default value" or "Content ID from URL" anywhere in the Views interface.

kevinquillen’s picture

It should be under Contextual Filters

===========
read my thoughts

mgifford’s picture

I did find it there. Still having trouble getting OpenLayers maps to display in a block with polygons on it mind you. The Contextual filters working just fine for the other blocks (even the Geofield map), but not OpenLayers.

kevinquillen’s picture

Now that I haven't done. Just pins.

===========
read my thoughts

mgifford’s picture

There's an D7 issue #1325446: Views OpenLayers generated map is empty and also an attached feature down there that is attempting to display a polygon in a block.

Anyways, would be great to see a D7 version of this handbook page.

dufferin’s picture

It works pretty well. And there's not much to change for d7 except the term 'contextual filter' replace argument.

I needed to display a map per node, with one only marker for that specific node. Done and working. Using the above steps.

I need another map, to be displayed in a view for Search purpose.
I figured out that I had to create another map and another unique OpenLayer Overlay Data view. Otherwise it doesn't work with the first preset (done as above). You loose the map marker on the node page and on the view page.

So I did create a new Open layer view.
!!!!! In the Advance setting in view, you need to change the machine name from openlayers_1 to something else, otherwise you only have ONE Openlayer to select from in your 'Maps' under Openlayer structure. I advise to give a real name in any case.

Then I did create a page, with fields, filters (some exposed), then I did create an Attachment that is the Openlayers style, with the new Map.
When I go to the page, I have my map displayed (attachment), I have my list of node displayed (page).
On the maps all the markers. corresponding to all the nodes are present.
Fine.

Then if I filter the list using one of the exposed filter, it gives a list result, the map is still here but all the markers as well. They do not match the list.
I tried to add 'nid' on the contextual filter for the Openlayers Data view and field. But no change.

If any of you have input it would be nice. I just need to link my list result to the maps marker...

Hope I make sens.

R-H’s picture

Thanks for the helpful instructions. This is my workflow as of 06-2014.

Views 3.8

1) Create a view with an OpenLayers Data Overlay display. I was finally get it to work with only 1 display, the OpenLayers Data Overlay. It did seem to want me to have another Page display to get more than just the title in the map pop up.
2) Add your fields: Nid, title, address and geofield (I have geofield reading from address)
3) Under Format, Settings add your Map Data Sources.
• The title menu will determine the title in the pop-up and the description menu does the same for the description.
• This is where I was finally able to get the address to appear in the pop-up.
4) Under Contextual Filters, select option "Provide default value" under the field group "When the filter value is NOT available". Then choose "Content ID from URL" in the menu. This will get it to only show the location in your node.

OpenLayers 2.0-beta9

1) Create map
2) In "Layers & Styles," enable and activate the overlay layer you just created in views.
3) In "Behaviors," enable "Pop Up for Features". Choose same overlay layer.
4) In "Behaviors," enable "Zoom to Layer". Choose same overlay layer.

In Panels 3.4

1) Add the map you just created as content to a Pane

NOTE:
I will say it was pretty hard to get the address to appear in the map pop up. Not sure if it was because I only had 1 view and only 1 display. Finally get it to work by creating a 2nd display of page and then deleting that 2nd page display.

zwerg’s picture

In my case a block map is empty while using contextual filters (nid). Trying to change the output to "Geofield map" works fine.

Does sb know why the OL block map doesn't work? A page view with all elements works fine...

Maybe there is an error using taxonomy terms? I use different taxonomy terms (from the same vocabulary) instead of different content types.

(D7.32, views 3, OL 2)