victoria web design information architecture (IA)


victoria web design


Drupal CMS Web Development


victoria website Maintenance


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. In the future I plan on writing more tutorials on more advanced mapping topics, such as polygons, using kml files, and other items. For now though, below are the main steps and concepts to understand with OpenLayers:

  1. You want to create or use a content type that has a geocoded address field
  2. With Views, create one Openlayers Data Overlay per content type which fetches the addresses as points.
  3. Create an OpenLayers map linking to this overlay's data.
  4. Finally, create your actual OpenLayers Map display with Views, which shows all of your overlays.

This tutorial in particular covers creating a primary map based on one main content type and also adds an additional layer for a user's profile.

Required Modules:

  • OpenLayers (7.x-2.0-beta9 or higher): OpenLayers, Openlayers UI, OpenLayers Views
  • CTools
  • Views 3: Views, Views UI
  • Libraries
  • Geofield (2.1 or higher)
  • GeoPHP (1.7 or higher)
  • Geocoder (1.2 or higher)
  • Address Field (7.x-1.0-beta5)
  • As a side-note, although you can link to an external library, it's better to put a local copy of the OpenLayers library (OpenLayers-2.13 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. If you have OpenLayers installed and activated, you can use this Drush command to download the library locally: drush dl-openlayers

Step A - Set up Content Type

  1. After enabling the required modules listed above, create a new Content Type, such as an 'Event' 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. This translates the location address above into data usable by OpenLayers (latitude and longitude, essentially)
    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. Feel free to Manage Display for your content type to show this field as OpenLayers.

Step B - Views: Set up OpenLayers Data Overlay

  1. Create a new View called 'OpenLayers Overlay - [your content type]' (or whatever you wish)
    1. Base it on content of type: [your type created above in Step A], unsorted. Uncheck the block and page options as an overlay will be neither. Click 'Continue and Edit'
    2. Create an 'OpenLayers Data Overlay' display from the master
      1. Under Fields, select your geofield field created in Step A.
        • Label: none
        • Formatter: WKT
        • Data Options: Use full geometry
      2. You can add other fields here too such as Title.
      3. Under Format, click on 'Unformatted List' and change this to: OpenLayers Vector Data Overlay and before saving select Override instead of All Displays in the dropdown.
        • Map Data Sources: WKT
        • WKT Field: Content: Geofield
        • Title Field: Content: Title (if you want a title)
    3. You can set the Filter Criteria to show only items that are upcoming, for example if you're using the Date module, select items that are only upcoming, not past.
    4. You do not want a pager, so set this 'Display All Items' or you can limit it to 100
  2. Save this View

Step C - Create OpenLayer map

  1. First make sure OpenLayers is setup properly at admin/structure/openlayers. Is it reading your library properly?
  2. Navigate to Administration » Structure » OpenLayers » Maps (admin/structure/openlayers/maps)
  3. Add a new map, entering info for at least the following:
    • Basics:
      • map title
      • map description
    • Layers & Styles section:
      • Overlay Layers
        • look for the View you just created. Click the enabled and the activated checkboxes.
    • Now save this map and then Edit it again which is necessary so we can apply more settings to the View you chose.
    • Behaviors section
      • 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: Set up OpenLayers Map

  1. Create a new View which will be a page or block containing our mapped overlays. I find using a block gives more flexibility since you can then insert it into other areas on your site.
  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, or give it a clear block name (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 clustered icons for closely grouped markers, boundaries for your map so only a particular area can be browser, full screen maps, custom style markers for each overlay, a map legend (requires: OpenLayers Plus module), and many other options.

Step E (Optional) - Add Another OpenLayers Data Overlay for User Profiles

  1. To create another OpenLayers Data Overlay for user profiles, repeat Step B above 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.
  2. (for Profile content only). To access the username, create a required Relationship to link the Profiles to the user that owns it.
  3. Remember, OpenLayers needs to be made aware that you have a new Overlay, so referring to Step C, you want to go to your OpenLayers Map and select this new Views Overlay as a layer. Since you may have more than one layer now, it makes sense to activate the 'layer switcher' so you can toggle layers on and off.

There you have it. Once you've worked through this and made a few layers, you'll get the idea of how everything relates. OpenLayers has a solid reputation for flexibility despite the multi-level steps. It still appears to be more flexible than Leaflet, which is worth a look at as well. Hopefully sometime soon I'll put up a tutorial on Leaflet as well.