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 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
- Create a
Raster
from a raster file. - Create a
RasterLayer
from the raster. - 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. - Create a
ColormapRenderer
with the color list:ColormapRenderer.withColors(colors)
, and apply it to the raster layer withrasterLayer.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
// 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);
}
}