Tutorial - 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 computed as (red value) + (green value * 256) + (blue value * 65536).

As with other features in GeoJS, the image can either be geospatial, in pixel coordinates, or in an arbitrary space. For this tutorial, a map of the United States is used where the categories are the individual states.

First, let's create our map and add a base map and a feature layer that supports a pixelmap feature.

Then load some data. In addition to a PNG with an image with the category data, there is a sample JSON file which lists the categories. We load the category data asynchronously, and use promise chain to chain up the following steps.

Once the data is loaded, we create the pixelmap feature.

We can dynamically change our data based on where the user clicks. When the user left clicks, cycle through three states. A right click clears the state.