This is a project for the Udacity Front End Web developer nanodegree. It is meant to get the student used to working with 3rd party API's as well as Knockout JS. My neighborhood map is of Eau Claire WI where I lived from 2015 to 2017. The map shows some local restaurants, parks and bars.
You can see a live version here.
- Knockout JS helps keep websites code/html organized by using the Model, View, ViewModel (MVVM) paradigm which encourages separation of concerns. It does this by using databinding which allows the User Interface of the app to update without explicitly changing html elements in the javascript code.
- Google Maps API Used to show the map and generate the markers.
- FourSquare's API Used to get the pictures, address and website information for the various locations.
- Clicking on a marker on the map will show information about that location loaded from FourSquare including the address and website of the business or group.
- Clicking on a marker also loads 6 images taken at the location from FourSquare's API.
- The map style can be changed using the drop down at the top.
- The locations can be searched/filtered using the textbox at the top.
- To accommodate smaller screens a button was included that hides the sidebar.
- Download or Clone the Repository.
- Double click the
index.htmlfile to view the project in your browser.
- Side bar flyout tutorial https://www.youtube.com/watch?v=uWUNZ4u1VLA
- Dark Roads and Retro LandMarks map styles https://mapstyle.withgoogle.com/
- Water Only and Roads Only Map styles https://snazzymaps.com/
- Knockout JS arrayFilter https://stackoverflow.com/questions/29551997/knockout-search-filter
- The pluralsight.com courses 'Knockout Fundamentals' and 'Knockout for the XAML Developer'.
- Styling the filter text box https://www.youtube.com/watch?v=xE92oKJAskE