36
Mapping in Drupal using OpenLayers Peter Vanhee 7th April 2011 - drupal.cat

Mapping in Drupal using OpenLayers

Embed Size (px)

DESCRIPTION

https://github.com/pvhee/openlayers_demo

Citation preview

Page 1: Mapping in Drupal using OpenLayers

Mapping in Drupalusing OpenLayers

Peter Vanhee7th April 2011 - drupal.cat

Page 2: Mapping in Drupal using OpenLayers

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)

Page 7: Mapping in Drupal using OpenLayers

What is OpenLayers?

Page 8: Mapping in Drupal using OpenLayers

OpenLayers is ...

‣ a framework for building map applications

‣ javascript

‣ open source (BSD licensed)

‣ your escape from Google Maps

Page 9: Mapping in Drupal using OpenLayers

What is Drupal?

Page 10: Mapping in Drupal using OpenLayers

Modules

‣ ctools

‣ openlayers, openlayers_ui, openlayers_cck, openlayers_views

‣ views

Page 11: Mapping in Drupal using OpenLayers

Example

Page 12: Mapping in Drupal using OpenLayers

Geo Data

‣ Data with latitude/longitude (point)

‣ CCK Field: OpenLayers WKT or integer

‣ Lines, polygons, ...

‣ Can be anything that is available in Views!

Page 13: Mapping in Drupal using OpenLayers

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

Page 14: Mapping in Drupal using OpenLayers

1. Layer2. Map preset3. Map view

use Views to select data from CCK

Page 15: Mapping in Drupal using OpenLayers

1. Layer2. Map preset3. Map view

configure data source to pick up the location

Page 16: Mapping in Drupal using OpenLayers

1. Layer2. Map preset3. Map view

pass additional data to the layer

Page 17: Mapping in Drupal using OpenLayers

1. Layer2. Map preset3. Map view

use OpenLayers to configure map

Page 18: Mapping in Drupal using OpenLayers

1. Layer2. Map preset3. Map view

set map center and bounds

Page 19: Mapping in Drupal using OpenLayers

1. Layer2. Map preset3. Map view

configure map behaviors (php + javascript)

Page 20: Mapping in Drupal using OpenLayers

1. Layer2. Map preset3. Map view

set layers (tiles and data) and styles

Page 21: Mapping in Drupal using OpenLayers

1. Layer2. Map preset3. Map view

use Views to display map

Page 22: Mapping in Drupal using OpenLayers

1. Layer2. Map preset3. Map view

select map to display

Page 23: Mapping in Drupal using OpenLayers

Step by step

1. Create geodata (CCK)

2. Create data layer (Views)

3. Create map preset (OpenLayers)

4. Create map view (Views)

Page 24: Mapping in Drupal using OpenLayers

Improvements

Page 25: Mapping in Drupal using OpenLayers

Improvement #1Add map behaviors (Javascript)

‣ Pop Up

‣ Zoom to layer

‣ Clustering

‣ Write your own

Page 26: Mapping in Drupal using OpenLayers

Improvement #2

Change layers

‣ Google Maps

‣ MapBox

‣ Create your own via TileMill

Page 27: Mapping in Drupal using OpenLayers

Extending via Contributed Modules

Page 28: Mapping in Drupal using OpenLayers

‣ From address to location

‣ Save address in node via token

openlayers_geocoder

Page 29: Mapping in Drupal using OpenLayers

openlayers_filters

insert map in content

Page 30: Mapping in Drupal using OpenLayers

geotaxonomy

geo-aware termsterm with lat/long

Page 31: Mapping in Drupal using OpenLayers

https://github.com/developmentseed/openlayers_plus

openlayers_plus

scale points, add tooltips, ...

Page 32: Mapping in Drupal using OpenLayers

Extending via Code

Page 33: Mapping in Drupal using OpenLayers

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

Page 34: Mapping in Drupal using OpenLayers

Drupal 7

‣ Works! 2.0-alpha1

‣ openlayers_cck geofield

‣ Under heavy development

Page 36: Mapping in Drupal using OpenLayers

Thanks!

Contact: Peter VanheeTwitter: @pvhee