SF Film Map

Neighborhood Map

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.



  1. Clone this repository
  2. Run a local server using server.js: while in the root project directory, run node server.js.
  3. 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.


  1. Download and install npm by installing node.js (npm comes packaged with node.js): node.js
  2. While in the root project directory, run: npm install.
  3. To build the dist folder, from the root project directory run the following: gulp.

Technologies Used

Knockoutjs, AJAX, Bootstrap, jQuery, HTML5, Google Maps, Typekit

Style Guide Used

Udacity Front-End Style Guide


The project requirements specified that we use Knockout.js for our organizational library.

Knockout is a JavaScript MVVM (a modern variant of MVC) library that makes it easier to create rich, desktop-like user interfaces with JavaScript and HTML. It uses observers to make your UI automatically stay in sync with an underlying data model, along with a powerful and extensible set of declarative bindings to enable productive development.

-Knockout on Github

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.

APIs Used


Film Location Data Quality

I used SF Open Data - Film Locations in San Francisco, provided by the San Francisco Film Office. This data contained many misspellings and incomplete address information.

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.


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:

Keyhole Markup Language (KML) Layer

The Google Maps JavaScript API supports the KML and GeoRSS data formats for displaying geographic information. These data formats are displayed on a map using a KmlLayer object, whose constructor takes the URL of a publicly accessible KML or GeoRSS file.

-KML Layer Overview on developers.google.com