Random Etc. Notes to self. Work, play, and the rest.

Modest Maps vs Processing

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.

So:

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

Future

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!


16 Comments

Fantastic! This is such a great contribution to the Processing community. Thanks for your hard work.

Posted by Nate Murray on 19 February 2008 @ 8am

[...] Random Etc. - Modest Maps vs Processing 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. (tags: http://www.tom-carden.co.uk 2008 mes1 dia19 at_home maps google_maps processing modest_maps) [...]

Posted by rascunho » Blog Archive » links for 2008-02-19 on 19 February 2008 @ 12pm

This is a great contribution! I’ve already started building some sample processing apps for a postgrad infovis course I teach. Getting live maps is a great bonus for some of the GIS data sources I intend to use.

I’m getting a Java heap space issue in my processing sketch. I haven’t toyed with it much yet so if I figure out a solution I’ll post it here.

Posted by Aaron Quigley on 22 February 2008 @ 4pm

Try changing the maximum number of tiles (256 is the default, which will take 64MB of memory), or upping the memory allowance in Processing (which should be fine as you won’t be running as an applet).

Posted by TomC on 25 February 2008 @ 4pm

[...] prepared a special version of Trulia Hindsight for the show, using the experimental version of Modest Maps I made for Processing in February and animating data for around 1 million homes using OpenGL. We’re [...]

Posted by Random Etc. - W(e are )here: Mapping The Human Experience on 14 April 2008 @ 11am

[...] Random Etc. - Modest Maps vs Processing “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” (tags: maps processing libraries code) [...]

Posted by links for 2008-04-24 (Leapfroglog) on 23 April 2008 @ 10pm

[...] of the most useful references for me in this process was a workshop Tom Carden gave at ETech last year on the data rendering capabilities of a variety of approaches. The readers [...]

Posted by Flash vs. Javascript for Web Mapping Applications: Our Experience with Maker! | Off the Map - Official Blog of FortiusOne on 22 October 2008 @ 7am

[...] Random Etc. - Modest Maps vs Processing nice port of modest maps to processing. visualization maps programming processing.org processing java tools gis [...]

Posted by Brent Fitzgerald / Life & Research Notes / Blog Archive » Links for December 1st through December 13th on 13 December 2008 @ 2pm

[...] d’images: glocal; maeve; Du côté de la cartographie: telegeography; dencity; complexcity; modestmaps; Et quelques liens venant des statistiques: eigenfactor; grid/plane; gephi; Projets de recherche: [...]

Posted by » Blog Archive » Pistes pour la visualisation graphique on 11 February 2009 @ 2am

[...] Processing Code (diesen Artikel zum Thema Maps in Processing sollte man ich vorher anschauen) import processing.serial.*; Serial [...]

Posted by reactions » Blog Archiv » verbogen on 12 January 2010 @ 3pm

[...] cities. The combined map of Guguletu and The Grid below was created with Processing using code from Modest Maps. Purple ellipses represent Flickr snapshots, and are concentrated around local township tour [...]

Posted by Local and tourist in mobile photography | Marion Walton on 24 June 2010 @ 8pm

What api/tools did foursquare use to create the world map overlay for their infographic?…

The map on the 2010 infographic was created using a Processing script I wrote. It basically just takes a CSV file with latitude/longitude pairs, converts them to x/y coordinates, and places a dot for each one. This map was pretty straightforward becaus…

Posted by Quora on 24 June 2011 @ 7pm

[...] Random Etc. – Modest Maps vs Processing (tags: processing processing101 geo maps) [...]

Posted by » links for 2011-07-06 Thej Live on 6 July 2011 @ 9pm

[...] Searching around the net, I was able to find a library for ModestMaps (a BSD-licensed display and interaction library for tile-based maps in Flash and Python) that connected it to Processing HERE. [...]

Posted by Geo Leaks | Computational Art on 19 September 2011 @ 9pm

[...] in Processing, how do we display that on a map? After some searching I came across the amazing modest-maps library written by Tom Carden. Tom has done a superb job of simplifying the job of grabbing and [...]

Posted by Live plotting map data from the dGPS using Processing | mastincrosbie.com on 29 May 2012 @ 7am

[...] to Grips with Slippy Maps Modest Maps vs Processing OpenStreetMap Nominatim Address [...]

Posted by Reverse Geocoding on ModestMaps | TechSlides on 6 July 2013 @ 4am