Mapping in Drupal using OpenLayers

Mapping in Drupalusing OpenLayers

Peter Vanhee7th April 2011 - drupal.cat

Who am I?

‣ Consumer and contributor to Drupal for over 5 years

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

‣ Independent consultant in Barcelona (@pvhee)

europeancampus.eu

managingnews.com

2010.afghanistanelectiondata.org/maps

maps.ed.gov

What is OpenLayers?

OpenLayers is ...

‣ a framework for building map applications

‣ javascript

‣ open source (BSD licensed)

‣ your escape from Google Maps

What is Drupal?

Modules

‣ ctools

‣ openlayers, openlayers_ui, openlayers_cck, openlayers_views

‣ views

Example

Geo Data

‣ Data with latitude/longitude (point)

‣ CCK Field: OpenLayers WKT or integer

‣ Lines, polygons, ...

‣ Can be anything that is available in Views!

Mapping in 3 steps1. Layers

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

2. Map presetsConfiguration for a single map

3. Map viewsDisplays the map using Views

1. Layer2. Map preset3. Map view

use Views to select data from CCK

1. Layer2. Map preset3. Map view

configure data source to pick up the location

1. Layer2. Map preset3. Map view

pass additional data to the layer

1. Layer2. Map preset3. Map view

use OpenLayers to configure map

1. Layer2. Map preset3. Map view

set map center and bounds

1. Layer2. Map preset3. Map view

configure map behaviors (php + javascript)

1. Layer2. Map preset3. Map view

set layers (tiles and data) and styles

1. Layer2. Map preset3. Map view

use Views to display map

1. Layer2. Map preset3. Map view

select map to display

Step by step

1. Create geodata (CCK)

2. Create data layer (Views)

3. Create map preset (OpenLayers)

4. Create map view (Views)

Improvements

Improvement #1Add map behaviors (Javascript)

‣ Pop Up

‣ Zoom to layer

‣ Clustering

‣ Write your own

Improvement #2

Change layers

‣ Google Maps

‣ MapBox

‣ Create your own via TileMill

Extending via Contributed Modules

‣ From address to location

‣ Save address in node via token

openlayers_geocoder

openlayers_filters

insert map in content

geotaxonomy

geo-aware termsterm with lat/long

https://github.com/developmentseed/openlayers_plus

openlayers_plus

scale points, add tooltips, ...

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_presets()

see openlayers.api.php

Drupal 7

‣ Works! 2.0-alpha1

‣ openlayers_cck geofield

‣ Under heavy development

Links

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

‣ https://github.com/pvhee/openlayers_demo

Thanks!

Contact: Peter VanheeTwitter: @pvhee