Map-KO

Please note that in order to run this application, your browser needs to have Javascript enabled.

• Demo: http://map-ko.jaydeveloper.com/
• Github: https://github.com/jaynguyen89/Map-KO

Project Details: The application is created to demo a combination of KnockOut JS and Google Maps Web API together. In term of KnockOut JS, I aim to get the insights from basic to advanced concepts with the best practices of using KnockOut JS. For Google Maps API, I have used the Javascript Web API to display static map, Geocoding API to do 2-way location coding, Distance Matrix API and Directions API to implement distance calculations and navigation routing suggestions.

Here are some of the main features of the application:

• View can be selected in 3 options: Map only, Table only, and both views.
• People will be displayed in the Map as markers (at their home address) or in table (with basic people information).
• Any actions accomplished on a person at one place (map or table) will be updated for this person at the other place.
• On Map, selecting a marker to view this people's details including the actions on buttons such as "select", "edit", "delete".
• On Table, selecting "details" button on a person will render map for this person with a marker at its home location. All people details will also be displayed. Selecting "close details" button will return the map back to its initial state.
• In editting people, there are fields to update basic informations and home address. There must be a change in at least 1 of these fields in order to execute the updating. While updating home address, location can be auto detected then auto filled into the address fields, or can be inputed manually with real-time map update.
• In deleting people, anything related to the deleted people will be closed or put back to its previous state.
• In adding new people, a warning will display if the required fields are left blank, then nothing would be added to model.
• In manual distance, relevant warning will display according to the number of selected people. If exactly 2 people are selected, distance between them will be calculated, then map will render a navigation route between their locations. If no possible route is found, distance is estimated as the crow files.
• In auto distance, the application will randomly select 2 legal people (who have home address), then behave like manual distance.
• Closing distance will put everything back to original or previous state.
• Reverting to default can only be clickable if there is some change in the page. Switching views while there are some changes will reset the views of these changes.

The demo does not validate user inputs, but checks all user actions to ensure that the logics are maintained the the behaviors of the app make sense.

By completing this demo, I have learned the application of KnockOut JS in developing web applications. Later in my research, I will continue to extend my skills and knowledge in KnockOut by practicing on the following techniques: custom bindings, component registration, virtual elements, asynch observable (rate limiting) and task queue.