Colormap renderer

View inC++QMLView on GitHubSample viewer app

Apply a colormap renderer to a raster.

screenshot

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

To set up the sample's offline data, see the Use offline data in the samples section of the Qt Samples repository overview.

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.

Tags

colormap, data, raster, renderer, visualization

Sample Code

RasterColormapRenderer.qml
Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
// [WriteFile Name=RasterColormapRenderer, Category=Layers]
// [Legal]
// Copyright 2017 Esri.

// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
// http://www.apache.org/licenses/LICENSE-2.0

// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
// [Legal]

import QtQuick
import QtQuick.Controls
import Esri.ArcGISRuntime
import Esri.ArcGISExtras

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

    //! [RasterColormapRenderer qml add raster basemap]
    readonly property url dataPath: {
        Qt.platform.os === "ios" ?
                    System.writableLocationUrl(System.StandardPathsDocumentsLocation) + "/ArcGIS/Runtime/Data/raster" :
                    System.writableLocationUrl(System.StandardPathsHomeLocation) + "/ArcGIS/Runtime/Data/raster"
    }

    MapView {
        id: mapView
        anchors.fill: parent

        Component.onCompleted: {
            // Set the focus on MapView to initially enable keyboard navigation
            forceActiveFocus();
        }

        Map {
            Basemap {
                initStyle: Enums.BasemapStyleArcGISImageryStandard
            }

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

                setColormap();
                operationalLayers.append(rasterLayer);
            }
        }
    }

    RasterLayer {
        id: rasterLayer

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

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

            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]
}

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.