Easily Create Maps in Drupal with Leaflet

Easily Create Maps in Drupal with LeafletMay 14, 2014 - Amber Matz - @amberhimes !

Slides: http://www.slideshare.net/agentolivia/pdug-leaflet

Hi! I’m Amber.Lullabot / Drupalize.Me

@amberhimes

Easily Create Maps in Drupal with Leaflethttp://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

geospatial data

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!

• drush en geofield • This downloads the module and its dependencies

then enables them!

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

• Tip: Go to maps.google.com and click near a marker to find the lat/long

‣ Enter in the lat/long and submit!

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

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

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.

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”

Leaflet Map Settings in Views‣ Title => Title Field ‣ Description => <node entity>

• View mode: Teaser (or custom view mode)

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 Point Icon in Leaflet Map settings

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

presentation.

Easily Create Maps in Drupal with Leaflethttp://drupalize.me/series/mapping-leaflet