Do you choose Openlayers or Leaflet to generate maps on your websites because that's what you always choose? Is one better than the other? We will take a few use cases and show how they could be build with both Openlayers and Leaflet, and discuss what criteria could be to choose either.

1. OpenLayers vs.
Leaflet
DrupalCamp Vienna, Nov. 2013

2. The who is who?
Antje Lorch
@ifrik
Site builder
Documentation
OpenLayers
Josef Dabernig
@dasjo
Allrounder
Community
Leaflet

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

4. 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

5. 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)

6. What not in OL & Leaflet modules?
•data input,
•geocoding
•data storage
•proximity search
... but other modules do that.

7. OL other modules and resources
•Geofield 2
•Geocoder
•OL Blocks
•OL Filters
•OL Feature Popups
•....

8. Leaflet other modules and resources
•Geofield 2
•Geocoder
•Leaflet markercluster
•Leaflet widget
•Leaflet more maps
•Leaflet label
•....

9. Drupal
Storage – Query – Display

10. 0. Input data: Geofield Openlayers Widget

11. 0. Input data: Geofield Leaflet widget
:( Beta from Nov 2012, doesn't support Geofield 2.x yet!

12. 1. Query: OpenLayers Data Overlay

13. 1&3. Query & Display: Leaflet map

14. 2 OL maps: General Resources
(Base) Layers: maps & tiles
Styles: Markers

15. 2.1 OL Choose or add your map

16. 2.2 OL Configure your map

17. 2.3 OL Map Specific settings
Base Layer
Layers = Data Overlays
Markers per Layer
Initial Zoom level
and focus
Behavior:
Layerswitcher,
Navigation,
Tooltps etc.

18. 3. OL Put the map in the site

19. 3 Leaflet Put the map in the site
● Not necessary

20. 2.2 Leaflet Configure your map
● Missing some UI?

21. /**
* 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

22. 3 Alternative: Leaflet GeoJSON
Allows to use an AJAX-Bounding Box Strategy
Requires Views GeoJSON + Patches :(
Recent geofield changes require changes
https://drupal.org/node/1794848
BBox argument handler fixes
https://drupal.org/node/1839554

23. Demo time!

25. Examples

26. www.moonunderwater.eu

27. unesco.nl

28. unesco.nl

29. geluidvannederland.nl

30. geluidvannederland.nl

33. Base tiles

34. JavaScript Mapping Libraries
● Leaflet
● OpenLayers
● d3 / Protovis
● polymaps
● Modest Maps

37. My recipe
● Geofield
● Leaflet
● Views GeoJSON
● Leaflet GeoJSON
● Leaflet.markercluster (client-side)
or Geocluster (server-side)

39. .. and more
● Custom base tiles: Tilemill
● Custom visualization: d3, JavaScript
● Import: Feeds
● Proximity search: Geofield, Search API
Location

42. ?