Modest Maps vs Processing

18th February 2008 @ 10:15 pm
Update 2011-10-10: This project is now hosted on github, please download the latest version there and file an issue if it's not working for you. Thanks!

Since Mike simultaneously outed me and out-did me and linked to the Processing folder of the Modest Maps source at the same time, I thought I'd better post a version of the library I've been working on so that I can stop thinking about it for a while.


Modest Maps is a BSD-licensed display and interaction library for tile-based maps in Flash (ActionScript 2.0 and ActionScript 3.0) and Python...

...And Processing

The greatest thing about Google Maps, and the follow-up hit album API, is that it made a big song and dance about the concept of continuously scrolling maps. So now everyone has to have one. Google, Yahoo, Microsoft and many other big companies have server farms full of tiled maps of varying zoom levels, and free-to-use javascript APIs to let you put your own data on top of them. Sadly, they don't all offer a way to use those same images in Flash applications, which is what prompted my colleague Mike and friends to write the original Actionscript 2 version of Modest Maps (and our subsequent port to AS3 and Flex) nor is it possible to use the map images server-side, which prompted the port to Python. Python is also Mike's thinking language of choice. Mine is Processing, so improving Modest Maps has always been something of an uphill struggle for me. (I've also been in this territory once before, with Mapstraction, so I was reluctant to dive in again with the tool-making).

Because of restrictions on how Java applets load images from third-party domains, a Processing applet won't be able to access anyone else's image servers directly. I've resisted porting/implementing Modest Maps in Processing until now for that reason. However, thanks partly to my renewed interest in Processing and OpenGL, and thanks partly to a desire to re-implement the Actionscript 3 version of Modest Maps to take better advantage of matrix transforms, I've finally caved in and worked on it.

Modest Maps Processing Grid

To the matrix transformation end, I've knocked together a little sketch that shows how to scroll around a tiled world that uses the same scheme as Google Maps: numbered zoom levels, rows and columns. Use the mouse to drag and the +/- keys to zoom in and out. Rows and columns start at zero in the top left, zoom level 0 has 1 row and column, zoom level 1 has 2, zoom level 2 has 4, zoom level 3 has 8, and so on in powers of 2 such that zoom level 17 has 131,072 rows and columns. At zoom level 17 that means there are (131,0722) or 17,179,869,184 tiles in the whole world, if you render them all (and you probably wouldn't)!

Once that bit is figured out, it's a case of getting hold of an image for each tile, and the logic for this is most succinctly expressed in the Modest Maps Python source code. I've ported that over to Processing with as few changes as possible, and a bit of testing and bit more thinking later I'm ready to offer up a test application (mac, windows, linux) to show what it's like so far:

Modest Maps Processing App

There are some things that this version does, that the Flash one doesn't:

Sadly it also currently redraws everything on every frame (for 100% CPU Usage™, ask for it by name) – that will have to be fixed if we port this code back to Flash.

The Code

I'm not quite ready to distribute and support a library, but if you're not comfortable with grabbing the code from subversion and compiling for yourself, here's a zip file with a .jar file for your code folder and an example .pde file to get you started. I've thrown in some buttons too, no extra charge! The API is largely the same as the Actionscript 3 version: panning and zooming are solid, and it's easy to get the lat/lon location of points on the screen, and the point on the screen for lat/lon locations.

Update:I've updated the zip file above with a version that should work with Processing 0154. Let me know if there's a problem. the old one is here if you need it


Better documentation, animation (perhaps with Lee Byron's ShapeTween), event handling and such will have to wait for a future version: contributions and bug-fixes are welcome, feel free to leave a comment here if you'd like to get in touch.

The Final Word

Nobody from Google, Microsoft or Yahoo has given me, or you, permission to use their images within Processing. Apart from the fact that it won't work as an applet anyway, I should state clearly that I'm really only offering this library for personal use, and that it's covered by the same BSD license as the rest of Modest Maps, which comes with absolutely no warranties or guarantees. Caveat Coder!