API

Kartograph.js API documentation

Loading SVG maps

map = new kartograph.Kartograph('#container');
map.loadMap('map.svg', function(map) {
	// do something
});

Adding layers to view

The first thing you want to do after the map has been loaded is to set up your layer configuration. Kartograph SVG maps can store multiple map layers.

map.addLayer({
	id: "countries"
})

You can specify a key attribute which will be used to identify the polygons in other API functions.

map.addLayer({
	id: "countries",
	key: "iso3"
})

Per default, the layer polygons will get the layer id as CSS class name. If you want to set up a different class name (for instance if you need to add a layer multiple times), you can do so via className attribute:

map.addLayer({
	id: "countries",
	className: "mycountries"
})

Filtering polygons from a layer

map.addLayer({
	id: "countries",
	className: "usa",
	filter: function(d) {
		return d.iso3 == "USA"
	}
})

Symbol maps

new Kartograph.SymbolGroup({
	map: map,
	data: mydata,
	type: "Bubble",
	radius: function(d) { return Math.sqrt(d.value) }
});

Choropleth maps

In choropleth maps, each map region will be colored according to some data value. Again, the data object should be a dictionary of region keys to whatever you want. Kartograph will call the function for every region of the specified layer. If you leave out the layer parameter, the last added layer will be used.

map.choropleth({
	layer: 'countries',
	data: mydata,
	colors: function(d) {
		return '#f94'; // return color based on data value/object
	}
});

For more advanced color features like interpolation and color scales I'd suggest to use Chroma.js, which is kind of a side project of Kartograph.

colscale = new chroma.ColorScale(
    colors: ['#F7E1C5', '#6A000B'],
    limits: chroma.limits(mydata, 'quant', 5)
});

map.choropleth({
	layer: 'countries',
	data: mydata,
	colors: function(d) {
		return '#f94'; // return color based on data value/object
	}
});