Tutorial - Tiled Pixelmap
A pixelmap is a way of representing categorical data. It uses a lossless
image where, instead of the pixels representing colors, they represent
category indices. This is usually compactly represented as a integer split
across the red, green, and blue channels, where the category index is
(red value) + (green value * 256) + (blue value * 65536).
For large datasets, a single image might be too large to display at once.
Much like tile layers used for maps and large images, a pixelmap can also
be rendered from a tiled image using the
pixelmapLayer is essentially a hybrid between a tile image layer and a
First, let's create our map in the appropriate image coordinates for our pixelmap tile image.
We can use some of the parameters generated by
geo.util.pixelCoordinateParams for the pixelmap tile layer. We need to
modify the url to find the image tiles, create an appropriate data array
with the categorical data, and determine how to map colors to the
Our categorical image data was generated from a small portion of a histology image using a superpixel algorithm. After dividing the source image into superpixels, the edge of each superpixel was located and set as a separate index value. These happen to always have an index value one greater than the superpixel itself (so the main superpixels are indices 0, 2, 4, ..., and the corresponding edges are indices 1, 3, 5, ...). This data set happens to have 5112 distinct index values. We start with a data array of all zeroes.
It is more useful to allow the user to modify the data. Change our coloring so that superpixels start transparent with yellow edges and cycle through red, green, and blue as they are selected.
When changing a value in the data array, we need to inform the pixelmap that it is changed. This could be done a variety of ways:
pixelmap.data(data)- this marks the entire data set as changed and will require recomputing the most values.
pixelmap.modified()- this states that the style has changed in some way, but without more specificifity, all of the colors are rechecked.
pixelmap.indexModified(lowIndex, highIndex)- this states that only a small number of indicies' colors have changed, allowing the most efficient update.
We might want to make it easier for a user to set many superpixels to the same state at once. If the user holds down shift, then the color that the first superpixel that is clicked on is applied to any superpixel entered until the mouse button is released. By using shift, the core pan feature isn't affected.