Monday, August 3rd, 2009

Cartagen: Rich mapping on the client side

Category: Canvas, Mapping

Ben Weissmann is one of the researchers at the MIT Media Lab’s Design Ecology group who’s working on Cartagen, a vector-based, client-side framework for rendering maps in native HTML 5. It’s impressive. Here he explains more:

Using JavaScript and HTML5’s canvas element, Cartagen takes data (including OpenStreetMap data) and renders it in the browser. This provides significant advantages over image-based mapping systems like Google Maps, because maps are generated on the fly, meaning that data can be mapped in real-time without needing extensive server-side rendering. Cartagen uses Geographic Style Sheets (GSS), which is a JSON- and CSS-based stylesheet language for styling maps. GSS can specify how the map in rendered, including fill and stroke color, widths, labels, outlines. GSS can describe interactive behavior like context menus, click styles, and hover styles, as well as accept JavaScript functions instead of static values. As an example, we rendered the world using accurate geographic data, but styled as if it was a Warcraft map. The project is free and open source software — the source is available, and the project is actively seeking contributors. The project’s website has a live demo and more details.

The pieces such as GSS are really interesting. Here is part of the example maps GSS:

  1. highway: {
  2.     strokeStyle: "white",
  3.     lineWidth: 6,
  4.     outlineWidth: 3,
  5.     outlineColor: "white",
  6.     fontColor: "#333",
  7.     fontBackground: "white",
  8.     fontScale: "fixed",
  9.     text: function() { return this.tags.get('name') }
  10. }

Posted by Dion Almaer at 6:15 am

3.9 rating from 54 votes


Comments feed TrackBack URI

Great idea, wrong platform.

Comment by Darkimmortal — August 3, 2009

I’ve tackling web maps for some time now, I don’t think this approach can work on a large scale. So far the best solution I found was to use image overlays (similar to what google is doing with Panoramio or Wikipedia). Even large amounts of markers fail in browser environment.

Comment by utvara — August 3, 2009

Really great idea, but it shows how far we have to go with canvas and javascript performance. Right now it performs like a massive illustrator file that I want to “flatten”. Then again, maybe that’s just it, there is something to be said about rendering huge vector images. Trying to watch a Pixar film “live rendered” would take a while…

Criticism aside, I am really looking forward to where this is going. It is an amazing example of the power (and limitations) of the client side.

Comment by birdtakesbear — August 3, 2009

I love the way the progress indicator once in a while jumps back in percentages, eg. from “71%” it jumped back to “69%” ;P

Comment by rasmusfl0e — August 3, 2009

Looks like a base for creating games.

Comment by nataxia — August 3, 2009

Great idea, but the code is god awful. Inheritance needs to be used properly.

Comment by TNO — August 3, 2009

@TNO — are you commenting on how this open source project uses a programming idiom (Prototype.js) the the majority of developers don’t use, and therefore guarantees that this project is stillborn? Or something else? Because he has certainly tried to write good code.

Comment by nataxia — August 3, 2009

@nataxia: TNO means inheritance, not a framework. Looking at the code ‘this’ isn’t used properly but he get’s away with that since there’s not much inheritance going on at all

Comment by Jadet — August 3, 2009

Yes, you’re correct on the prototype portion. I didn’t realize it was using that library until I took a second glance at it. (I was viewing bottom up before). The layout of the code is very nice though I admit.

Comment by TNO — August 3, 2009

No matter how many technologies and hacks come and go, SVG is the best option for maps.

Comment by Ajaxerex — August 3, 2009

The street data is comically terrible. Now I feel obligated to at least fix my neighborhood. :-/

Comment by Nosredna — August 3, 2009

Impressive technology, but as per previous commenters I don’t expect this will scale to production systems just yet. While us developers will quite happily marvel at the technology that is being used, site visitors are not likely to wait around for a map to render.

I do look forward to seeing where the technology goes and hope Weissmann continues to push on in this area.

Comment by doehlman — August 3, 2009

Just amazingly slow. Why not use Google Maps?

Comment by ExtAnimal — August 4, 2009

Leave a comment

You must be logged in to post a comment.