Edit

GeoZarr Resampling

zarr4 geozarr4 sentinel-23

A GeoZarr source displaying Sentinel-2 imagery with resampling.

The GeoZarr dataset used in this example doesn't have all bands available at all zoom levels. When this is the case, band data from the nearest resolution level will be resampled in composing a data tile. The example shows a false-color composite composed of blue (b02), green (b03), and short-wave infrared (b11) data. The short-wave infrared data is only available to 20 m resolution. The visible blue and green bands are available at 10 m resolution. When the map is zoomed in beyond 20 meters per pixel, the highest resolution short-wave infrared data is fetched, resampled, and composed together with the higher resolution visible bands.

main.js
import Map from 'ol/Map.js';
import {getView, withExtentCenter, withHigherResolutions} from 'ol/View.js';
import Link from 'ol/interaction/Link.js';
import TileLayer from 'ol/layer/WebGLTile.js';
import GeoZarr from 'ol/source/GeoZarr.js';
import OSM from 'ol/source/OSM.js';

const source = new GeoZarr({
  url: 'https://s3.explorer.eopf.copernicus.eu/esa-zarr-sentinel-explorer-fra/tests-output/sentinel-2-l2a/S2B_MSIL2A_20260120T125339_N0511_R138_T27VWL_20260120T131151.zarr/measurements/reflectance',
  bands: ['b11', 'b03', 'b02'],
});

const map = new Map({
  layers: [
    new TileLayer({
      source: new OSM(),
    }),
    new TileLayer({
      style: {
        gamma: 1.5,
        color: [
          'color',
          ['interpolate', ['linear'], ['band', 1], 0, 0, 0.5, 255],
          ['interpolate', ['linear'], ['band', 2], 0, 0, 0.5, 255],
          ['interpolate', ['linear'], ['band', 3], 0, 0, 0.5, 255],
        ],
      },
      source,
    }),
  ],
  target: 'map',
  view: getView(source, withHigherResolutions(2), withExtentCenter()),
});

map.addInteraction(new Link());
index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>GeoZarr Resampling</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": "geozarr-sparse",
  "dependencies": {
    "ol": "10.9.0"
  },
  "devDependencies": {
    "vite": "^3.2.3"
  },
  "scripts": {
    "start": "vite",
    "build": "vite build"
  }
}