API

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.

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