Implementing a Cloud-Optimized Geotiff viewer #122

DanielGartzia · 2024-11-18T10:49:43Z

DanielGartzia
Nov 18, 2024

Hi, good morning.
I need to make a JavaScript program to display dynamically the tiles from a COG file obtained from a blob of Azure Storage Explorer. I need to display too a map in the back of Open Street Maps or something like that.

Thank you so much

kylebarron · 2024-11-18T14:09:01Z

kylebarron
Nov 18, 2024
Maintainer

You can look at https://github.com/geotiffjs/geotiff.js/

2 replies

DanielGartzia Nov 26, 2024
Author

Hi, good morning!!!

I have a code written for JavaScript to load the tiles of a COG dynamically.
-------------------------------HTML----------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>COG with OpenLayers</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol/ol.css">
  <style>
    #map { height: 100vh; }
  </style>
</head>
<body>
<div id="map"></div>
<script type="module" src="main.js"></script>

</body>
</html>

------------------------JavaScript----------------------------------------------


import { fromUrl } from 'geotiff';
import DataTile from 'ol/source/DataTile';
import Map from 'ol/Map.js';
import WebGLTileLayer from 'ol/layer/WebGLTile.js';
import View from 'ol/View';
import OSM from 'ol/source/OSM.js';
import { fromLonLat } from 'ol/proj';

const map = new Map({
  target: 'map',
  layers: [
    new WebGLTileLayer({
      source: new OSM(),
    }),
  ],
  view: new View({
    center: fromLonLat([0, 0]),
    zoom: 6,
  }),
});


const azureBlobUrl = 'https://tsyltest01.blob.core.windows.net/practicasdavid/riskcogfiles/1/example.tif?sp=r&st=2024-11-26T10:23:48Z&se=2024-12-26T18:23:48Z&spr=https&sv=2022-11-02&sr=b&sig=yqpc7MBknMIjQHuK6t5tcPnaDMraJy8ZTsieNStrC0w%3D';

async function addCOGLayer(url) {
  // Read the GeoTIFF
  const tiff = await fromUrl(url);
  const image = await tiff.getImage();
  // Obtain the bounding box
  const boundingBox = image.getBoundingBox(); // [minX, minY, maxX, maxY]
  console.log('Bounding Box:', boundingBox);
  map.getView().fit(boundingBox, {
    size: map.getSize(),
  });
  // Create the layer
  const cogLayer = new WebGLTileLayer({
    source: new DataTile({
      loader: async (z, x, y) => {
        console.log("X:"+x+"Y:"+y+"Z:"+z)
        // Create the canvas
        const canvas = document.createElement('canvas');
        const size = image.getTileWidth(); 
        canvas.width = size;
        canvas.height = size;
        const ctx = canvas.getContext('2d');

        
        const resolution = image.getResolution(z);
        console.log(resolution);
        const origin = image.getOrigin();
        const tileExtent = [
          origin[0] + x * size * resolution[0],
          origin[1] - (y + 1) * size * resolution[1],
          origin[0] + (x + 1) * size * resolution[0],
          origin[1] - y * size * resolution[1],
        ];

        //Read the rasters
        const rasters = await image.readRasters({
          window: [
            Math.floor((tileExtent[0] - origin[0]) / resolution[0]),
            Math.floor((tileExtent[1] - origin[1]) / resolution[1]),
            Math.ceil((tileExtent[2] - origin[0]) / resolution[0]),
            Math.ceil((tileExtent[3] - origin[1]) / resolution[1]),
          ],
          width: size,
          height: size,
        });
        console.log(rasters);
        const imageData = ctx.createImageData(size, size);
        for (let i = 0; i < rasters[0].length; i++) {
          const value = rasters[0][i];
          imageData.data[i * 4] = 0; // Red
          imageData.data[i * 4 + 1] = 255; // Green
          imageData.data[i * 4 + 2] = 0; // Blue
          imageData.data[i * 4 + 3] = 50; // Alpha (opacity)
        }
        ctx.putImageData(imageData, 0, 0);

        return canvas;
      },
    }),
  });

  // Add the layer
  map.addLayer(cogLayer);
}

// Load the layer
addCOGLayer(azureBlobUrl);

This code doesn't achieve the objective of the dynamic load of tiles.
Some problems I have find are:
-The function image.getResolution() always returns the same values, independently of the level of zoom
-The tileExtent draws a tile which is outside of the bounding box.

The COG file of the code is accesible

Thank you so much.

kylebarron Nov 26, 2024
Maintainer

I am not familiar with how to use openlayers or geotiff.js so I can't help you.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implementing a Cloud-Optimized Geotiff viewer #122

{{title}}

Replies: 1 comment 2 replies

{{title}}

{{title}}

{{title}}

Select a reply

Implementing a Cloud-Optimized Geotiff viewer #122

DanielGartzia Nov 18, 2024

Replies: 1 comment · 2 replies

kylebarron Nov 18, 2024 Maintainer

DanielGartzia Nov 26, 2024 Author

kylebarron Nov 26, 2024 Maintainer

DanielGartzia
Nov 18, 2024

Replies: 1 comment 2 replies

kylebarron
Nov 18, 2024
Maintainer

DanielGartzia Nov 26, 2024
Author

kylebarron Nov 26, 2024
Maintainer