Udacity Project 5 - A single-page application featuring a map of my neighborhood. Local Castles and Eateries that I like are listed and marked on the Google Map. Selecting a marker (either directly or via the left-hand bar) queries Flickr for photos based on the geo location of the marker.
- Start a local http server, perhaps using one of the following:
- python3 -m http.server 8080 (if using Python 3)
- python -m SimpleHTTPServer 8080 (if using Python 2)
- Open http://localhost:8080 in a browser
- When index.html is opened in a browser, the Javascript libraries are downloaded (from a CDN, except for the main application which is local) during HTML parsing
- The Google Map API is called with a callback to the gmapViewModel, which initialises..
- the placeListViewModel (and applies the Knockout Bindings)
- the Google Map
- Responsive design achieved through Bootstrap Grid system
- Data binding of both Search Text and Places List through Knockout Observables
- The sidebar can be hidden by clicking the hamburger icon, allowing the map to fill all available space
- Typing in search box automatically filters list of places and map markers, resizing map as required
- Clicking a place on sidebar automatically selects place on map and opens Infowindow
- Selecting a marker displays the respective Infowindow and centers the map
- Clicking a marker on the map which has an open Infowindow will close the Infowindow
- Map is customized to make places stand out
- Map uses customized icons for places
- Flickr API used to retrieve relevant photos for marker's geo location and name
- Timeouts retrieving photo URLs from Flickr are handled gracefully
- index.html - Entry point for application
- styles.css - Stylesheet
- js/
- app.js - Core application javascript
- static/
- castle-icon.png - Castle icon for customised Google marker
- home-icon.png - Home icon for customised Google marker showing where I live
- restaurant-icon.png - Restaurant icon for customised Google marker
Note: 3rd party JS libs are loaded from a CDN