An introduction to the Leaflet.js library for building web maps and applications. This was the introduction to a technical workshop at the 2016 PA GIS Conference. The workshop provided a demonstration of how to build a basic map writing JavaScript, HTML, and CSS. The project files are located at https://github.com/pmacMaps/leaflet-pa-gis-conference-2016.

1. Up and Running with
Leaflet.js
Patrick McKinney
pmckinney@ccpa.net
GitHub
GIS Specialist
Cumberland County, PA

2. Session Code
https://github.com/pmacMaps/leaflet-pa-
gis-conference-2016

3. Workshop Agenda
1. What is Leaflet.js?
2. Setting up the HTML document
3. The Map object
4. Base map options
5. Leaflet overlay options

4. What is Leaflet?
 Open-source JavaScript library for web maps
 Designed with simplicity, performance, and usability
 Large plugin ecosystem
 Thorough API reference
 Support:
Desktops
 Chrome
 Firefox
 Safari 5+
 Opera 12+
 IE 7-11
Mobile:
 Safari for iOS 7+
 Android browser 2.2+, 3.1+,
4+
 Chrome for mobile
 Firefox for mobile
 IE10+ for Windows 8 devices

5. Leaflet Examples
 Magisterial District Judges Map
 Lancaster County Historic Maps

6. Basemap Examples
 L.tileLayer
 L.tileLayer.wms
 L.esri.basemapLayer
 L.StamenTileLayer
 Basemap Examples Demo
 Leaflet Tile Providers Plugin

7. Map Overlay Examples
 L.marker
 L.polyline
 L.polygon
 GeoJSON

8. Resources
 Leaflet
 ESRI Leaflet
 Stamen Maps
 GeoJSON
 City of Philadelphia ArcOpen Tool
 BootLeaf Leaflet App “Framework”