Al's Austin Map
Project Overview and Usage
The title for the website is "Al's Austin Map". It starts with a list of about 20 locations in Austin, TX (the model) and utilizes the Google Maps API and the Wikipedia API to display markers for the locations on the map. A menu interface is also provided which provides a clickable list of the locations.
Clicking on either a marker or the menu item for a location will have
exactly the same effect, as the clicks are handled by the same
click() method for the associated place.
The first click will "select" the place, change the color of the
marker and the appearance of the menu item. Clicking a second time
will trigger an asynchronous JSONP request to wikipedia to get some
basic information about the place. Once this async request is
callback function pops up a google maps
containing the received information.
Note that the information retrieved for the
InfoWindow is cached so
that subsequent requests to display this information will display the
cached data and not trigger another async JSONP request.
There is a hamburger icon in the upper left corner of the web page. Clicking this icon will toggle the visibility of the menu. When the site is viewed from a smart phone or smaller tablet, the menu is large enough to be useable and this obscures the map when the menu is visible. So, for these smaller devices, when a menu item is selected the menu automatically disappears revealing the map. (On larger devices the menu remains visible.)
At the top of the menu there is a magnifying glass icon and a text entry field. Any text entered here is used to filter the locations as you type and update the menu and map appropriately, displaying only those locations containing the typed text.
The architecture is based on the M-V-VM pattern and uses the knockout framework. In addition, the VM (View Model) portion consists of a number of objects each representing a particular aspect of the model or of the view.
An instance of the
Place class corresponds to a JSON object in the
model. It is linked to an entry in the Menu_View object and also to a
Marker_View object. A number of Place properties are defined as
knockout observables which are subscribed to by the Marker_View object
and by the menu item element.
A place has a knockout observable
state() which ranges over [0,1,2,3]
and is interpreted as follows:
- state = 0: place is hidden
- state > 0: place is visible
- state > 1: place is selected
- state > 2: place's InfoWindow is shown
These properties, hidden, visible, selected and infoShown are all defined as knockout computed observables. Defining things this way guarantees that a place's state is always well defined and we have the following invariants:
- info_Shown => selected
- selected => visible
- visible => not hidden
Updates to the state of a Place are only done by the
on that place. And the effect of that click is handled by a method
linked to the appropriate observable.
The code in this repository is licensed under the ISC license of the Open Source Initiative.