OpenLayers vs. Leaflet

DrupalCamp Vienna, Nov. 2013

The who is who?

Antje Lorch@ifrikSite builderDocumentation

OpenLayers

Josef Dabernig@dasjoAllrounderCommunity

Leaflet

Who are you?● … and why we do this Session

What does the OpenLayers module?

1. Building queries> using Views

2. Configuring maps> Openlayers settings

3. Putting the map(s) on the site > either using Views or OL blocks

What does the Leaflet module?

1. Building queries> using Views

2. Configuring maps> Using the API → hook

3. Putting the map(s) on the site > Views (step 1) or Leaflet GeoJSON (ajax)

What not in OL & Leaflet modules?

•data input, •geocoding•data storage•proximity search

... but other modules do that.

OL other modules and resources

•Geofield 2•Geocoder•OL Blocks•OL Filters•OL Feature Popups•....

Leaflet other modules and resources

•Geofield 2•Geocoder•Leaflet markercluster•Leaflet widget•Leaflet more maps•Leaflet label•....

DrupalStorage – Query – Display

0. Input data: Geofield Openlayers Widget

0. Input data: Geofield Leaflet widget

:( Beta from Nov 2012, doesn't support Geofield 2.x yet!

1. Query: OpenLayers Data Overlay

1&3. Query & Display: Leaflet map

2 OL maps: General Resources

(Base) Layers: maps & tiles

Styles: Markers

2.1 OL Choose or add your map

2.2 OL Configure your map

2.3 OL Map Specific settings

Base Layer

Layers = Data Overlays

Markers per Layer

Initial Zoom level and focus

Behavior: Layerswitcher,Navigation, Tooltps etc.

3. OL Put the map in the site

3 Leaflet Put the map in the site

● Not necessary

2.2 Leaflet Configure your map

● Missing some UI?

/**  * Implements hook_leaflet_map_info().  */function leaflet_dcvie_leaflet_map_info() { return array( 'mapbox dasjo dcvie' => array( 'label' => 'mapbox dasjo dcvie', 'description' => t(''), 'settings' => array( 'minZoom' => 0, 'maxZoom' => 8, 'dragging' => TRUE, 'touchZoom' => TRUE, ... ), 'layers' => array( 'control_room' => array( 'urlTemplate' => 'http://{s}.tiles.mapbox.com/v3/ID/{z}/{x}/{y}.png', 'options' => array( 'attribution' => 'Copyright notes' ) ), ), ), );}

Leaflet maps

3 Alternative: Leaflet GeoJSON

Allows to use an AJAX-Bounding Box Strategy

Requires Views GeoJSON + Patches :(

Recent geofield changes require changeshttps://drupal.org/node/1794848 BBox argument handler fixeshttps://drupal.org/node/1839554

Demo time!

Examples

www.moonunderwater.eu

unesco.nl

unesco.nl

geluidvannederland.nl

geluidvannederland.nl

Base tiles

JavaScript Mapping Libraries

● Leaflet● OpenLayers● d3 / Protovis● polymaps● Modest Maps

My recipe

● Geofield● Leaflet● Views GeoJSON● Leaflet GeoJSON● Leaflet.markercluster (client-side)

or Geocluster (server-side)

.. and more

● Custom base tiles: Tilemill● Custom visualization: d3, JavaScript● Import: Feeds● Proximity search: Geofield, Search API

Location

?