Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

OpenLayers vs. Leaflet

14,084 views

Published on

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.

Published in: Technology
  • Dating for everyone is here: ❤❤❤ http://bit.ly/39mQKz3 ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ♥♥♥ http://bit.ly/39mQKz3 ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

OpenLayers vs. Leaflet

  1. 1. OpenLayers vs. Leaflet DrupalCamp Vienna, Nov. 2013
  2. 2. The who is who? Antje Lorch @ifrik Site builder Documentation OpenLayers Josef Dabernig @dasjo Allrounder Community Leaflet
  3. 3. Who are you? ● … and why we do this Session
  4. 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. 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. 6. What not in OL & Leaflet modules? •data input, •geocoding •data storage •proximity search ... but other modules do that.
  7. 7. OL other modules and resources •Geofield 2 •Geocoder •OL Blocks •OL Filters •OL Feature Popups •....
  8. 8. Leaflet other modules and resources •Geofield 2 •Geocoder •Leaflet markercluster •Leaflet widget •Leaflet more maps •Leaflet label •....
  9. 9. Drupal Storage – Query – Display
  10. 10. 0. Input data: Geofield Openlayers Widget
  11. 11. 0. Input data: Geofield Leaflet widget :( Beta from Nov 2012, doesn't support Geofield 2.x yet!
  12. 12. 1. Query: OpenLayers Data Overlay
  13. 13. 1&3. Query & Display: Leaflet map
  14. 14. 2 OL maps: General Resources (Base) Layers: maps & tiles Styles: Markers
  15. 15. 2.1 OL Choose or add your map
  16. 16. 2.2 OL Configure your map
  17. 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. 18. 3. OL Put the map in the site
  19. 19. 3 Leaflet Put the map in the site ● Not necessary
  20. 20. 2.2 Leaflet Configure your map ● Missing some UI?
  21. 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. 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. 23. Demo time!
  24. 24. Examples
  25. 25. www.moonunderwater.eu
  26. 26. unesco.nl
  27. 27. unesco.nl
  28. 28. geluidvannederland.nl
  29. 29. geluidvannederland.nl
  30. 30. Base tiles
  31. 31. JavaScript Mapping Libraries ● Leaflet ● OpenLayers ● d3 / Protovis ● polymaps ● Modest Maps
  32. 32. My recipe ● Geofield ● Leaflet ● Views GeoJSON ● Leaflet GeoJSON ● Leaflet.markercluster (client-side) or Geocluster (server-side)
  33. 33. .. and more ● Custom base tiles: Tilemill ● Custom visualization: d3, JavaScript ● Import: Feeds ● Proximity search: Geofield, Search API Location
  34. 34. ?

×