easily create maps in drupal with leaflet
TRANSCRIPT
![Page 1: Easily Create Maps in Drupal with Leaflet](https://reader033.vdocument.in/reader033/viewer/2022052901/556bf0f7d8b42a65458b4fb4/html5/thumbnails/1.jpg)
Easily Create Maps in Drupal with LeafletMay 14, 2014 - Amber Matz - @amberhimes !
Slides: http://www.slideshare.net/agentolivia/pdug-leaflet
![Page 2: Easily Create Maps in Drupal with Leaflet](https://reader033.vdocument.in/reader033/viewer/2022052901/556bf0f7d8b42a65458b4fb4/html5/thumbnails/2.jpg)
Hi! I’m Amber.Lullabot / Drupalize.Me
@amberhimes
![Page 3: Easily Create Maps in Drupal with Leaflet](https://reader033.vdocument.in/reader033/viewer/2022052901/556bf0f7d8b42a65458b4fb4/html5/thumbnails/3.jpg)
Easily Create Maps in Drupal with Leaflethttp://drupalize.me/series/mapping-leaflet
Drupalize.Me Series: Mapping with Leaflet
![Page 4: Easily Create Maps in Drupal with Leaflet](https://reader033.vdocument.in/reader033/viewer/2022052901/556bf0f7d8b42a65458b4fb4/html5/thumbnails/4.jpg)
Mapping in Drupal‣ Location Storage ‣ Mapping library ‣ See comparison chart at:
• https://drupal.org/node/1704948
![Page 5: Easily Create Maps in Drupal with Leaflet](https://reader033.vdocument.in/reader033/viewer/2022052901/556bf0f7d8b42a65458b4fb4/html5/thumbnails/5.jpg)
Geofield‣ Location storage module ‣ Provides a new field type called Geofield ‣ Provides widgets for entering many types of
geospatial data
![Page 6: Easily Create Maps in Drupal with Leaflet](https://reader033.vdocument.in/reader033/viewer/2022052901/556bf0f7d8b42a65458b4fb4/html5/thumbnails/6.jpg)
Leaflet‣ A lightweight mobile-friendly javascript mapping
library ‣ A Drupal contrib module ‣ Developer API available
![Page 7: Easily Create Maps in Drupal with Leaflet](https://reader033.vdocument.in/reader033/viewer/2022052901/556bf0f7d8b42a65458b4fb4/html5/thumbnails/7.jpg)
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!
![Page 8: Easily Create Maps in Drupal with Leaflet](https://reader033.vdocument.in/reader033/viewer/2022052901/556bf0f7d8b42a65458b4fb4/html5/thumbnails/8.jpg)
Add a Geofield‣ Manage fields on a new or existing content type ‣ Add a new field using Field Type “Geofield”
![Page 9: Easily Create Maps in Drupal with Leaflet](https://reader033.vdocument.in/reader033/viewer/2022052901/556bf0f7d8b42a65458b4fb4/html5/thumbnails/9.jpg)
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!
![Page 10: Easily Create Maps in Drupal with Leaflet](https://reader033.vdocument.in/reader033/viewer/2022052901/556bf0f7d8b42a65458b4fb4/html5/thumbnails/10.jpg)
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
![Page 11: Easily Create Maps in Drupal with Leaflet](https://reader033.vdocument.in/reader033/viewer/2022052901/556bf0f7d8b42a65458b4fb4/html5/thumbnails/11.jpg)
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
![Page 12: Easily Create Maps in Drupal with Leaflet](https://reader033.vdocument.in/reader033/viewer/2022052901/556bf0f7d8b42a65458b4fb4/html5/thumbnails/12.jpg)
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.
![Page 13: Easily Create Maps in Drupal with Leaflet](https://reader033.vdocument.in/reader033/viewer/2022052901/556bf0f7d8b42a65458b4fb4/html5/thumbnails/13.jpg)
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”
![Page 14: Easily Create Maps in Drupal with Leaflet](https://reader033.vdocument.in/reader033/viewer/2022052901/556bf0f7d8b42a65458b4fb4/html5/thumbnails/14.jpg)
Leaflet Map Settings in Views‣ Title => Title Field ‣ Description => <node entity>
• View mode: Teaser (or custom view mode)
![Page 15: Easily Create Maps in Drupal with Leaflet](https://reader033.vdocument.in/reader033/viewer/2022052901/556bf0f7d8b42a65458b4fb4/html5/thumbnails/15.jpg)
Other things you can do…
![Page 16: Easily Create Maps in Drupal with Leaflet](https://reader033.vdocument.in/reader033/viewer/2022052901/556bf0f7d8b42a65458b4fb4/html5/thumbnails/16.jpg)
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
![Page 17: Easily Create Maps in Drupal with Leaflet](https://reader033.vdocument.in/reader033/viewer/2022052901/556bf0f7d8b42a65458b4fb4/html5/thumbnails/17.jpg)
Add more map options‣ Leaflet More Maps
• https://drupal.org/project/leaflet_more_maps !
‣ Provides more maps for Leaflet!
![Page 18: Easily Create Maps in Drupal with Leaflet](https://reader033.vdocument.in/reader033/viewer/2022052901/556bf0f7d8b42a65458b4fb4/html5/thumbnails/18.jpg)
Change zoom settings‣ Each map has a min/max zoom range ‣ Zoom range is indicated next to map name
![Page 19: Easily Create Maps in Drupal with Leaflet](https://reader033.vdocument.in/reader033/viewer/2022052901/556bf0f7d8b42a65458b4fb4/html5/thumbnails/19.jpg)
Use tokens in popup‣ Enable token module ‣ Enable popup ‣ Copy/paste token into popup text field
![Page 20: Easily Create Maps in Drupal with Leaflet](https://reader033.vdocument.in/reader033/viewer/2022052901/556bf0f7d8b42a65458b4fb4/html5/thumbnails/20.jpg)
Markercluster‣ https://drupal.org/project/leaflet_markercluster
![Page 21: Easily Create Maps in Drupal with Leaflet](https://reader033.vdocument.in/reader033/viewer/2022052901/556bf0f7d8b42a65458b4fb4/html5/thumbnails/21.jpg)
Mapping with Leaflet Series‣ Video series available on Drupalize.Me ‣ An extended and more in-depth version of this
presentation.
![Page 22: Easily Create Maps in Drupal with Leaflet](https://reader033.vdocument.in/reader033/viewer/2022052901/556bf0f7d8b42a65458b4fb4/html5/thumbnails/22.jpg)
Easily Create Maps in Drupal with Leaflethttp://drupalize.me/series/mapping-leaflet