Project 5: Neighborhood Map (70 hrs) ~ Udacity Front End Web Developer Nanodegree Program
I developed a single-page application featuring a map of SF. I then added additional functionality, including: map markers to identify movie scene locations, an autocomplete search function to easily discover over 700 films, and a search function to filter by street. I then researched and implemented several third-party APIs to provide additional information about each location (StreetView images using Google Maps Image API) and film (movie reviews using NY Times API, movie poster and more using TMDb API).
The original project requirements specified using at least 10 addresses, but this app uses over 2K.
- Clone this repository
- Run a local server using server.js: while in the root project directory, run
- Navigate to your local copy of index.html through your web browser
After cloning the project, work in the files located in the src directory.
- Download and install npm by installing node.js (npm comes packaged with node.js): node.js
- While in the root project directory, run:
- To build the dist folder, from the root project directory run the following:
Knockoutjs, AJAX, Bootstrap, jQuery, HTML5, Google Maps, Typekit
Style Guide Used
The project requirements specified that we use Knockout.js for our organizational library.
According to Udacity, while there are a lot of organizational libraries out there, they are all solving the same problems in fundamentally similar ways. After we understand the basics of separation of concerns, we can understand other organizational libraries.
- SF Open Data API - Film Locations in San Francisco, provided by the San Francisco Film Office
- Google Street View Image API
- The New York Times API - Movie Reviews API is high quality and easy-to-use. I include their movie reviews.
Film Location Data Quality
API Trial and Error:
- IMDB has a limited free version. I found conflicting information online which led me to believe it was not free, but recently found posts like this that say its possible to get the information for free. Maybe I will use it in the future.
- Rotten Tomatoes API is free for 6 months but they approved my API too late to use for this project.
- The Open Movie Database is free but has limited and/or illegally obtained data. I want to use data legally.
- YouTube Data API has trailers but the results were often wrong even with an exact match. It uses the same API as Google Maps and consumed a large percentage of my API calls. I would use their API if my project required more general videos that merely required categories since their API is easy-to-use and well-documented.
- MediaWiki action API used by Wikipedia does not provide the film images since they often use copyrighted images under a fair use law that I doubt my app also falls under.
- Flickr API provided inconsistent image results. I like how the SF Film Office includes frequently used locations, for example Alamo Square
- Netflix no longer offers a free API.
- Trailer Addict API, used by The New York Times and other major publishers for their trailers, offers a free version that is very slow.
- Treehouse: Adding a Dynamic Map by Andrew Chalkey
- jQuery Autocomplete provided by devbridge: https://github.com/devbridge/jQuery-Autocomplete & Instructions on designshack
- SF vector icon logo: Free vector design by Vecteezy with several edits made to color and graphic in Illustrator.
Known Bugs and Issues
- At least 5 TV shows come up with zero results because I am using a movie call, but I can use the TV ID call to get the primary information about a TV series by id. Examples of TV shows: Hemingway & Gelhorn, CSI, Alcatraz.
- Several blocks are included in the locations list and they fail to map correctly, since they are not formatted to be geocoded, for example:
"film_location": "Van Ness Ave between Fell and Lombard"Since it usually uses the words ‘between’ and ‘from’, this can be used to isolate the blocks and create a set of two intersections to then map using either waypoints in directions as shown on Google’s docs or driving directions as shown on this gist by trtg.
Potential New Features:
Possible APIs To Add:
- Firebase to store geocoded locations. Here’s a good resource: Pluralsight Firebase Fundamentals
- SendGrid - SendGrid is for transactional email and MailChimp is for marketing emails. A user sending themselves movie favorites in this app would be transactional.
- Rotten Tomatos API since I have 6 months access now. Example using the API w/ Knockoutjs
- Yelp, Foursquare, Instagram, Facebook, Meetup & Twitter.
- A user could plan a route of locations and films and share their plans on Facebook or Meetup. Then update Instagram, Facebook, and Twitter with pictures.
Technologies To Use:
- Real-Time Geolocation Service with Node.js
- Use Google Maps Custom Controls: so user can click a button to return the map.setCenter to the original center. Currently, the user can right-click only.
- Take advantage of the ‘multi’ or ‘appendtoresponse’ themoviedb API call, which allows you to make one call instead of several. Otherwise, the API only allows 40 calls/10 seconds. For example,
- Use the HTML5 Geolocation API to get the user’s current location and allow them to get directions to locations.
- Use the HTML5 History API so the user can move back and forth through their browsing history
- IndexDB and service worker for offline access: Udacity Offline Web Applications
- Use of underscore.string library for title and address modifications
- Add ability to favorite locations
- Add spinner when film and other items load
- Use Material design and Polymer.js: Pluralsight Material design and Polymer.js
- Rewrite in Angular, Backbone or Ember: Udacity Front End Frameworks Backbone, Angular, Ember
Keyhole Markup Language (KML) Layer