Drupal Views with Openlayers 3.0-beta1

The new beta of the Openlayers module brings some much needed updates to the project though the way it works with views is a little different from the previous version. After spending half a day working it out here are my step by step notes for creating a map based on latitude/longitude stored against a node using the location module. Feel free to re-use, copy, and modify the below:

Modules

1. Enable the following modules:

  • Openlayers, Openlayers Block, Openlayers Block Switcher, OpenLayers Contextual Links, OpenLayers Examples, OpenLayers Geofield, OpenLayers Services, OpenLayers UI, OpenLayers Views
  • Location, Gmap, Location Entity, Node Locations
  • GeoJson
    (as well as any other required modules such as Views & CTools)

Install the Openlayers library (I’m using version 3.2.1)

Content Types

2. Setup a content type with location fields, the important part here is latitude & longitude. (How you get the lat/long is up to you, I’m using a map but you could Geocode this if needed.)

Views

3. Create a new view of content and add a display of a Feed. Set the format to GeoJSON Feed and add in your fields for title, latitiude, longitude & description. Under Format settings, map the Fields to the Data Sources.

Make sure the display style for latitude and longitude is set to ‘Decimal Degrees’.

Untitled-4

(In previous versions of OpenLayers you would create an OpenLayers Data layer – I’m not sure if this method still works however this is where my example differs from other tutorials.)

Openlayers

4. Go to Structure > Openlayers > Layers

Add a new layer, give it a suitable title and click continue. Set the layer type to be Vector and choose the source to be the views feed that you just created.

Untitled-5

Continue with the defaults until you have a completed layer.

Maps

5. Go to the maps tab and add a new map. Give it a suitable name and click continue.

On the map settings page you can set the maps default position, zoom & expose it as a block. (If the map doesn’t appear you most likely haven’t installed the Openlayers library in the sites/all/libraries folder).

On Layers and Sources you need to select your data layer plus a mapping layer, in this case I’m using Google Maps: The data layer is the one we created above.

Untitled-6

The next tab allows you to add controls such as Zoom and Full Screen.

Interactions allows dragging, mouse wheel zoom etc.

Components allows additional options such as popups – for instance someone can click on a popup to see the title and description (that we added in the view).

Finally the Preview tab will show you the map with the markers – if it doesn’t, check all of the settings on the previous tabs as well as the preview of the GeoJSON in the View. If you get stuck at any point check some of the examples in both Openlayers & Views and compare the settings/outputs against what you have.

Components

6. To get the popup to work you will need to go back to Structure > Openlayers and click on Components. Add the component as a popup, select the layer as the view you created.

Untitled-7

You can then edit the components section of your Map and select this Popup.

Untitled-8

Blocks

7. Finally go to blocks and move the map block onto the region that you want it to show.

If the map doesn’t show as it didn’t for me set a height to the content class within the block e.g.

#block-openlayers-block-1f73a9b8-mapblock .content{
 height:500px;
} 

This should be everything you need to get Location + Views + Openlayers working in Drupal 7x.

Leave a Reply

Your email address will not be published. Required fields are marked *