Hawaii neighborhood map

Single-page responsive web app

Brief Description

A responsive map that shows you attractions to visit around Honolulu, Hawaii. On the sidebar, there is a list of the locations that can be clicked on and also filtered to show certain attractions.

Technology Used

  • Javascript
  • HTML
  • CSS
  • Bootstrap
  • KnockoutJS
  • Google Maps API
  • Wikipedia API
  • JSON
  • AJAX

The Challenge

As part of the Udacity Front-end Nanodegree, I was required to build a neighbourhood map single-page application using KnockoutJS MVC framework and information sourced from various APIs such as the Google Maps and Wikipedia APIs.
item.left_alt_tag ||
Screenshot of neighborhood map

The Process Taken

Created a single-page responsive web application using the Bootstrap and Knockout MVC Framework. API calls are made to Google Maps and Wikipedia APIs. When the data is successfully returned, the map is created on the canvas with the location pins and the JSONP from Wikipedia is parsed and the info displayed to the user. Users can then search all included landmarks and, when selected, additional information about a landmark is displayed.