Mapping solutions in Drupal range from powerful configuration options in OpenLayers to simple one-line address fields that display a Google Map. Leaflet is a lightweight, mobile-friendly Javascript mapping library that uses Geofield to store location data. Geofield plus Leaflet is a solution with more options and flexibility than the Simple Google Maps contributed module, for example, and far less complexity, and fewer configuration options, than OpenLayers. If you're looking for an easy way to dive into mapping without pulling your hair out, then this webinar is for you. Join Amber Matz, as she walks through the process of adding a map to your Drupal site using Geofield and Leaflet. In this webinar, you'll learn: How to use Geofield to store location data in Drupal 7 How to display a single location marker on a map using Leaflet How to use Views to create a map of many locations

1. Easily Create Maps in Drupal
with Leaflet
May 1, 2014 - Amber Matz - @amberhimes
!
http://lb.cm/acquia-leaflet
!

2. Hi! I’m Amber.
Lullabot / Drupalize.Me
@amberhimes

3. Easily Create Maps in Drupal
with Leaflet
http://lb.cm/acquia-leaflet
Drupalize.Me Series:
Mapping with Leaflet

4. Mapping in Drupal
‣ Location Storage
‣ Mapping library
‣ See comparison chart at:
• https://drupal.org/node/1704948

5. Geofield
‣ Location storage module
‣ Provides a new field type called Geofield
‣ Provides widgets for entering many types of
geospatial data

6. Leaflet
‣ A lightweight mobile-friendly javascript mapping
library
‣ A Drupal contrib module
‣ Developer API available

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. Add a Geofield
‣ Manage fields on a new or existing content type
‣ Add a new field using Field Type “Geofield”

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. 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. 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. 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. 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. Leaflet Map Settings in Views
‣ Title => Title Field
‣ Description => <node entity>
• View mode: Teaser (or custom view mode)

15. Other things you can do…

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. Add more map options
‣ Leaflet More Maps
• https://drupal.org/project/leaflet_more_maps
!
‣ Provides more maps for Leaflet!

18. Change zoom settings
‣ Each map has a min/max zoom range
‣ Zoom range is indicated next to map name

19. Use tokens in popup
‣ Enable token module
‣ Enable popup
‣ Copy/paste token into popup text field

20. Mapping with Leaflet Series
‣ Video series available on Drupalize.Me
‣ An extended and more in-depth version of this
presentation.

21. Easily Create Maps in Drupal
with Leaflet
!
http://lb.cm/acquia-leaflet
!