Getting Started with OpenLayers

Быстрый старт с OpenLayers

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 but this is changed to maps with newer versions of 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

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 for 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, created in the first 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 to CCK number fields to store longitude and lattitude, but 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.
  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 a new display 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.