Maps are vectors, treat them with respect!

Maps are representations of spatial data. They are bunch of symbols that fit together to make sense of the world. Then why oh why do we still use bitmaps and raster images to render these maps, when they are vector shapes and not imagery? Even if you use tiles to render scalable maps, that still involves raster images that need to be loaded every time you zoom in and out of an area, or pan to a different view. The result is that the server that serves these images is being put under undue stress.

SVG renders shapes and visualizations in the browser, and hence completely scalable. The advantage of using SVG is that you don’t have to serve map tiles from a server and then load these tiles on a client screen. You can just render the map on the client screen itself, making the page and map load faster, and reducing the amount of data transfer required. What you get is a vector shape that looks equally sharp on the small screen as it does on a large one. SVG is quick to load and most of the browsers today (except IE 8 and below) and mobile devices already have SVG support. Moreover, there is NO pixelation, no blurred edges and you can style your maps very easily using CSS3, which in itself kills off the need for pre-designed map tiles.

As a developer, you can always incorporate fallback techniques to your SVG maps to load them on a browser without SVG support. What you get is a win-win situation where modern browsers can render the map in a vector format, while those who still use ancient browsers can still see your maps as PNGs.

Great minds have already gone ahead and built libraries to help you easily render your maps in SVG.


JQVMAP is a jQuery based plugin that allows you to render SVG maps, also providing legacy support for older browsers.


The folks over at Stamen Design and SimpleGeo have built Polymaps, a very nice JavaScript library that helps you develop SVG based mapping applications.


Kartograph is a framework to build interactive mapping applications, rendering maps in SVG. Where Kartograph is unique is that  it provides libraries in Python and JavaScript to help you create interactive mapping applications off the bat.

D3 (Data Driven Documents)

D3 is more of a JavaScript library for visualization than rendering maps, but you can render maps using the library, if you are so inclined.

SVG is here to stay, and it does a better job of rendering maps than images do. Treat your maps with respect and start rendering them in SVG.


Humanitarian OpenStreetMap Team: Saving Lives Through Maps

OpenStreetMap has a humanitarian chapter called the Humanitarian OpenStreetMap Team, or HOT. HOT was formed with a view to provide high-quality maps to disaster stricken areas around the world. Whenever disasters such as storms, earthquakes, floods and famine strike, the first thing that any rescue and evacuation team needs is the lay of the land. This lay of the land can be obtained via maps and satellite images. While developed countries do have in their possession a series of detailed maps of their land, it is the more backward countries and regions that suffer the most. Without detailed maps and images, it is difficult for rescue teams to think of a strategy to get to the affected areas, because they have no idea what regions have been affected and what not. Knowing exactly the extent of the affected land and the possible routes by which the victims can be rescued can help save a lot of lives.

HOT members are placed all around the world, in disaster-stricken areas and are actively involved in producing high-quality, accurate maps of the affected regions. These maps are available free of cost to the rescue and evacuation teams. HOT members work physically at the site of the disaster-prone regions to map the region, creating highly detailed and reliable datasets.

One of the more famous examples where OSM data was used for disaster management was during the Haiti earthquake of 2010. Immediately after the 7.0 magnitude earthquake struck, the OSM community began tracing the roads in the affected area based on available satellite images. After the first satellite imagery was available in 48 hours, over 600 people edited and added information to the map over the month.

A video was produced which shows the data added over the month the earthquake struck.

It is heartening and encouraging to see that people are pouring immense efforts to make the world a better mapped place.

You can read more about HOT here and here.