API
spam.js exports two classes: StaticCanvasMap and ZoomableCanvasMap. The only difference between them is that the latter provides a zoom function which takes a feature as parameter.
The definition is quite versatile, as having multiple objects in the data definition allows to paint multiple features on the same canvas. Another example: the click event is not only useful for a zoomable map, you can fire a click event on a static map to create extravagant interactions.
d3.json("world-50m.json", function(error, d) {
topojson.presimplify(d)
var map = new StaticCanvasMap({
element: "body",
data: [
{
features: topojson.feature(d, d.objects["countries"]),
static: {
prepaint: function(parameters) {
// prepaint code (graticules, legends...)
},
paintfeature: function(parameters, d) {
// painting code (fill and map stroke)
},
postpaint: function(parameters) {
// postpaint code (labels and data visualization: bubbles, circles, etc)
}
},
dynamic: {
postpaint: function(parameters) {
// dynamic code (paint current element, etc)
}
},
events: {
hover: function(parameters, d) {
// handle hover event (repaint the map, update tooltip, etc)
}
}
}
]
})
map.init()
})d3.json("world-50m.json", function(error, d) {
topojson.presimplify(d)
var map = new ZoomableCanvasMap({
element: "body",
data: [
{
features: topojson.feature(d, d.objects["countries"]),
static: {
prepaint: function(parameters) {
// prepaint code (graticules, legends...)
},
paintfeature: function(parameters, d) {
// painting code (fill and map stroke)
},
postpaint: function(parameters) {
// postpaint code (labels and data visualization: bubbles, circles, etc)
}
},
dynamic: {
postpaint: function(parameters) {
// dynamic painting code (hover visualization, etc)
}
},
events: {
click: function(parameters, d) {
// click code here (zoom)
}
}
}
]
})
map.init()
})