GeoTIFF per band statistics

Demonstrates how a GeoTIFF can be rendered with different min and max values for each band.

This example demonstrates how a GeoTIFF can be rendered with different min and max values for each band to improve visualization of the data without using styles. The GeoTIFF source supports an array of values for min, max and nodata, so each band can be configured independently.

main.js

import Map from 'ol/Map.js';
import TileLayer from 'ol/layer/WebGLTile.js';
import GeoTIFF from 'ol/source/GeoTIFF.js';

const source = new GeoTIFF({
  sources: [
    {
      url: 'https://spacenet-dataset.s3.amazonaws.com/spacenet/SN3_roads/train/AOI_3_Paris/PS-RGB/SN3_roads_train_AOI_3_Paris_PS-RGB_img101.tif',
      nodata: 0,
      min: [110, 216, 217],
      max: [586, 579, 432],
    },
  ],
});

const map = new Map({
  target: 'map',
  layers: [new TileLayer({source})],
  view: source.getView(),
});

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>GeoTIFF per band statistics</title>
    <link rel="stylesheet" href="node_modules/ol/ol.css">
    <style>
      .map {
        width: 100%;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>

    <script type="module" src="main.js"></script>
  </body>
</html>

package.json

{
  "name": "geotiff-per-band-stats",
  "dependencies": {
    "ol": "10.9.0"
  },
  "devDependencies": {
    "vite": "^3.2.3"
  },
  "scripts": {
    "start": "vite",
    "build": "vite build"
  }
}