Thoughts on vector based mapping

Traditional...wait, I have to put that in quotes..."Traditional" web mapping, as you see in pretty much any web mapping application, relies of raster tiles to convey the base map. The reason for this approach is pretty simple: You can convey a ton of information in a raster image simply by changing the colors of pixels. And it's highly performant. As many pixels in your image is as many points of information you can portray.

But there's been a lot of buzz for awhile about the possibility of vector based mapping. Vector mapping is essentially pushing the underlying data used to build a map to the client, instead of the fully assembled map. By pushing vectors to a client (browser or mobile application) you can push the assembly of the map into the client machine, saving quite a bit of work on the server side. But it also gives you a lot of capabilities that are absent from raster maps. For instance:

1. Reprojection and restyling on the fly: If you are assembling a map based on vectors, you're just providing the base map data and allowing the local app handle constructing the map. That allows you to do interesting things like reproject and restyle a map in the client and on the fly.
2. Graduated map drawing: You can draw the map while the user watches, instead of loading it tile by tile.
3. Perspective changes: You can tilt maps, create 2.5D or 3D maps, do all sorts of things based with the data.
4. Fluid transitions: Instead of jumping between zoom levels, you can have smoother transitions as you navigate a map.

This comes at a cost to the client of course, you have to have a device of sufficient power to assemble the map. Fortunately, a variety of new technologies in the browser are making that happen. Here's the basic approaches developers are taking:

Google Maps for Android: Google Maps for Android uses vectors to draw the maps. It uses a custom vector format and pushes it down to the application where it runs on the mobile device. If you have an Android phone, chances are you have vector mapping already on that device:

Scalable Vector Graphics (SVG): SVG has been around for awhile, and has even been used by Google for rendering overlays on Google Maps API maps. But it was always held back by the performance in the browser and lack of support by IE. IE9 finally gives support for SVG, and most modern browsers are now performant enough to use it. Polymaps, a JavaScript library, was the first major implementation of vector mapping for the web that I saw. It allows developers to draw maps using SVG and style them using CSS styling. I think SVG is still a little slow, but it is now widely supported and the CSS styling is a great way for developers to style maps.


Canvas: There's been a lot of hall-way talk at conferences like WhereCamps and FOSS4G about using HTML5 Canvas to render vectors, pushed down in a standard format. I haven't seen any great implementations, but Canvas is also widely supported in the browser and generally has good performance.


WebGL: WebGL gives the browser access to a machine's graphics card to do rendering, giving it some tremendous power. Browsers traditionally only had that kind of access through plugins like Flash. Google launched an experiment last week called MapsGL. It's pretty awesome. We've got buildings, smooth transitions, and nice animations of 45 degree imagery. The downside of WebGL is that it isn't widely supported yet in the browser. Currently only Chrome 14 and later versions of Firefox have good enough support for MapsGL. And currently Microsoft has no plans to support it. My hope is that WebGL will take off because of the power that graphics processor gives maps developers.


This isn't meant to be an exhaustive list, feel free to add other approaches you've seen or implemented. I'm really excited by vector mapping and want to see it succeed. I really feel like it's "The Future"