This document discusses using the OpenLayers mapping framework with Drupal. It introduces OpenLayers and describes how it can be used to add mapping capabilities to Drupal. The key steps are to add geospatial data using the Geofield module, create maps using the OpenLayers module, and display maps through Views. Additional modules like Geoserver can integrate external map services with Drupal. The document provides examples and discusses ways to customize maps through OpenLayers modules, code, and contributed projects.

1. 7
drupal
Mapping in Drupal
using OpenLayers
Peter Vanhee
1st October 2011 - DrupalCamp Spain

2. 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

3. What is OpenLayers?

4. OpenLayers is ...
‣ a framework for building map
applications
‣ javascript
‣ open source (BSD licensed)
‣ your escape from Google Maps

5. www.europeancampus.eu

6. www.managingnews.com

7. maps.ed.gov

8. Under Development 7
drupal

9. 6 drupal
7
drupal
‣ OpenLayers CCK ‣ Geofield
‣ OpenLayers Geocoder ‣ Geocoder
‣ OpenLayers Filter ‣ ?
‣ Geo Taxonomy ‣ ?
‣ OpenLayers Plus ‣ ?
‣ OpenLayers Proximity ‣ ?
Note that this list is incomplete

10. Modules
‣ ctools
‣ openlayers
openlayers_ui, openlayers_views
‣ geofield
geoPHP
‣ views

11. Example

12. Geo Data
‣ CCK Field: ‣ Data with ‣ Can be
geofield latitude/ anything that is
supports points, longitude available in
lines & polygons (e.g. integers) Views!
field storage input field type

13. Adding geo data
with lat/lng fields
with OpenLayers Map Widget
Data is stored in geofield

14. And our rendered node

15. Mapping in 3 steps
1. Layer
Services: Google Maps, MapBox, ...
Files: KML, XML, ...
Drupal nodes via Views
2. Map
Configuration for a single map
3. View
Displays the map using Views

16. 1. Layer
2. Map
3. View use Views to select data from CCK

17. 1. Layer
2. Map
3. View configure data source to pick up the location

18. 1. Layer
2. Map
3. View pass additional data to the layer

19. 1. Layer
2. Map
3. View use OpenLayers module to configure map

23. 1. Layer
2. Map
3. View use Views to display map

24. 1. Layer
2. Map
3. View
select map to display

26. Step by step
Add geofield (Field)
1. Create data overlay (Views)
2. Create map (OpenLayers)
3. Render map style (Views)

27. Improvements

28. Map Behaviors
‣ Pop Up
‣ Zoom to layer
‣ Cluster
‣ Write your own
(javascript)

30. Change Layers
‣ Google Maps
‣ MapBox
‣ Create your
own (e.g. via
TileMill)

32. Geoserver
1. Drupal outputs WFS
via Views
2. Geoserver reads WFS
and creates map
3. Openlayers reads
Geoserver map,
displays and
facilitates interaction
! 6 drupal
http://drupal.org/project/wfs
http://geoserver.org

33. Tilemill
Create your own tiles,
and render in Drupal

34. Extending via
Contributed Modules

35. openlayers_plus
source: www.europeancampus.eu
6 drupal
scale points, add tooltips, ...
https://github.com/developmentseed/openlayers_plus

36. geocoder 7
drupal
‣ From address to location
‣ Use geocoder services (e.g. Google
Geocoder)
‣ Can take values from Address Field or
any other text
!

37. geocoder 7
drupal

38. geocoder 7
drupal

39. Would be nice to...
‣ Render live output of geocoding
‣ For Drupal 6, check out the excellent
Openlayers Geocoder by @nuvoleweb
!

40. Extending via Code

41. ‣ 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

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

43. Thanks!
Peter Vanhee
@pvhee

44. Questions?
Drupal + GIS: Convertiendo Drupal en un GeoCMS
Sunday, 4pm, Sala Microsoft plopesc
Importing and syncing content using Feeds Peter Vanhee
Sunday, 12pm, Sala Cenatic pvhee @pvhee