Layers

This page goes into detail how the definition of map layers works in spam.js.

A layer is a specific object in the data array that is passed into the constructor of each class. A typical layer definition looks like the following:

{
    features: topojson.feature(d, d.objects["map"]),
    static: {
        paintfeature: function(parameters, d) {
            parameters.context.fillStyle = "black"
            parameters.context.fill()
        }
    },
    dynamic: {
        postpaint: function(parameters) {
            if (!hover)
                return

            parameters.context.beginPath()
            parameters.context.lineWidth = 1 / parameters.scale
            parameters.path(hover)
            parameters.context.stroke()
        }
    },
    events: {
        click: function(parameters, d) {
            parameters.map.zoom(d)
        },
        hover: function(parameters, d) {
            hover = d

            parameters.map.paint()
        }
    }
}

You can see how each layer defines the features it wants to render and then uses different functions to draw them. To understand the general purpose of this split, please read the top-level README. You can also define different event handlers.

The following paragraph details the different members each layer definition can have.

Properties

# features: topojson.feature(d, d.objects["map"]).

The TopoJSON FeatureCollection you want to paint.

# static: object (optional)

The static object can have the following functions.

# prepaint: function(parameters, d) {}

Fires up before paintfeature and is useful for creating elements that only need to be painted once, for example graticules.

# paintfeature: function(parameters, d) {}

The main painting event. This is where you can use canvas to paint the stroke of your map or fill it with colors to create a choropleth. This function gets called once for every feature in features.

# postpaint: function(parameters, d) {}

It gets called once after all calls to paintfeature are done. You can use this event to create objects on the top of the map like labels, annotations, circles or bubbles.

# dynamic: object (optional)

The following functions are used for dynamic painting. These functions get called a lot more often than the static ones, be careful when putting performance critical tasks in there.

Both functions get called when the map gets repainted. Repaints usually have to be triggered manually, for example in the hover event handler.

# prepaint: function(parameters) {}

This function gets called before the static image gets painted on the map. This makes it the first thing that gets called after the canvas is cleared.

# postpaint: function(parameters) {}

This function gets called after the static image gets painted.

# events: object (optional)

The following objects are useful to handle events/interactions with the map.

# click: function(parameters, d) {}

This function gets called everytime the user clicks on the canvas. The 'd' parameter will be the clicked feature or null, in case the click was not on any feature.

# hover: function(parameters, d) {}

This function gets called everytime the hovered feature changes. If the mouse is not over any feature, the 'd' parameter will be null.