January, 2012 Archives

The Washington region’s iconic Metorail map is a topological map that plays with scale in order to efficiently display the lines and the stations. I created my own map which allows you to play with other distortion schemes.

Primarily, the map will adjust to reflect travel times between stations (sometimes called an isochrone map). When you select a station, the others are re-arranged so that their distances (as the crow flies) are proportional to the travel time, while preserving the direction, based on their true geographic coordinates.

For the sake of simplicity, I am making up travel time based on the number of stations and the number of transfers. All neighboring stations are considered to have the same travel times. Initially, the “psychic” cost of a transfer is free, but a control below the station list lets you assign a cost to transfering, in terms of the cost of station travel. (A future update will let you use actual travel times.) » Continue Reading…

Metro Distortion Map

The original, unfinished version of this sat unused for a few months. That version began with three heads on a beach, with a single stick figure approaching and spray-painting a mustache on one. It didn’t flow or make sence (not that any of the others do), so I started over with the idea of having a kid annoy one of the heads. I kept adding kids, until at seven I decided to turn this into the unauthorized sequel to The Sound of Music. The heads were supposed to retaliate by zapping beams from their eyes, or swatting the figures with frog-like tongues and eating them, but tongues are hard to draw, and the zaps didn’t have the pleasing movements of jumping monuments.

Easter Island

The proliferation of location-aware devices makes geolocation a powerful tool for any application, especially when combined with all the available data that can be retrieved with geographic parameters. HTML5 has standardized how web apps can get location data from the user.

A good place to start learning is the wonderful “You Are Here” chapter in Dive into HTML5. I took his example and tried to slim it down a bit more. For this blog entry, I’m leaving out the geo-location-javascript library geo.js, which would expand the functionality to non-standard mobile platforms. I’m also leaving out Google’s Gears, which is no longer being supported, and in any case I don’t care about older browsers not working.

To draw the map, I use the Google Static Maps API instead of the more-complicated Google Maps JavaScript API. (The static API lets you specify a map just by configuring URL parameters.) This also eliminates another JavaScript library. » Continue Reading…

Sensing the User’s Location