If you search the internet for ‘alpha to color’ you get lots of results describing how to convert ‘color to alpha’ and its applications. Here we will be doing the opposite: converting alpha channel to color and demonstrating how it can be useful for visualization.

Colorize-alpha image-filter is the son of the popular colorize-alpha compositing operator by Tom. We wanted to have more control over which colors are used, and how colors are distributed. To achieve this we moved colorize-alpha to image-filters.

How it works

The new syntax, and an explanation of how this filter is different from the original compositing operation, are best done through a working example.

OK, let’s make a map. Heatmap to be precise.

As usual we start with some data. In this case I downloaded London and neighbouring forces dataset 2011 from Police.uk. The dataset comes in CSV format and is quite large. To make it a bit more useful, I loaded it into PostGIS.

I use point geometries for this particular example but it can be anything else. The important thing here is that the symbolization should have a variable ‘alpha’ channel to achieve the desired effect. We’ll use a simple ‘marker’ icon with radially distributed alpha channel from $MAPNIK_SRC/tests/data/images/marker.png


(NOTE: I used a modified version of the original image with more transparency and scaled down to 32x32 px).

Colorize-alpha is an image-filter and works at the layer level. Technically, we accumulate alpha channel values from densely positioned markers and convert this value to the color. Simple. The result? A poor-man’s heatmap.

    image-filters:colorize-alpha(blue, cyan, green, yellow , orange, red);

london-2011-11- anti-social-behaviour

  • Hotspots of anti-social behaviour in London, UK (November 2011)


We have chosen CSS/SVG linear gradient syntax as a basis for this filter. In its simplest form, it should have at least two color stops e.g:

image-filters="colorize-alpha(cyan, pink)"

But it can also have any number of stops followed by an optional stop position (either a percentage between 0% and 100% or a normalized length (0…1)

Here is a rainbow filter:

image-filters="colorize-alpha(cyan, blue, green, yellow, orange, red)"

And the formal grammar:

colorize-alpha( <color-stop> [, <color-stop>]+ )
                    List of color stops (2..N)
                where  <color-stop> :=  <color> [  <percentage> |  <length> ]?
                and <color> is any valid CSS color


As you can see this simple technique can be deployed to achieve interesting visual effects. While ‘hot-spot’ mapping above is the most obvious use-case, I bet there’ll be more awesome looking maps originated from creative usage of this filter.

Have fun!