Skip To Content ArcGIS for Developers Sign In Dashboard

ArcGIS Runtime SDK for Qt

Colormap renderer

Sample Viewer View Sample on GitHub

Apply a colormap renderer to a raster.

Use case

A colormap renderer transforms pixel values in a raster to display raster data based on specific colors, aiding in visual analysis of the data. For example, a forestry commission may want to quickly visualize areas above and below the tree-line line occurring at a know elevation on a raster containing elevation values. They could overlay a transparent colormap set to color those areas below the tree-line elevation green, and those above white.

How to use the sample

Pan and zoom to explore the effect of the colormap applied to the raster.

How it works

To apply a ColormapRenderer to a RasterLayer:

  1. Create a Raster from a raster file.
  2. Create a RasterLayer from the raster.
  3. Create an list<color> array and use it to create a Colormap: colors at the beginning of the list replace the darkest values in the raster and colors at the end of the list replaced the brightest values of the raster.
  4. Create a ColormapRenderer with the colormap and apply it to the raster layer with rasterLayer.renderer = colormapRenderer.

Relevant API

  • ColormapRenderer
  • Raster
  • RasterLayer

Offline Data

Read more about how to set up the sample's offline data here.

Link Local Location
ShastaBW.tif raster <userhome>/ArcGIS/Runtime/Data/raster/ShastaBW.tif

About the data

The raster used in this sample shows an area in the south of the Shasta-Trinity National Forest, California.


colormap, data, raster, renderer, visualization

Sample Code

import QtQuick 2.6
import QtQuick.Controls 2.2
import Esri.ArcGISRuntime 100.9
import Esri.ArcGISExtras 1.1

Rectangle {
    id: rootRectangle
    clip: true
    width: 800
    height: 600

    //! [RasterColormapRenderer qml add raster basemap]
    readonly property string dataPath: System.userHomePath + "/ArcGIS/Runtime/Data/raster"

    MapView {
        id: mapView
        anchors.fill: parent

        Map {
            BasemapImagery {}

            onLoadStatusChanged: {
                if (loadStatus !== Enums.LoadStatusLoaded)


    RasterLayer {
        id: rasterLayer

        Raster {
            path: dataPath + "/ShastaBW.tif"

        onLoadStatusChanged: {
            if (loadStatus !== Enums.LoadStatusLoaded)

            mapView.setViewpointGeometryAndPadding(fullExtent, 50);

    function setColormap() {

        // create a color map where values 0-150 are red and 150-250 are yellow
        const colorArray = [];
        for (let i = 0; i < 250; i++)
            colorArray.push(i < 150 ? Qt.rgba(255, 0, 0) : Qt.rgba(255,255,0));

        // create a colormap
        const colormap = ArcGISRuntimeEnvironment.createObject("Colormap", {colors: colorArray});

        // create colormap renderer
        const colormapRenderer = ArcGISRuntimeEnvironment.createObject("ColormapRenderer", {colormap: colormap});

        // apply the renderer to the raster layer
        rasterLayer.renderer = colormapRenderer;
    //! [RasterColormapRenderer qml add raster basemap]