GeoTIFF Reprojection

Demonstrates how a GeoTIFF can be rendered in a different projection.

This example demonstrates how data from a GeoTIFF in one projection can be displayed on a map with a different projection. For other source types, it is necessary to specify the source projection when it differs from the map view projection. In this example, information about the source projection is included in the GeoTIFF metadata, so it doesn't need to be specified in the application code.

The source.getView() method returns a promise that resolves after the GeoTIFF metadata has been fetched. This can be used to get the image projection information along with the image extent and center coordinates. The transform() function is used to transform the source imagery center coordinate when updating the view.

OpenLayers has built-in reprojection support for sources in Universal Transverse Mercator (UTM) projections. Since the source data shown here is in UTM Zone 36 N, no additional configuration is needed to reproject the data to the map projection (Spherical Mercator).

See these other examples for details on the following:

Reprojection with Proj4js — using the Proj4js library to reproject raster sources between a variety of projections.
Projection Lookup — using an external service to look up projection configuration information.

main.js

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/WebGLTile.js';
import {transform} from 'ol/proj.js';
import GeoTIFF from 'ol/source/GeoTIFF.js';

const source = new GeoTIFF({
  sources: [
    {
      url: 'https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/36/Q/WD/2020/7/S2A_36QWD_20200701_0_L2A/TCI.tif',
    },
  ],
});

const map = new Map({
  target: 'map',
  layers: [new TileLayer({source})],
  view: new View({
    center: [0, 0],
    zoom: 12,
  }),
});

// after GeoTIFF metadata has been read, recenter the map to show the image
source.getView().then((sourceView) => {
  const view = map.getView();

  // transform the image center to view coorindates
  const center = transform(
    sourceView.center,
    sourceView.projection,
    view.getProjection(),
  );

  // update the view to show the image
  view.setCenter(center);
});

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>GeoTIFF Reprojection</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-reprojection",
  "dependencies": {
    "ol": "10.4.0"
  },
  "devDependencies": {
    "vite": "^3.2.3"
  },
  "scripts": {
    "start": "vite",
    "build": "vite build"
  }
}