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.
Easily Create Maps in Drupal
with Leaflet
May 14, 2014 - Amber Matz - @amberhimes
!
Slides:
http://www.slideshare.net/agent...
Hi! I’m Amber.
Lullabot / Drupalize.Me 	

@amberhimes
Easily Create Maps in Drupal
with Leaflet
http://drupalize.me/series/mapping-leaflet
Drupalize.Me Series:
Mapping with Leaflet
Mapping in Drupal
‣ Location Storage
‣ Mapping library
‣ See comparison chart at:
• https://drupal.org/node/1704948
Geofield
‣ Location storage module
‣ Provides a new field type called Geofield
‣ Provides widgets for entering many types of
...
Leaflet
‣ A lightweight mobile-friendly javascript mapping
library
‣ A Drupal contrib module
‣ Developer API available
Installing Geofield
‣ Download Geofield, GeoPHP, CTools from drupal.org
‣ Enable GeoPHP, CTools, and Geofield
‣ Use drush!
• ...
Add a Geofield
‣ Manage fields on a new or existing content type
‣ Add a new field using Field Type “Geofield”
Create new location content
‣ Add content using the Location content type
‣ Grab the latitude and longitude of a location
...
Installing Leaflet
‣ Instructions at https://drupal.org/node/1645460
‣ Install Leaflet JS to sites/all/libraries
• http://le...
Your First Leaflet Map
‣ Manage display of Geofield on content type
‣ Update Format to Leaflet
‣ Click gear
‣ Choose Leaflet M...
Leaflet Map Didn’t Display! :(
‣ Check the status report page to make sure Leaflet is
installed correctly. If there is an er...
Create a Leaflet Map with Views
‣ Enable Leaflet Views (leaflet_views) & Views UI
modules
• Download dependencies (Views, Ent...
Leaflet Map Settings in Views
‣ Title => Title Field
‣ Description => <node entity>
• View mode: Teaser (or custom view mod...
Other things you can do…
Custom icons
‣ Save marker image to a good place in /sites/default/
files
‣ Make sure it’s appropriately sized
‣ Update Poi...
Add more map options
‣ Leaflet More Maps
• https://drupal.org/project/leaflet_more_maps
!
‣ Provides more maps for Leaflet!
Change zoom settings
‣ Each map has a min/max zoom range
‣ Zoom range is indicated next to map name
Use tokens in popup
‣ Enable token module
‣ Enable popup
‣ Copy/paste token into popup text field
Markercluster
‣ https://drupal.org/project/leaflet_markercluster
Mapping with Leaflet Series
‣ Video series available on Drupalize.Me
‣ An extended and more in-depth version of this
presen...
Easily Create Maps in Drupal
with Leaflet
http://drupalize.me/series/mapping-leaflet
Upcoming SlideShare
Loading in …5
×

Easily Create Maps in Drupal with Leaflet

615 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Easily Create Maps in Drupal with Leaflet

  1. 1. Easily Create Maps in Drupal with Leaflet May 14, 2014 - Amber Matz - @amberhimes ! Slides: http://www.slideshare.net/agentolivia/pdug-leaflet
  2. 2. Hi! I’m Amber. Lullabot / Drupalize.Me @amberhimes
  3. 3. Easily Create Maps in Drupal with Leaflet http://drupalize.me/series/mapping-leaflet Drupalize.Me Series: Mapping with Leaflet
  4. 4. Mapping in Drupal ‣ Location Storage ‣ Mapping library ‣ See comparison chart at: • https://drupal.org/node/1704948
  5. 5. Geofield ‣ Location storage module ‣ Provides a new field type called Geofield ‣ Provides widgets for entering many types of geospatial data
  6. 6. Leaflet ‣ A lightweight mobile-friendly javascript mapping library ‣ A Drupal contrib module ‣ Developer API available
  7. 7. Installing Geofield ‣ Download Geofield, GeoPHP, CTools from drupal.org ‣ Enable GeoPHP, CTools, and Geofield ‣ Use drush! • drush en geofield • This downloads the module and its dependencies then enables them!
  8. 8. Add a Geofield ‣ Manage fields on a new or existing content type ‣ Add a new field using Field Type “Geofield”
  9. 9. Create new location content ‣ Add content using the Location content type ‣ Grab the latitude and longitude of a location • Tip: Go to maps.google.com and click near a marker to find the lat/long ‣ Enter in the lat/long and submit!
  10. 10. Installing Leaflet ‣ Instructions at https://drupal.org/node/1645460 ‣ Install Leaflet JS to sites/all/libraries • http://leafletjs.com/download.html ‣ Download and Enable Leaflet Drupal Module • https://drupal.org/project/leaflet
  11. 11. Your First Leaflet Map ‣ Manage display of Geofield on content type ‣ Update Format to Leaflet ‣ Click gear ‣ Choose Leaflet Map: OSM Mapnik ‣ Click Update ‣ Click Save
  12. 12. Leaflet Map Didn’t Display! :( ‣ Check the status report page to make sure Leaflet is installed correctly. If there is an error: • Check permissions of sites/all/libraries/leaflet • Check the Leaflet Issue Queue ‣ OSM Mapnik tiles are externally hosted. • Make sure you are connected to the Internet.
  13. 13. Create a Leaflet Map with Views ‣ Enable Leaflet Views (leaflet_views) & Views UI modules • Download dependencies (Views, Entity), if necessary ‣ Create a new view using display format: Leaflet Map ‣ Add Geofield to Fields and “Exclude from display”
  14. 14. Leaflet Map Settings in Views ‣ Title => Title Field ‣ Description => <node entity> • View mode: Teaser (or custom view mode)
  15. 15. Other things you can do…
  16. 16. Custom icons ‣ Save marker image to a good place in /sites/default/ files ‣ Make sure it’s appropriately sized ‣ Update Point Icon in Leaflet Map settings
  17. 17. Add more map options ‣ Leaflet More Maps • https://drupal.org/project/leaflet_more_maps ! ‣ Provides more maps for Leaflet!
  18. 18. Change zoom settings ‣ Each map has a min/max zoom range ‣ Zoom range is indicated next to map name
  19. 19. Use tokens in popup ‣ Enable token module ‣ Enable popup ‣ Copy/paste token into popup text field
  20. 20. Markercluster ‣ https://drupal.org/project/leaflet_markercluster
  21. 21. Mapping with Leaflet Series ‣ Video series available on Drupalize.Me ‣ An extended and more in-depth version of this presentation.
  22. 22. Easily Create Maps in Drupal with Leaflet http://drupalize.me/series/mapping-leaflet

×