Mapping in Drupal 7 using OpenLayers

Mapping in Drupalusing OpenLayers

Peter Vanhee1st October 2011 - DrupalCamp Spain

drupal7

Who am I?

‣ Consumer and contributor to Drupal for over 5 years

‣ Co-founder Youth Agora @youthagora and Nuvole @nuvoleweb

‣ Web consultant in Barcelona @pvhee

What is OpenLayers?

OpenLayers is ...

‣ a framework for building map applications

‣ javascript

‣ open source (BSD licensed)

‣ your escape from Google Maps

www.europeancampus.eu

www.managingnews.com

maps.ed.gov

Under Developmentdrupal7

drupal6 drupal7‣ Geofield

‣ Geocoder

‣ ?

‣ ?

‣ ?

‣ ?

‣ OpenLayers CCK

‣ OpenLayers Geocoder

‣ OpenLayers Filter

‣ Geo Taxonomy

‣ OpenLayers Plus

‣ OpenLayers Proximity

Note that this list is incomplete

Modules

‣ ctools

‣ openlayers openlayers_ui, openlayers_views

‣ geofieldgeoPHP

‣ views

Example

Geo Data‣ Data with

latitude/longitude (e.g. integers)

‣ CCK Field: geofieldsupports points, lines & polygons

‣ Can be anything that is available in Views!

field storage input field type

Adding geo data

with OpenLayers Map Widgetwith lat/lng fields

Data is stored in geofield

And our rendered node

Mapping in 3 steps

1. LayerServices: Google Maps, MapBox, ... Files: KML, XML, ...Drupal nodes via Views

2. MapConfiguration for a single map

3. ViewDisplays the map using Views

1. Layer2. Map3. View use Views to select data from CCK

configure data source to pick up the location

1. Layer2. Map3. View

pass additional data to the layer

1. Layer2. Map3. View

use OpenLayers module to configure map

1. Layer2. Map3. View

set layers (tiles and data) and styles

use Views to display map

1. Layer2. Map3. View

select map to display

1. Layer2. Map3. View

Step by step

Add geofield (Field)

1. Create data overlay (Views)

2. Create map (OpenLayers)

3. Render map style (Views)

Improvements

Map Behaviors

‣ Pop Up

‣ Zoom to layer

‣ Cluster

‣ Write your own(javascript)

Change Layers

‣ Google Maps

‣ MapBox

‣ Create your own (e.g. via TileMill)

set layers (tiles and data) and styles

Geoserver1. Drupal outputs WFS

via Views

2. Geoserver reads WFS and creates map

3. Openlayers reads Geoserver map, displays and facilitates interaction

http://drupal.org/project/wfsdrupal6 http://geoserver.org!

Tilemill

Create your own tiles, and render in Drupal

Extending via Contributed Modules

https://github.com/developmentseed/openlayers_plus

openlayers_plus

scale points, add tooltips, ...

drupal6source: www.europeancampus.eu

‣ From address to location

‣ Use geocoder services (e.g. Google Geocoder)

‣ Can take values from Address Field or any other text

geocoder drupal7

!

geocoder drupal7

geocoder drupal7

Would be nice to...

!

‣ Render live output of geocoding

‣ For Drupal 6, check out the excellent Openlayers Geocoder by @nuvoleweb

Extending via Code

hook_openlayers_behaviors()hook_openlayers_styles()

‣ hook_openlayers_map_preprocess_alter()hook_openlayers_map_alter()

‣ hook_openlayers_layer_types()hook_openlayers_layers()

‣ hook_openlayers_behaviors()

‣ hook_openlayers_styles()

‣ hook_openlayers_maps()

see openlayers.api.php

Links

‣ http://drupal.org/project/openlayers

‣ OpenLayers for Drupal 6 presentation: http://www.slideshare.net/pvhee/introduction-to-openlayers-in-drupal

Thanks!

Peter Vanhee@pvhee

Questions?

Peter Vanhee@pvhee

Importing and syncing content using FeedsSunday, 12pm, Sala Cenatic pvhee

Drupal + GIS: Convertiendo Drupal en un GeoCMSSunday, 4pm, Sala Microsoft plopesc