7
                                      drupal




Mapping in Drupal
using OpenLayers

Peter Vanhee
1st October 2011 - DrupalCamp Spain
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 Development      7
                    drupal
6  drupal

                             7
                          drupal




‣ OpenLayers CCK         ‣ Geofield
‣ OpenLayers Geocoder    ‣ Geocoder
‣ OpenLayers Filter      ‣ ?
‣ Geo Taxonomy           ‣ ?
‣ OpenLayers Plus        ‣ ?
‣ OpenLayers Proximity   ‣ ?


                          Note that this list is incomplete
Modules
‣ ctools
‣ openlayers
  openlayers_ui, openlayers_views

‣ geofield
  geoPHP

‣ views
Example
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
Adding geo data




                             with lat/lng fields
with OpenLayers Map Widget

      Data is stored in geofield
And our rendered node
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
1. Layer
2. Map
3. View    use Views to select data from CCK
1. Layer
2. Map
3. View    configure data source to pick up the location
1. Layer
2. Map
3. View    pass additional data to the layer
1. Layer
2. Map
3. View    use OpenLayers module to configure map
1. Layer
2. Map
3. View    use Views to display map
1. Layer
2. Map
3. View

           select map to display
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)
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
Tilemill




      Create your own tiles,
      and render in Drupal
Extending via
Contributed Modules
openlayers_plus
               source: www.europeancampus.eu
                                                  6     drupal




    scale points, add tooltips, ...
               https://github.com/developmentseed/openlayers_plus
geocoder                         7
                                       drupal




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


  !
geocoder      7
           drupal
geocoder      7
           drupal
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_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?
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

Mapping in Drupal 7 using OpenLayers