Cartagen: Rich mapping on the client side

Ajaxian » Front Page by Dion Almaer

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. }
Cet article a été publié dans Uncategorized. Ajoutez ce permalien à vos favoris.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:


Vous commentez à l'aide de votre compte Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s