Open source JavaScript renderer for Kartograph SVG maps
CoffeeScript CSS JavaScript Other
Clone or download
Latest commit d3d3f2e May 22, 2017
Failed to load latest commit information.
demo Update demo/ Jul 24, 2012
dist fixed proj.fromXML May 15, 2014
doc doc update Nov 27, 2011
lib simple test page Mar 20, 2013
src fixed proj.fromXML May 15, 2014
tests updated test Aug 26, 2013
.gitignore .. Sep 1, 2012 fixed exposure of global classes May 15, 2014
LICENSE switched to LGPL Aug 9, 2012 exposing projections and kartograph.View May 9, 2014
package.json fixed exposure of global classes May 15, 2014 Update May 22, 2017

This project is not maintained anymore.

Here are a few reasons why I stopped working on kartograph.js:

  • there's no need to support non-SVG browsers anymore, so if I would touch kartograph.js again I would through out the Raphael.js dependency, which would result in a complete re-write which I don't want to spend my time on, because...
  • d3.js is an amazing library that can do all the vector mapping that you need! Also d3.js has much more map projections and is more fun to work with.
  • Finally, TopoJSON beats SVG as vector geo data format.

So, thanks for the good time we had!

Of course, if you still want to take over from here, kartograph.js is all yours. Just send me an email.


Kartograph.js is a JavaScript library that renders SVG maps in web browsers. It is built on top of jQuery and RaphaelJS. Please have a look at the API docs for more details.

Initializing a new map

map = $'#map', 600, 400);
map.loadMap('world.svg', function() {
	map.addLayer('countries', {
		styles: {
			fill: '#ee9900'
		title: function(d) {
			return d.countryName;

Choropleth maps (aka coloring map polygons based on data):

pop_density = { 'USA': 123455, 'CAN': 232323, ... };

colorscale = new chroma.ColorScale({
	colors: chroma.brewer.YlOrRd,
	limits: chroma.limits(chroma.analyze(pop_density), 'k-means', 9)

map.getLayer('countries').style('fill', function(data) {
	return colorscale.get(pop_density[data.iso]);

Adding symbols is easy, too:

cities = [{ lat: 43, lon: -75, label: 'New York', population: 19465197 }];

	data: cities,
	location: function(d) {
		return [d.lon,];
	type: Kartograph.Bubble,
	radius: function(d) {
		return Math.sqrt(d.population) * 0.001;

### Author

Kartograph was created by [Gregor Aisch]( It is supported by [Piwik Web Analytics]( and the [Open Knowledge Foundation](

### License

Kartograph.js is licensed under [LGPL](