I’ve previously written about the new raster support TileMill has due to the raster-colorizer functionality, which makes it quick and easy to turn elevation data, single-band raster data, and and multiband imagery into beautiful, custom map layers to integrate into your maps and web applications. There are still more ways you can leverage the colorizer within TileMill to produce a custom-designed web map from a raster data source.

[![Japan Land Cover Mapnik raster-colorizer by MapBox](https://farm9.staticflickr.com/8365/8495388191_774263e270_o.png)](http://a.tiles.mapbox.com/v3/herwig.japan-land,herwig.map-behmiof5.html#7.00/42.832/141.993)

Discrete Raster Data: Land Cover

Contextually styling a discrete raster data set – a task once completed over several steps across different applications – can now be completed within TileMill, our open source design studio. When you contextually style raster data, you bind a color value to particular pixel values, which is great for highlighting urban areas using a bright color, making no-data pixels appear transparent, and grouping similar categories, like types of tree cover, into larger categories and making them all green.

Previously, if I wanted to make a custom land cover map layer from a raster dataset, such as this one available from the Japan Aerospace Exploration Agency, I would have to go one of two routes.

  1. Raster to Vector - Polygonize the raster dataset, using a tool like gdal_polygonize sacrificing some dataset precision in order to produce polygons from the pixel-based datasource.
  2. 1 Band Raster to Color Relief - Use a command line tool like gdaldem color-relief, to assign RGB values to pixel values. This produces a three-band RGB image from a single-band raster source.

Now, the only pre-processing required is to reproject the dataset to Google Mercator projection, using an application like gdalwarp. Then, all styling of the raster data can be accomplished from within TileMill using CartoCSS.

Since we’re using a land cover geotiff with specific pixel values mapping directly to land cover classifications we want to use raster-colorizer-default-mode: exact meaning stops will map to exact pixel values, and no other color values will be assigned through interpolation.

Now all that remains is to translate the land use data key into cartocss style rules, using the raster-colorizer stop syntax:

stop( + pixel value + , + color to assign + )

[![Japan Land Use Mapnik raster-colorizer by MapBox](https://farm9.staticflickr.com/8385/8495388263_1a2c4eceb4_o.png)](http://a.tiles.mapbox.com/v3/herwig.japan-land,herwig.map-behmiof5.html#7.00/42.832/141.993)
@blank:            transparent;
@snow:             #ffffff;
@unused:           #9a9a9a;
@urban:            #e2bf58;
@agriculture:      #91a487;
@grass:            #6b7e60;
@forest:           #46533f;
@water:            #37526d;
Map { background-color:@water;}

#japan {
  raster-opacity:1;
  raster-scaling:gaussian;
  raster-colorizer-default-mode:exact;
  raster-colorizer-default-color: transparent;
  raster-colorizer-epsilon:0.41;
  raster-colorizer-stops:
    stop(0, transparent)
    stop(1, @water)
    stop(2, @urban)
    stop(3, @agriculture)
    stop(4, @agriculture)
    stop(5, @grass)
    stop(6, @forest)
    stop(7, @forest)
    stop(8, @forest)
    stop(9, @forest)
    stop(10, @unused)
    stop(11, @snow)
    stop(253, @unused)
    stop(255, @blank);
}

Finished Map

[![Japan Land Cover Mapnik raster-colorizer by MapBox](https://farm9.staticflickr.com/8094/8495387917_8425ce6b97_o.jpg)](http://a.tiles.mapbox.com/v3/herwig.japan-land,herwig.map-behmiof5.html#7.00/42.832/141.993)

Japan Land Cover Finished map

Single-band Colorizing

Single band raster data traditionally rendered as black and white in TileMill, but it’s no longer so black and white.

TileMill Raster-Colorizer

Last month, I blogged about processing DNB raster data from NASA and NOAA’s Suomi NPP spacecraft to create a nighttime lights map, showing lights visible from space at night. Thanks to raster-colorizer, I can now generate the same map with half as many lines of code, in a fraction of the time, by performing all of the false color steps from within TileMill, rather than a combination of command line tools and virtual rasters (VRT).

Lights of the Night

The source data is one band, but we can render it in TileMill as a three band raster using CartoCSS classes, resulting in three versions of the layer rendering on top of one another:

#2010::1 #2010::2 #2010::3

Next, I use the raster-colorizer functionality to color each class a different color to achieve the desired RGB finished product:

2010 NightTime Lights

#2010::1  {
  raster-scaling:gaussian;
  raster-colorizer-default-mode:linear;
  raster-colorizer-default-color: transparent;
  raster-colorizer-epsilon:0.41;
  raster-colorizer-stops:
    stop(0,transparent,linear)
    stop(80,#fff)
    stop(100,#000)
}
#2010::2  {
  raster-scaling:gaussian;
  raster-colorizer-default-mode:linear;
  raster-colorizer-default-color: transparent;
  raster-colorizer-epsilon:0.41;
  raster-colorizer-stops:
    stop(0,transparent,linear)
    stop(50,#ffcc00)
    stop(60,#000)
}
#2010::3  {
  raster-scaling:gaussian;
  raster-colorizer-default-mode:linear;
  raster-colorizer-default-color: transparent;
  raster-colorizer-epsilon:0.41;
  raster-colorizer-stops:
    stop(0,transparent,linear)
    stop(90,#fa360b)
    stop(120,#000)
}

Finished Map

2010 Nighttime Lights

Color Correction of RGB Imagery

Following a similar process, I can perform color correction for 3-band natural-color RGB aerial or satellite imagery from within TileMill. Performing the color modifications from within TileMill is much easier and offers greater customization than my previous methods offered.

RGB Imagery

Normally, when you load an RGB image as a layer in TileMill the layer displays as natural color. To take advantage of the raster-colorizer functionality, we need to add the layer three times, including in the advanced option of band=1 for the red layer, band=2 for the green layer, and band=3 for the blue layer. The band= advanced option has TileMill load only the indicated band.

To turn the three layers back into an RGB image, you’ll want to use raster-comp-op: plus; and raster-colorizer-default-mode: linear; for each layer.

![Raster-Colorizer RGB color correction before](https://farm9.staticflickr.com/8379/8496556690_54a513891e_o.png)

Before color correction

#red {
  raster-scaling:gaussian;
  raster-comp-op:plus;
  raster-colorizer-default-mode:linear;
  raster-colorizer-default-color: transparent;
  raster-colorizer-epsilon:0.1;
  raster-colorizer-stops:
    stop(0,#000)
    stop(255,rgb(255,0,0))
}
#green {
  raster-scaling:gaussian;
  raster-comp-op:plus;
  raster-colorizer-default-mode:linear;
  raster-colorizer-default-color: transparent;
  raster-colorizer-epsilon:0.1;
  raster-colorizer-stops:
    stop(0,#000)
    stop(255,rgb(0,255,0))
}
#blue {
  raster-scaling:gaussian;
  raster-comp-op:plus;
  raster-colorizer-default-mode:linear;
  raster-colorizer-default-color: transparent;
  raster-colorizer-epsilon:0.1;
  raster-colorizer-stops:
    stop(0,#000)
    stop(255,rgb(0,0,255))
}

With the layer rendering as an RGB image in TileMill, you can now apply color corrections to each band, simply by modifying the raster-colorizer-stops.

A good starting place for color correcting in this manner is to adjust the min, max, and mean values. I found red and green bands looked best when I set the minimum to 20 and maximum to 200; for the blue band I set the minimum value to 40. For the red layer, pixels with values less than or equal to 20 are all registered as the darkest dark elements of the band, and all pixels with values greater than or equal to 200 are registered as the brightest red.

![Raster-Colorizer RGB color correction after](https://farm9.staticflickr.com/8368/8495452361_4462b93770_o.png)

After color correction

#blue {
  raster-scaling:gaussian;
  raster-comp-op:plus;
  raster-colorizer-default-mode:linear;
  raster-colorizer-default-color: transparent;
  raster-colorizer-epsilon:0.1;
  raster-colorizer-stops:
    stop(20,#000)
    stop(200,rgb(0,0,255))
}
#green {
  raster-scaling:gaussian;
  raster-comp-op:plus;
  raster-colorizer-default-mode:linear;
  raster-colorizer-default-color: transparent;
  raster-colorizer-epsilon:0.1;
  raster-colorizer-stops:
    stop(20,#000)
    stop(200,rgb(0,255,0))
}
#red {
  raster-scaling:gaussian;
  raster-comp-op:plus;
  raster-colorizer-default-mode:linear;
  raster-colorizer-default-color: transparent;
  raster-colorizer-epsilon:0.1;
  raster-colorizer-stops:
    stop(40,#000)
    stop(200,rgb(255,0,0))
}