victoria web design information architecture (IA)

Research

victoria web design

Design

Drupal CMS Web Development

Develop

victoria website Maintenance

Launch

Create a Drupal 6 Map with OpenLayers 2.x

OpenLayers is a tool for putting interactive maps online, displaying markers and map tiles from almost any source. OpenLayers is a pure JavaScript library for displaying map data in most modern web browsers, with no server-side dependencies. This article describes how to use the Drupal module OpenLayers to create a map displaying markers which will be taken from a node's CCK field.

Required Modules

Step A - Set up your Content Type (part 1 of 2)

  1. After enabling the required modules listed above, create a new Content Type consisting with one field that is the OpenLayers WKT type. You may include other fields as needed for your Content Type but for this tutorial to work, I'm assuming you have a Title, Body and an OpenLayers WKT field.
    1. For the Widget Type for the CCK field, choose 'OpenLayers Geocoder' which allows users to type in an address, OpenLayers will autocomplete and provide a detailed match which will then be plotted on the map as a point.
    2. enable zoom and set zoom level to 8
      1. (note: we will need to come back to this screen to set our default map name)
    3. address field: above

Step B - Set up your View (part 1 of 2)

  1. Create a new View
    1. Set your filters to choose only published nodes and choose your Content Type that uses the OpenLayers WKT field type
    2. Select 'OpenLayers Data' as the display
    3. choose 'OpenLayers Data' as the style
      1. update the Default Display when saving this style
      2. Select the first field as your OpenLayers WKT field (whatever you called that CCK field for your Content Type)
        • Label: none
        • Format: WKT value
      3. Select another field to be the node's title
      4. Select another field to be the node's body (You have some options here such as trimming the body content to 100 chars or something. The fields here will show up in the bubble over the map marker. You could also select an Image CCK field instead of the body if you had an image field)
      5. click on the gear icon beside style and select:
        • Map Data Sources: OpenLayers WKT
        • Title: your title field (or choose another field if appropriate)
        • Description: body (again, choose something else like an Image CCK field if you have one)
  2. Save your View

Step C - Set up your OpenLayers Map Preset

  1. Navigate to Site Building > OpenLayers > Presets (admin/build/openlayers/presets)
  2. Create a new Preset
    1. General Information:
      • enter a machine name
      • enter a title
      • it's a good idea to write in a Preset Description
      • Width: auto (you can set a specific pixel width if you like for your map)
      • Height: 400px or whatever suits
    2. Center & Bounds:
      • center your map
    3. Behaviors:
      • attribution
      • pop-up (note: no layer can be selected yet, so we'll have to come back here after we save this info we're entering)
      • drag-pan
      • pan-zoom
    4. Layers & Styles:
      • Map Projection: 900913
      • Display Projection: 4326
      • Base Layer: choose at least one of OSM Mapnik (enabled and default); Google Maps Normal (enabled)
      • Overlay Layers: select the View you created earlier in Step B. (enabled and activated)
    5. Return to Step 3 above (Behaviors) and under Pop-up there should be a layer for you to select now. If not, save this page and return to this area to check again
  3. Save the page and click on the Settings tab
  4. Select your map as the OpenLayers Default Preset

Step D - Complete your View (part 2 of 2)

  1. Return to the view you created.
  2. Create a new display of 'Page'
  3. set the Style to: OpenLayers Map and override the default display before saving. Map Preset will be the preset you just created in Step C above
  4. Create a path for your map's page (make sure you have Clean URLs enabled, as this can cause trouble otherwise)

Step E - Complete your Content Type (part 2 of 2)

  1. Return to your Content Type that you're using the OpenLayers WKT field on, edit that field and for the Input Map Preset, choose your map.

That's it. You should now have the ability to create a node, place a marker on the map and have a collection of node markers show on one map. There are other options you can try in the OpenLayers Preset, such as cluster icons for tightly grouped markers, boundaries for your map so only a particular area can be browser, full screen maps. The list goes on.

drupal, tutorial