State Of The Map USA just announced that this year’s
conference will take place in Portland, Oregon the weekend of October 13th and 14th,
and with the announcement launched a new online presence that is not
your typical conference website. Saman
and I collaborated to make a site that’s interactive in new ways: it’s a game.
The site uses Modest Maps at its core, with a lot of neat tweaks.
Since State Of The Map is for and about OpenStreetMap,
the basemap is of course OpenStreetMap. But for this site we wanted a slightly
different look, so I implemented a Modest Maps layer type called
modLayer, which lets you define a custom
function that uses HTML5 Canvas
to modify each tile.
The function can pixellate tiles, recolor them, and much more,
but in this case it tones down the map. Since this requires
CORS support to work and the standard
(in terms of image elements and canvas) has gone
unimplemented in Safari, Internet Explorer, and Mobile Safari,
it falls back to normal OpenStreetMap tiles on those devices.
The filter we use for this site is a good example of
how this works.
The site uses markers.js to position
markers on the map and custom keyboard bindings to let the character walk towards
them. It’s based off of the ThrowableHandler
example from Modest Maps, but with a callback that allows the application to
understand the walking direction and speed. You can check out
the source to the handler,
and, while this site doesn’t use a library for other keyboard events,
we might adopt keymaster
as the number of actions increases.
Saman created a series of walking and idle sprites to give the character
a bit of life - bouncing, running, blinking, and so on. Some of the other
elements, like the fish, are
animated GIFs for
combined using gifsicle and designed,
like the sprite, in Inkscape.
Performance on the site is a matter of optimizing the many elements that
could be ‘activated’ at any time - some of which are affected by location,
and others more statefully by the actions of the user.
Right now the site is relatively performant - it makes use of
instead of setTimeout if available in-browser, but there’s a lot more work to
do in making map-center experiences like this fast and interactive.
The site has quite a few little secrets - places you can go, things you can do.
It’ll probably gain quite a few more before the conference. After all, it’s
all about creating new things with OpenStreetMap, open source code, and