American Stadiums Map

View the project live.

Project 5 for the Udacity front-end nanodegree.

This is map of all stadiums in the major professional sports leagues (MLB, NBA, NFL, NHL, and MLS). (Why yes, that is a big neighborhood...) We get location data and photos from Foursquare and articles from the NY Times. The stadium list can be searched by stadium name or teams and can be filtered by sport.

Marker/filter icons were created by me in Sketch.

Installation

1. Download the repo.
2. The optimized content is in the dist directory. Just launch index.html. The source code is in the dev directory.
3. Run the gulp build task to clean the dist directory and re-minify everything if you make changes to the dev code.

Sites/Tools Used

Tools

• Knockout.js
• jQuery
• Sass
• Gulp
• normalize.css
• Font Awesome

APIs

• Google Maps
• Foursquare
• NYTimes

References

• http://markgoodyear.com/2014/01/getting-started-with-gulp/
• http://stackoverflow.com/questions/17122928/how-to-use-tilesloaded-event-for-google-maps-v3
• http://testasoftware.com/steve/blog/knockout-binding-handler-for-google-maps/
• http://jsfiddle.net/stesta/p3ZT4/
• http://stackoverflow.com/questions/11154300/get-last-visible-element-using-jquery
• http://www.strathweb.com/2012/07/knockout-js-pro-tips-working-with-observable-arrays/