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.
#londoncrime
{
image-filters:colorize-alpha(blue, cyan, green, yellow , orange, red);
comp-op:multiply;
marker-allow-overlap:true;
marker-file:url(/heatmap/marker.png);
}
- Hotspots of anti-social behaviour in London, UK (November 2011)
Syntax
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
Conclusion
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!