Al's Austin Map

See demo

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.

Al's Austin Map

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 fulfilled a callback function pops up a google maps InfoWindow 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.

Architecture

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:

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:

Updates to the state of a Place are only done by the click() method on that place. And the effect of that click is handled by a method linked to the appropriate observable.

License

The code in this repository is licensed under the ISC license of the Open Source Initiative.