SVG Mapping

If you don't need a fully interactive, zoomable and draggable map then you can use Scalable Vector Graphics to display a simple map on a web page. SVG maps tend to be simple (non-zoomable and non-panning) image maps but can contain interactive areas and can often be shaded to provide simple heat maps.

There are now a large number of libraries available to web designers that can help display a SVG map. Here are a few of the better known SVG mapping libraries:

jQuery Mapael is a jQuery plugin for creating dynamic vector maps. Currently Mapael has world maps and maps of the USA and France. It is also fairly straightforward to create your own maps of other countries using SVG files of other maps.

Kartograph provides both Python and JavaScript libraries for creating SVG maps.

jVectorMap is a jQuery plug-in for creating interactive maps, using SVG in modern browsers and VML in IE 6-8. The plug-in includes a large library of maps of the world, world regions, countries and cities.

Google's GeoChart is a handy tool for rendering SVG or VML maps. The tool includes options to display continent and country maps, to add shading to areas of the map and to add simple markers and information windows.

amMap is a JavaScript library for displaying SVG maps. amMap has an easy to use API for displaying interactive maps of may countries around the world.

Makeaclickablemap is a handy wizard for creating SVG maps. Currently the wizard allows you to create free SVG Maps for the USA and provides a premium service for a number of other countries.

With the free USA SVG map the wizard provides a number of options to define the size of the displayed map, to color individual states, add labels and tool tips and to create hyperlinks. Once you have used the wizard to create your SVG map you simply need to grab the code to embed the map on a webpage using a simple iframe.