OpenLayers vs. Leaflet DrupalCamp Vienna, Nov. 2013
Jul 16, 2015
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
?