victoria web design information architecture (IA)

Research

victoria web design

Design

Drupal CMS Web Development

Develop

victoria website Maintenance

Launch

Create a Multi-layer Map in Drupal 7 with Openlayers 2.x

There are many tutorials out there for creating maps in Drupal but most of them focus on just one layer on a map. This tutorial is for creating one map with multiple, switchable layers complete with pop-ups and a title. This tutorial covers creating a primary map based on one main content type and also adds an additional layer for a user's profile. This is a lengthy but thorough tutorial and I'll try to add images or a video at some point soon. The basic premise is this: A content type with two complementary fields pass address data to Openlayers which displays those maps on a Views page. Using Views we create one primary map of type 'Openlayers Data Overlay' plus another Page display formatted as a 'OpenLayers Map' which shows the primary map itself. To add layers to the map, you need to create additional Views with just one display of 'OpenLayers Data Overlay'.

Modules:

  • OpenLayers (use 2.0 or higher): OpenLayers, Openlayers UI, OpenLayers Views
  • CTools
  • Views 3: Views, Views UI
  • Libraries
  • Geofield (1.1 or higher)
  • GeoPHP (1.7 or higher)
  • Geocoder (1.2 or higher)
  • Address Field
  • As a side-note, I put a local copy of the OpenLayers library (OpenLayers-2.12 as of this article) into sites/all/libraries for faster rendering. This way your maps don't have to reach out to the OpenLayers site to grab the library.

Step A - Set up Content Type

  1. After enabling the required modules listed above, create a new Content Type and add a postal address field (I'm calling my field: Location) and use the 'Dynamic address form' widget. You can leave the field's settings as default or change as needed. Note that you may include other fields as needed for your Content Type.
  2. Next, add another field called Geofield, of type Geofield and the 'Geocode from another field' widget.
    1. In the settings page for this, under 'Geocode from field' select the name of your previously created postal address field. You can leave the rest of the settings at their default.
  3. Naturally, you'll need to create a few nodes of this content and enter an address. When you view it, you should see a lat and long for the Geofield which has interpretted your location field.

Step B - Views: Set up OpenLayers Data Overlay default map (part 1 of 2)

  1. Create a new View called 'OpenLayers Primary Map' (or whatever you wish)
    1. Base it on content of type: [your type created above in Step A], unsorted. Do not create a block nor page yet. Click 'Continue and Edit'
    2. create an 'OpenLayers Data Overlay' display from the master
      1. Under Fields, select your geofield created in Step A.
        • Label: none
        • Formatter: WKT
        • Data Options: Use full geometry
      2. Under Format, click on 'Unformatted List' and change this to: OpenLayers Data Overlay and before saving select Override instead of All Displays in the dropdown. We don't want this to carry over to the next display we will make later on.
        • Map Data Sources: WKT
        • WKT Field: Content: Geofield
        • Title Field: Content: Title (if you want a title)
    3. You do not want a pager, so set this 'Display All Items'
  2. Save your View

Step C - Create OpenLayer map

  1. Navigate to Administration » Structure » OpenLayers » Maps (admin/structure/openlayers/maps)
  2. Add a new map, entering info for at least the following:
    • Basics:
      • map title
      • map description
    • Layers & Styles:
      • Overlay Layers
        • look for the View you just created. Click the enabled and the activated checkboxes.
    • Save this map and then Edit it again, necessary so we can add one more setting for this particular View.
    • Behaviors
      • scroll down to 'Pop Up for Features' and enable this and select your map.
    • Save this map. We're done here for now.

Step D - Views: Complete View (part 2 of 2)

  1. Returning to the view you created earlier, create a new display of 'Page' or 'Block'. I find using a block gives more flexibility adding it to an existing page.
  2. Format: OpenLayers Map and make sure to override the default display before saving.
  3. For the Style options, under Map, choose the OpenLayers map you just created in Step C.
  4. Create the path for your map's page (make sure you have Clean URLs enabled, as this can cause trouble otherwise) - or set your block's name.
  5. Save your View and take a look at your map. You should see small orange dots (the default marker) representing the nodes you created earlier.

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.

Step E (Optional) - Add Another Map Layer for User Profiles

  1. To create another openlayer map for user profiles, we have to create a new View but instead of looking at Content, we want Profiles. This assumes you already have a field of location and a geofield on your Profile type. Here you won't need to create two displays, just the one.
  2. Create a new view called 'OpenLayers Overlay - Profiles' and have set it to Show: Profiles, of type: [your profile type] and unsorted. No page nor block. Press Continue and Edit.
    1. create an 'OpenLayers Data Overlay' display from the master
      1. Give it a title. This will show up in the map layer switcher on your actual map.
      2. Under Fields, select the geofield of your profile.
        • Label: none
        • Formatter: WKT
        • Data Options: Use full geometry
      3. (Optional and for Profile content only). To access the username, create a Relationship to link the Profiles to the user that owns it.
      4. Under Format, click on 'Unformatted List' and change this to: OpenLayers Data Overlay and before saving select Override instead of All Displays in the dropdown.
        • Map Data Sources: WKT
        • WKT Field: Content: Geofield
        • Title Field: User: Name (available if you created a relationship and added that field)
      1. You do not want a pager, so set this 'Display All Items'
    2. Save your View
    3. Navigate to Administration » Structure » OpenLayers » Maps (admin/structure/openlayers/maps) and edit your map
      1. In Layers & Styles > Overlay Layers, find your new Views map. Check: Enabled, In Switcher. Don't make it activated because the default map will already be activated.
      2. In Behaviors > Pop Up for Features, select your new Views map.
      3. Save.