vtllf mailrss

Aerial imagery + CSS blend modes

Jun 2014

Aerial imagery with brightly colored pockets of land use

The latest builds of Firefox and Chrome support CSS blend modes in a way that’s very easy to use with Leaflet maps. Blend modes can bleed the color of one layer through to those below it.

This demo combines aerial imagery from Auckland Council with land use zones from the proposed Auckland Unitary Plan.

Examples

Multiply
Multiply
Hard light
Hard light
Color burn
Color burn
Difference
Difference

Use it yourself

// Set up a layer as usual
var layer = new L.TileLayer(…).addTo(map);

// Choose from:
// normal, multiply, screen, overlay, darken, lighten,
// color-dodge, color-burn, hard-light, soft-light, difference,
// exclusion, hue, saturation, color, luminosity
layer.getContainer().style.mixBlendMode = 'color-burn';

// Also, CSS filters (needs to be vendor-prefixed for Chrome)
layer.getContainer().style.filter = 'grayscale(50%)';