Fix All The (Map) Data! - HighEdWeb 2013 Workshop

Aaron Knightacknight@esf.edu @farktal#heweb13 • #WRK10

Fix All The (Map) Data!Building an Interactive Campus Map

About Me

Aaron Knight Senior Programmer/Analyst

Information SystemsState University of New York College of Environmental Science and Forestry(SUNY-ESF)

Outline for This Afternoon

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

Background

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

Compare:

Fixing Map Data

Often a tedious process. Making complete edits is important.

Often expedites review Yes, you will have to do this in many places.

Be Patient and Prepared

Be prepared for setbacks.

Fixing Map Data - Demo

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

Introduction to Campus Mapping

Does it look something like this?

Or worse, these? Yes, these are

still live and on the web. Don’t ask.

What if it could look like this?

Part Deux

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

You can do it!

Tools: Leaflet.js▪ And some plugins

OpenStreetMap editor Accurate campus data*

First Steps

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

Integration

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.

Thank You!

Slides and Sample Code Contact Me

Aaron Knight@farktal on twitter acknight@esf.edu