Wayfinding and map data: so many (conflicting) data sources out there, so little time - but so much potential for losing your future students before you’ve even made the pitch. We’ll briefly review ways to correct your campus data in major mapping systems, and then we’ll use that data to form the building blocks of a fairly easy to build, inexpensive, mobile-friendly interactive map for your campus. Presented at the 2016 Higher Education Web Professionals Association (HighEdWeb) Annual Conference in Memphis, Tennessee.

1. Building a Better (Campus) Map
Better campus mapping - coming soon to a campus near you.
Aaron Knight • SUNY College of Environmental Science and Forestry • #heweb16 #dpa1 • @farktal

2. Building a Better Campus Map
Welcome!
Today’s Agenda:
Background
Fixing Data on Map
Services
Easy Interactive Maps

3. Some Background

4. 2007

5. 2008-2013

6. 2013-Present
Perpetually in beta, Google style. Live: www.esf.edu/maps/beta/

7. Let’s Talk About Data

8. Let’s Talk About Data
Major services to worry about:
Google MapMaker (and Places, Plus,
and Maps)
OpenStreetMap
HERE
Each service has its… quirks.

9. Let’s Talk About Data
Data Overload
Major data sources have required a
great deal of cleanup.
Especially a problem with published
full directories.
Lots of Inputs
Some of them are even good.
Image from “Apple made a bad move replacing Google Maps on iOS 6” - It’s A Gadget. https://www.itsagadget.com/2012/09/apple-google-maps-ios-6.html

10. The Google-Sphere
Maps, Map Maker, Local, Plus, Oh My!
Google Logo from googleblog.blogspot.com/2015/09/google-update.html - Service screenshots from September 2015.

11. The Google-Sphere
You might have heard of Google Map Maker before…
Image from Ars Technica “Google temporarily shuts down Map Maker due to vandalism.” http://arstechnica.com/gadgets/2015/05/google-temporarily-shuts-down-map-maker-due-to-vandalism/

12. The Google-Sphere
Google Maps is fed by several sources:
Maps (user error reports)
Map Maker
Places
Plus
Internal staff
…the combination of which is far from
perfect.
Google Maps - iOS app icon. Map source: Google Maps

13. The Google-Sphere
Fastest way to fix map information?
Google Map Maker
Fastest way to fix POIs?
Google Local places (if claimed)
Google Map Maker if not.

14. The Google-Sphere
Setbacks may occur.
I wish I was kidding.

15. OpenStreetMap
Where the WikiPedia Model Meets Mapping

16. OpenStreetMap
OpenStreetMap is important because…
Used for Facebook, Apple Maps,
Foursquare, Craigslist
No real moderation.
It’s really easy to work with for your
own purposes.
www.openstreetmap.org

17. Now What?
This isn’t another of those “other duties as assigned,” is it?

18. Now What?
Stay on top of changes
Check in sporadically
Find out when data sources drop
Update as your campus changes

19. Let’s Build Something

20. Play with it: www.esf.edu/maps/beta/

21. Introducing Leaflet
Leaflet
leafletjs.com
Open-Source
Lightweight and Mobile Friendly
Extensible
Plugins
Leaflet-providers
Awesome-Markers
many, many more

22. Hello, World
Adapted from LeafletJS Quick Start (http://leafletjs.com/examples/quick-start.html)
<link rel="stylesheet"
href="https://unpkg.com/leaflet@1.0.0/dist/leaflet.css" />
<script
src="https://unpkg.com/leaflet@1.0.0/dist/leaflet.js"></script>
<div id="map" style="width: 100%; height: 500px"></div>
<script>
var map = L.map('map').setView([43.03467, -76.13754], 16);
L.tileLayer(‘https://api.mapbox.com/styles/v1/mapbox/stree
ts-v9/tiles/256/{z}/{x}/{y}?access_token=p{token}', {
attribution: ‘{attribution}’,
maxZoom: 18,
accessToken: ‘{token}’
}).addTo(map);
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " +
e.latlng.toString())
.openOn(map);
}
map.on('click', onMapClick);
</script>

23. Using Providers
Full previews of available free* tile
layers:
http://leaflet-extras.github.io/leaflet-
providers/preview/index.html
<link rel="stylesheet"
href="https://unpkg.com/leaflet@1.0.0/dist/leaflet.css" />
<script
src="https://unpkg.com/leaflet@1.0.0/dist/leaflet.js"></script>
<div id="map" style="width: 100%; height: 500px"></div>
<script type="text/javascript" src="leaflet-
providers.js"></script>
<script>
var map = L.map('map').setView([43.03467, -76.13754], 16);
var tilelayer = new
L.TileLayer.Provider("OpenStreetMap.Mapnik");
map.addLayer(tilelayer);
</script>
* some require registration

24. Location Detection
Location detection works best on mobile.
<link rel="stylesheet"
href="https://unpkg.com/leaflet@1.0.0/dist/leaflet.css" />
<script
src="https://unpkg.com/leaflet@1.0.0/dist/leaflet.js"></script>
<div id="map" style="width: 100%; height: 500px"></div>
<script type="text/javascript" src="leaflet-
providers.js"></script>
<script>
var map = L.map('map').setView([43.03467, -76.13754], 16);
var tilelayer = new
L.TileLayer.Provider("OpenStreetMap.Mapnik");
map.addLayer(tilelayer);
function onLocationFound(e) {
var radius = e.accuracy / 2;
L.marker(e.latlng).addTo(map)
.bindPopup("You are (approximately)
here.").openPopup();
}
map.on('locationfound', onLocationFound);
map.locate({maxZoom: 16});
</script>

25. Polygons and Markers
var upgate = L.marker([43.0358, -76.13807], {icon:
L.AwesomeMarkers.icon({icon: 'icon-info-sign', color:
'blue'})}).bindPopup("<strong>ESF Campus
Entrance</strong><br>Visitor Entrance and Information");
var pois = L.layerGroup([upgate]);
var moon = L.polygon([
[43.03498, -76.13661],
[43.03498, -76.13609],
[43.03446, -76.13609],
[43.03446, -76.13661]
], {
color: buildingFill,
fillColor: buildingFill,
fillOpacity: 0.5,
weight: 0
})
.bindPopup("<strong>F. Franklin Moon
Library</strong><br><a target='_blank'
href='http://www.esf.edu/welcome/campus/moon.htm'>Campus
Tour</a>");

26. Finishing Touches
Find your best tile layer.
MapBox tiles are a great choice if you
have a budget

27. That’s All, Folks!
Questions?
Contact Information
Aaron Knight
Senior Programmer/Analyst
Information Systems, SUNY-ESF
@farktal on Twitter
acknight@esf.edu
Slides: www.acknight.com/speaking/
Also all of the code samples you saw
today.