Campus Mapping: so many data sources, competing services, and oh so many pieces of data to correct. We'll first look at common systems (Google MapMaker, OpenStreetMap, and HERE MapCreator) with which errors about your campus physical plant can be corrected - and then work through the process of building an interactive campus map using Leaflet.js, a few plugins, and a combination of those data sources (fairly) easily for your own campus. Workshop will require at least a working knowledge of JavaScript. SUNY-ESF has been exploring various means of using external map data to offer a strong campus map for several years, and rapid changes to the physical plant of their Syracuse campus have required learning how to get changes made to services like Google Maps so that campus visitors are well-directed to campus.

1. Aaron Knight
acknight@esf.edu
@farktal
#heweb13 • #WRK10

2.  Aaron Knight
 Senior Programmer/Analyst
Information Systems
State University of New York College of
Environmental Science and Forestry
(SUNY-ESF)

3.  Background
 Fixing Map Data
 Introduction to Campus Mapping
 Ways to Integrate Map Services
 Using Leaflet.js
 Building an Interactive Map
 Integrating Leaflet.js in Your CMS*
 Conclusion/Q&A

4.  One Map To Rule Them All?
 Don’t we wish!
 How much has your campus changed in the
last few years?
 Have mapping services caught up?
 Many tools, many data sources

6.  Often a tedious process.
 Making complete edits is important.
 Often expedites review
 Yes, you will have to do this in many places.

7.  Be prepared for setbacks.

8.  Let none of these sites be down this
afternoon…
 http://www.google.com/mapmaker/
 http://www.openstreetmap.org
 http://www.here.com

9.  Does it look something like this?

10.  Yes, these are
still live and on
the web.
 Don’t ask.

12.  So your data is fixed now, right?
 Getting things right takes time.
 Let’s do something interesting with it!

13.  Tools:
 Leaflet.js
▪ And some plugins
 OpenStreetMap editor
 Accurate campus data*

14.  Download Files
 http://www.acknight.com/slides/heweb13files.zip
 Leaflet.js Quick Start Guide
 http://leafletjs.com/examples/quick-start.html
 Find Your Center
 Build Your Base Map

15.  WordPress: Maps Marker plugin
 http://www.mapsmarker.com
 Visually create maps, full icon set.
 Free or paid
 gmaps.js
 Similar, Google API-driven
 Requires jQuery
 http://hpneo.github.io/gmaps/
 Your CMS May Vary
 Don’t fret.

16.  Slides and Sample Code
 Contact Me
 Aaron Knight
@farktal on twitter
acknight@esf.edu