We were asked to develop a single-page application featuring a neighborhood map, adding additional functionality to this application, including: map markers to identify locations, a drop down function to easily filter these locations, and a listview to support simple browsing of all locations. We needed to implement a third-party API that provides additional information about each of these locations.
Open index.html in a browser.
The screen will show a Google Map of the Denver Metro Area, with several locations of interest set up as pins on the map. Locations can be chosen by:
- Clicking on a marker directly
- Clicking on an item in the list on the left of the screen by opening the menu button.
A box will pop up over the chosen marker, giving the location's name, a streetview and the current temperature.
The user can also filter the displayed markers by city by using the drop down Filter List button above the list. This will narrow the markers down to display matching city locations only.
The User can reset the map by clicking on the Show All Dog Parks button in the sidebar menu.
Clicking on the left arrow or the menu button on the sidebar to hide it. Clicking on the menu button will display the list. The list will be hidden if a location is clicked, if a city is selected from the Filter by City button or is the Show All Dog Parks button is clicked.
- KnockoutJS info
- Google Maps API Reference Documentation
- Icon Archive for Tennis Ball Marker Icons
- JavaScript Callback
- Additional inspiration taken from the best Developer I know Derrick Gremillion