Apply colormap renderer to raster

View on GitHub

Apply a colormap renderer to a raster.

Image of apply colormap renderer to 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 known 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

  1. Create a Raster from a raster file.
  2. Create a RasterLayer from the raster.
  3. Create a List<Color> representing colors. 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 color list: ColormapRenderer.withColors(colors), and apply it to the raster layer with rasterLayer.renderer = colormapRenderer.

Relevant API

  • ColormapRenderer
  • Raster
  • RasterLayer

Offline data

This sample uses the ShastaBW.tif raster.

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

apply_colormap_renderer_to_raster.dart
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
92
93
94
95
96
97
98
99
100
101
// Copyright 2025 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
//
//   https://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.
//

import 'package:arcgis_maps/arcgis_maps.dart';
import 'package:arcgis_maps_sdk_flutter_samples/common/common.dart';
import 'package:flutter/material.dart';
import 'package:path_provider/path_provider.dart';

class ApplyColormapRendererToRaster extends StatefulWidget {
  const ApplyColormapRendererToRaster({super.key});

  @override
  State<ApplyColormapRendererToRaster> createState() =>
      _ApplyColormapRendererToRasterState();
}

class _ApplyColormapRendererToRasterState
    extends State<ApplyColormapRendererToRaster> {
  // Create a controller for the map view.
  final _mapViewController = ArcGISMapView.createController();

  // A flag for when the map view is ready and controls can be used.
  var _ready = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          ArcGISMapView(
            controllerProvider: () => _mapViewController,
            onMapViewReady: onMapViewReady,
          ),
          // Display a progress indicator and prevent interaction until state is ready.
          LoadingIndicator(visible: !_ready),
        ],
      ),
    );
  }

  Future<void> onMapViewReady() async {
    // Create a map with an imagery basemap style.
    final map = ArcGISMap.withBasemapStyle(BasemapStyle.arcGISImageryStandard);
    _mapViewController.arcGISMap = map;

    // Download the ShastaBW tif file.
    await downloadSampleData(['cc68728b5904403ba637e1f1cd2995ae']);
    // Get the application documents directory.
    final appDir = await getApplicationDocumentsDirectory();

    // Create a Raster from the local tif file.
    final raster = Raster.withFileUri(
      Uri.file('${appDir.absolute.path}/ShastaBW/ShastaBW.tif'),
    );

    // Create a Raster Layer.
    final rasterLayer = RasterLayer.withRaster(raster);

    // Create a color map where values 0-149 are red and 150-250 are yellow.
    final colors = <Color>[];
    for (var i = 0; i <= 250; i++) {
      if (i < 150) {
        colors.add(const Color(0xFFFF0000));
      } else {
        colors.add(const Color(0xFFFFFF00));
      }
    }

    // Create a color map renderer.
    final colorMapRenderer = ColormapRenderer.withColors(colors);

    // Set the ColorMapRenderer on the Raster Layer.
    rasterLayer.renderer = colorMapRenderer;

    // Load the Raster Layer.
    await rasterLayer.load();
    // Add the Raster Layer to the map.
    map.operationalLayers.add(rasterLayer);
    // Set the viewpoint to the center of the raster layer's full extent.
    final fullExtent = rasterLayer.fullExtent;
    if (fullExtent != null) {
      final center = fullExtent.center;
      const scale = 80000.0;
      await _mapViewController.setViewpointCenter(center, scale: scale);
    }
    // Set the ready state variable to true to enable the sample UI.
    setState(() => _ready = true);
  }
}

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