Back to top

OpenLayers map with different style for each content type

The goal of this tutorial is to create an OpenLayers map that displays geo-tagged nodes of different content types, and style each content type with a different marker.

1. Create geodata (map point and textual address)

A common need when geo-tagging content is to have a physical address noted in a textual form along with its corresponding point on a map. OpenLayers can do this with the help of the Geocoder module.

  1. Create a text field (it can't be any other type including text area) for a content type you need geo-tagged that will store the address in a textual form.
  2. Create an OpenLayers WKT (Well Known Text) – Geocoder field for that content type.
    • Under Autocompletion fieldset you'll see all of the text fields available for this content type, including the one created in the previous step. Enable only the one from the last step, that will store the address.
    • Tick the Override option if you expect Geocoder can make mistakes when matching the address users type in with its geo data. I recommend it as I've noticed it doesn't recognize unusual street numbers in some cases (8a for example).
    • Enter [street_address] token into the Content field. This will automatically populate the address field after a user fills in the OpenLayers WKT Search address field.
  3. On the Display fields set the textual address field to display just below the OpenLayers one. This is the order users should fill in the fields, first enter the address into the geocoder Search address field and after the user selects one from the suggestion list the textual address field is automatically populated.
  4. Add the textual address and the OpenLayers fields to every content type you want to appear on the map.

2. Prepare information for the map

OpenLayers module gathers information from views OpenLayers Data displays to show on maps. These views aren't used in the usual way, they aren't the direct displays that show content, they only serve as input for the final views.
Each OpenLayers Data display will be made available to the OpenLayers map Presets in the next step, and there will be an option to choose a different style for each layer. To display different content types with different styles (icons) each content type should have its own layer.

  1. Create a Node views and edit the default display to filter out the content types you want shown on the map, add the Node Title, Body and OpenLayers WKT field formatted with WKT value.
  2. Set the Style of the display to OpenLayers Data. Edit the Style settings and set the Map Data Sources to OpenLayers WKT, WKT field to the Geocoder field where the map point is stored, Title to Node Title and Description field to Body.
  3. Add a new OpenLayers Data display, change its name to something meaningful as you'll need it in later steps.
  4. Override the Filters section and edit the Node Type filter to only select one of the content types you want shown on the map.
  5. Repeat steps 3 and 4 for each content type you want shown on the map.

3. Create icons and styles

  1. Create a different icon for each content type and put it inside your theme folder (it makes the most sense to keep it there), note the icons width, height and path.
  2. On the Styles tab of the OpenLayers settings (admin/build/openlayers/styles) create a new style for one of the content types
    • Set meaningful names and description related to the content type
    • Enter the path to the corresponding icon into the externalGraphic field, don't forget to include the starting "/" (eg. /sites/all/themes/theme_name/map_markers/marker_1.png)
    • Set pointRadius to half the icon width
    • Set cursor to pointer so the cursor changes as expected when hovering over the icon
    • Set correct values to graphicWidth and graphicHeight
    • Set graphicYOffset to the negative value of icon height
    • You can ignore the other options and save the style
    • 3. Clone the style you just created, change the names to match another content type, the icon path and any other related settings that need to be changed for this icon.
  3. Repeat step 3 for each content type you need to style differently.

4. Create the map Preset

  1. On the OpenLayers Preset settings page add a new Preset, set meaningful names, description and map size.
  2. If you want to change the default OpenLayers controls style the easiest way is to use the default images (download from OpenLayers website), edit them to change their color and save inside your theme folder. Then enter the path to where the images are located into the Image Path field on the General Information tab. The starting "/" isn't necessary (but it is recommended), but don't forget the ending "/".
  3. Set the desired Centerpoint and Zoom Level on the Center & Bounds tab.
  4. Skip the Behaviors tab for now and on the Layers & Styles tab enable all the desired Base layers and under the Overlay layers enable all the overlays created an OpenLayers Data display in part 2 of the tutorial. Set the corresponding style for each overlay and Save the Preset.
  5. Now all the layers we enabled in the last step become available under Behaviors tab, enable them all if you want the popups to appear on icon clicks, enable any other behavior you want and Save the Preset again.

5. Create views to display the map

  1. Create a Node view, filter out the content types you want displayed on the map.
  2. Set the display Style to OpenLayers Map and under its settings choose the Preset created in part 4.
  3. Add a display of the desired type (most likely Page or Block), set the path if it's a Page display and Save the view. Visit the page and you'll see the map we just created.

OpenLayers map with different icon for each content type