Cartagen: Rich mapping on the client side

In: web resources

5 Aug 2009

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:

CSS:

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

Comment Form

About this blog

This blog delivers stylish and dynamic news for designers and web-developers on all subjects of design, ranging from: CSS, Ajax, Javascript, web design, graphics, typography, advertising & much more. Our goal is to help you communicate effectively on the web with an engaging website or functional interface.

.
Internet MegaMeeting, LLC Microsoft Store LinkShare  Referral  Program Iolo technologies, LLC Artisteer - Web Design Generator FTPress.com (Pearson Education) Mobile Security: Parental Controls and Monitoring Atom Entertainment (formerly AtomShockwave)
Advertise Here
Web Analytics