openlayers-3geotiff

Is there an implementation of GeoTIFF in OpenLayer 3?

As the title says, I need to add some (COG) GeoTIFF layer to a website using openlayers 3. Since we're not ready to upgrade to a current version of openlayers, I've been wondering whether there was a way to do so with openlayers 3.

Solution

  • GeoTIFF support was added in version 6.7.0. If your reason for keeping Openlayers 3 is the syntax you can also use OpenLayers 6 and 7 as a full build as below

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Cloud Optimized GeoTIFF (COG)</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.3.0/ol.css">
    <style>
      html, body, .map {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script src="https://cdn.jsdelivr.net/npm/elm-pep@1.0.6/dist/elm-pep.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/geotiff"></script>
    <script src="https://cdn.jsdelivr.net/npm/ol@v7.3.0/dist/ol.js"></script>
    <script>

const source = new ol.source.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 ol.Map({
  target: 'map',
  layers: [
    new ol.layer.WebGLTile({
      source: source,
    }),
  ],
  view: source.getView(),
});

    </script>
  </body>
</html>