State Of The Map USA: The Game
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 OSM 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 getAnimationFrame instead of
setTimeout if available in-browser, but there’s a lot more work to do in making map-centered 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 exploring.