daniel-234 / frontend-nanodegree-neighborhood-map

Neighborhood Map

Project 5 for the Front-End Web Developer Nanodegree consisted in the development of a single page application featuring a map of a chosen neighborhood. Some functionality was added to this map, including highlighted locations and third-party data about these locations. This app was developed making use of Knockout JS, a JavaScript framework implementing the MVVM design pattern, to assist in organizing code in a manageable way. The map is loaded using the Google Maps API library and the MediaWikiAPI for Wikipedia is used to add specific content, when available, to the highlighted locations.

Getting Started

To load the app, download a copy of the project to your local machine and open the file index.html with your browser. You should replace the API key with your own key, after getting it from Google. Alternatively, you can load it online from this GitHub Pages project repository. To search for locations, type your query in the input field. You can filter the returned list with the Filter button and you can retrieve the list that was previously returned by the API search with the Get Back button.

Built With

• Bootstrap - Framework for developing responsive, mobile first websites
• Knockout - A JavaScript library that simplifies dynamic JavaScript UIs
• jQuery - A JavaScript library for simpler HTML manipulation and event handling
• Google Maps API - The map API used
• MediaWikiAPI for Wikipedia - the third party API used to provide information when a location is selected

Author

• Daniele Erbì - daniel-234

Notes

The app will display several locations in the city center of Cagliari (Italy) when the page is loaded.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

• I relied on some answers on Stackoverflow and an article to make the map set center and bounds dynamically based on markers and viewport change:
• Stackoverflow - Center/Set Zoom of Map to cover all visible Markers?
• Stackoverflow - Google Map API v3 - set bounds and center
• Learn Tech - Google Maps API v3: Capturing viewport change - use "idle" not "bounds_changed"
• Stackoverflow - Google Map event bounds_changed triggered multiple times when draggered
• To refactor the code to make use of the JavaScript library KnockoutJS, I used the following resources:
• KnockoutJS documentation
• Mastering KnockoutJS - by Timothy Moran
• Stackoverflow - How to display a Google map with Knockout js and HTML
• Stackoverflow - Why am I getting a "Cannot read property 'nodeType' of null" error with Knockout JS?
• To handle the two Views on the same page and the different ViewModels, I relied on this answer on Stackoverflow:
• Stackoverflow - Example of knockout js pattern for multi-view applications
• To understand the Custom Bindings feature of KnockoutJS I read several articles and some book paragraphs. The most important for adapting it to my needs were:
• Mastering KnockoutJS - by Timothy Moran
• Another look at Custom Bindings for KnockoutJS - KnockMeOut
• JSFiddle - Knockout custom binding with multiple parameters
• To update the list View I used some code from the following answer on Stackoverflow:
• Stackoverflow - Remove all child elements of a DOM node in JavaScript
• This discussion forum helped me debug some major problems with the Wikipedia API:
• Udacity Discussion Forums - Wikipedia API problem
• Suggestions to modify the Maps markers icon on mouse click:
• Stackoverflow - Change marker icons on mouseover (Google Maps V3)
• Stackoverflow - Google Maps default icons
• A hint from the discussion forums that helped me fix the problems with infoWindows:
• Udacity Discussion Forums - Open and Close InfoWindow onclick?
• Some suggestions on how to give each marker a different id and to change an element background color:
• Stackoverflow - Adding IDs to Google Map markers
• Stackoverflow - JavaScript adding an ID attribute to another created element
• Stackoverflow - Change background color on anchor in listitem when clicked
• Stackoverflow - Get li element onclick with pure JavaScript without applying onClick to each element
• Todd Motto - Attaching event handlers to dynamically created JavaScript elements
• Stackoverflow - How to append a CSS class to an element by JavaScript
• Stackoverflow - Need an unordered list without any bullets
• I found this post on how to make a child div scrollable when it exceeds its parent height:
• Stackoverflow - How to make child div scrollable when it exceeds parent height
• Suggestions on Error Handling:
• Udacity Discussions Forums - Handling Google Maps in Async and Fallback
• W3C - Centering Things
• Stackoverflow - Add a "new-line" in innerHTML
• Stackoverflow - JSONP request error handling
• Acknowledgement for the README template:
• PurpleBooth - README-Template.md
• I read different posts on how to populate the list View using Knockout 'template' binding instead of DOM manipulation. The most complete suggestion on how to solve the problem of updating the observable array after the array it wraps is updated is the following one:
• Stackoverflow - How do I update UI where there is a change in an observableArray?
• Some answers on Stackoverflow that helped me use localStorage to display some locations by default when the page loads:
• Stackoverflow - How to store array in localStorage Object in HTML5?
• Stackoverflow - Storing Objects in HTML5 localStorage
• Resources I used on how to provide a filter functionality:
• Opensoul.org - Live search with Knockout.js
• KnockMeOut - Utility Functions in KnockoutJS
• "A really great lesson on storing JSON objects within an array in localStorage":
• Stackoverflow - Object properties are undefined after localStorage
• The best way of copying/cloning an observable array in Knockout JS:
• Stackoverflow - Copy items from observableArray to another observableArray
• Stackoverflow - What is the best way of cloning/copying an observableArray in KnockoutJS?
• Udacity Discussion Forums - KO ViewModel can't access global variable? Having trouble implementing filter function
• Udacity Discussion Forums - KnockoutJS remove from observable arrays
• Adding a new property in markers:
• Udacity Discussion Forums - Adding a new property in markers
• Thanks to some hints in these Discussion Forums threads I was able to refactor my code and add CSS styling of list items:
• Udacity Discussion Forums - CSS styling of list items
• Udacity Discussion Forums - Strange Issue. Access of object property returns empty while the console indicates the appropriate value exists
• I relied on this answer on Stackoverflow to add a style binding with property plus value:
• Stackoverflow - Can you add a KnockoutJS style binding specifying property and value together?
• Sample code used to filter the array:
• Stackoverflow - Filter using KnockoutJS