際際滷

際際滷Share a Scribd company logo

Finding Your Way (WRK6) - Post-Conference Workshop at HighEdWeb 2014

Download as PPTX, PDF
F
farktal

Wayfinding and map data: so many (conflicting) data sources out there, so little time - but so much potential for losing your future students before youve even made the pitch. Well look at ways to correct your campus data in major mapping systems, and then well use that to form the building blocks of a fairly easy to build, inexpensive, mobile-friendly interactive map for your campus. (This workshop requires at least a working knowledge of JavaScript.)

1 of 19
Download to read offline
FINDING YOUR WAY FIXING (CONFLICTING) MAP DATA & BUILDING AN INTERACTIVE CAMPUS MAP Aaron Knight @farktal #heweb14 #WRK6
About Me Senior Programmer/Analyst, Information Systems State University of New York College of Environmental Science and Forestry (SUNY-ESF) Syracuse University 2007 B.S. Computer Science/History 2014 M.S. Computer Engineering From HighEdWeb 2013, photo by Anne Petersen (@apetersen)
Todays Agenda Background on Mapping Using the Open Street Map Editor Introducing Leaflet.js Building the Big Picture Where do we go from here? Q&A http://www.westga.edu/~distance/orientation/roadsign.jpg
Background One Map To Rule Them All? Dont we wish? How much has your campus changed in the last few years? Have mapping services caught up? Many tools, many data sources http://images1.fanpop.com/images/photos/2300000/Map-of-Middle-Earth-lord-of-the-rings-2329809-1600- 1200.jpg
Fixing Mapping Data Often a tedious process. Making complete edits is important. Expedites review Yes, you will have to do this in many places. Were going to talk about one, primarily, today.
Be Patient Be prepared for setbacks.
Lets Talk OpenStreetMap OpenStreetMap: Open and Free Extensive Community Support Rapid Development Quickly Live Major Usage Foursquare/Swarm Craigslist MapQuest Open Lets have a demo!
Lets Do An Exercise Log in to OpenStreetMap and make some changes in your campus area. You can use OpenId, Google, Wordpress, AOL even OpenStreetMap.org
Leaflet.js Powerful and lightweight (33kb) JavaScript library Free Current version: 0.7.3 http://www.leafletjs.com Plays nicely on touch devices Lets take a tour The Leaflet.js logo (leafletjs.com)
Lets Do An Exercise Introduction to Leaflet.js Download Leaflet.js Create a map and center it on your campus (or a location of your choosing) Set default zoom levels to a reasonable viewport Useful reference: http://leafletjs.com/reference.html
Lets take a break!
What Now? Now, you have a map, embedded in a web page, centered on your campus. Lets layer some content on it. Controls Popups Useful Plugin Awesome-Markers
Lets Do An Exercise Start from the map from the first Leaflet.js exercise. Add a few points of interest (POIs) to your map. Make at least one of them pop up with details about it when clicked. Experiment with other marker types Circles, Polygons, Lines, Icons
Advanced Leaflet.js Cut Clutter with Layer Groups Built in option for Leaflet.js Two kinds: base layers and overlays
Lets Do An Exercise Last one, I promise! Group some of the POIs you created in the last exercise into some Layer Groups. Add those Layer Groups to your map and play with the Layers control. Create more POIs if you need to. You may find the Leaflet.js tutorial on the subject useful: http://leafletjs.com/examples/layers-control.html Leaflet.js Layers Control Example Map http://leafletjs.com/examples/layers-control-example.html
Where do we go from here? Lots of work being done in this area. Other tools http://3.bp.blogspot.com/_urG9xPtgh8E/TCHOm-sAhAI/ AAAAAAAACwk/i4VjlmAkaOk/s1600/Funny+traffic+signs.jpg
Integration WordPress: Maps Marker plugin Plug and play Leaflet.js for WordPress gmaps.js Similar option for Google API It just works (mostly)
Q&A Any questions?
Thank You! Please fill out your session evaluations! 際際滷s and Sample Code: http://www.acknight.com/speaking/ Contact Me Aaron Knight @farktal on twitter acknight@esf.edu

More Related Content

Finding Your Way (WRK6) - Post-Conference Workshop at HighEdWeb 2014

  • 1. FINDING YOUR WAY FIXING (CONFLICTING) MAP DATA & BUILDING AN INTERACTIVE CAMPUS MAP Aaron Knight @farktal #heweb14 #WRK6
  • 2. About Me Senior Programmer/Analyst, Information Systems State University of New York College of Environmental Science and Forestry (SUNY-ESF) Syracuse University 2007 B.S. Computer Science/History 2014 M.S. Computer Engineering From HighEdWeb 2013, photo by Anne Petersen (@apetersen)
  • 3. Todays Agenda Background on Mapping Using the Open Street Map Editor Introducing Leaflet.js Building the Big Picture Where do we go from here? Q&A http://www.westga.edu/~distance/orientation/roadsign.jpg
  • 4. Background One Map To Rule Them All? Dont we wish? How much has your campus changed in the last few years? Have mapping services caught up? Many tools, many data sources http://images1.fanpop.com/images/photos/2300000/Map-of-Middle-Earth-lord-of-the-rings-2329809-1600- 1200.jpg
  • 5. Fixing Mapping Data Often a tedious process. Making complete edits is important. Expedites review Yes, you will have to do this in many places. Were going to talk about one, primarily, today.
  • 6. Be Patient Be prepared for setbacks.
  • 7. Lets Talk OpenStreetMap OpenStreetMap: Open and Free Extensive Community Support Rapid Development Quickly Live Major Usage Foursquare/Swarm Craigslist MapQuest Open Lets have a demo!
  • 8. Lets Do An Exercise Log in to OpenStreetMap and make some changes in your campus area. You can use OpenId, Google, Wordpress, AOL even OpenStreetMap.org
  • 9. Leaflet.js Powerful and lightweight (33kb) JavaScript library Free Current version: 0.7.3 http://www.leafletjs.com Plays nicely on touch devices Lets take a tour The Leaflet.js logo (leafletjs.com)
  • 10. Lets Do An Exercise Introduction to Leaflet.js Download Leaflet.js Create a map and center it on your campus (or a location of your choosing) Set default zoom levels to a reasonable viewport Useful reference: http://leafletjs.com/reference.html
  • 11. Lets take a break!
  • 12. What Now? Now, you have a map, embedded in a web page, centered on your campus. Lets layer some content on it. Controls Popups Useful Plugin Awesome-Markers
  • 13. Lets Do An Exercise Start from the map from the first Leaflet.js exercise. Add a few points of interest (POIs) to your map. Make at least one of them pop up with details about it when clicked. Experiment with other marker types Circles, Polygons, Lines, Icons
  • 14. Advanced Leaflet.js Cut Clutter with Layer Groups Built in option for Leaflet.js Two kinds: base layers and overlays
  • 15. Lets Do An Exercise Last one, I promise! Group some of the POIs you created in the last exercise into some Layer Groups. Add those Layer Groups to your map and play with the Layers control. Create more POIs if you need to. You may find the Leaflet.js tutorial on the subject useful: http://leafletjs.com/examples/layers-control.html Leaflet.js Layers Control Example Map http://leafletjs.com/examples/layers-control-example.html
  • 16. Where do we go from here? Lots of work being done in this area. Other tools http://3.bp.blogspot.com/_urG9xPtgh8E/TCHOm-sAhAI/ AAAAAAAACwk/i4VjlmAkaOk/s1600/Funny+traffic+signs.jpg
  • 17. Integration WordPress: Maps Marker plugin Plug and play Leaflet.js for WordPress gmaps.js Similar option for Google API It just works (mostly)
  • 19. Thank You! Please fill out your session evaluations! 際際滷s and Sample Code: http://www.acknight.com/speaking/ Contact Me Aaron Knight @farktal on twitter acknight@esf.edu