Skip to content
gka edited this page Jan 23, 2012 · 11 revisions

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"
	}
})

Choropleth maps

map.choropleth({
	data: mydata,
	colorscale: new chroma.ColorScale({
		colors: chroma.brewer.Reds,
		positions: dpos(8,.5),
		limits: [0,max]
	})
});
``
Clone this wiki locally