sfmap

San Francisco Movie Map - Uber Test

sfmap is a single webpage application that shows on a map where movies have been filmed in San Francisco. An example of the running site is hosted at http://inch.im.

The features include:

• The user should be able to filter a movie using autocomplete search.
• Clicking the icon on the map will display the name of the location.
• Hovering on the name of the location will highlight the location on the map automatically.
• The site is responsive! The site has been tested on Chrome, Firefox, Safari, Opera, Nexus 7, iPad nad iPhone.

• A python script is written to process the CSV file to load location data to Redis memory.
• Google Maps Geocoding API is used here to get latitude/longtitude of address.
• A Flask server is setup to respond the autocomplete GET request.
• The front-end single page application is built based on AngularJS with the help of opensource ng-boilerplate project.
• Bootstrap is used here to display the basic UI, and responsive layout.

Install virtualenv, pip, Redis and then

$ virtualenv env
$ source env/bin/activate
$ pip install -r requirements.txt
$ cd script/
$ python load_film_locations_to_redis.py
$ cd ../flask/
$ python sfmap.py

Finally, open http://localhost:5000/ta/v in your browser to test autocomplete API.

Install Node.js and then:

$ cd angular/
$ sudo npm -g install grunt-cli bower
$ npm install
$ bower install
$ grunt build
$ open build/index.html

The website should be opened by your default browser.