search

geotiffjs / geotiff.js

geotiff.js is a small library to parse TIFF files for visualization or analysis. It is written in pure JavaScript, and is usable in both the browser and node.js applications.
https://geotiffjs.github.io/
MIT License
859 stars 179 forks source link

How to display a tiff file using javascript using geotiff and plotty? i tried a lot of times(vs code live server) but all i get is a blank screen :/ (im a noob in javascript and got the codes for it through chat gpt) #352

Closed Anubhavx17 closed 1 year ago

Anubhavx17 commented 1 year ago

this is my js code

const tiff = await GeoTIFF.fromUrl(tiffUrl);
const image = await tiff.getImage();

// Get the image data and metadata
const [width, height] = image.getTiledSizes()[0];
const arrayBuffer = await image.readRasters({ window: [0, 0, width, height] });
const data = new Float32Array(arrayBuffer);
const metadata = await image.getFileDirectory();

// Display the image using plotty.js
const plotContainer = document.getElementById('plot');
const plot = new plotty.plot({
    data: data,
    width: width,
    height: height,
    domain: [metadata.GDAL_NODATA, Math.max(...data)],
    colorScale: 'viridis',
});
plotContainer.appendChild(plot.render());

html

<html>
<head>
    <title>Display TIFF file in JavaScript using geotiff.js and plotty.js</title>
    <script src="https://unpkg.com/geotiff/dist/geotiff.bundle.min.js"></script>
    <script src="https://unpkg.com/plotty/dist/plotty.min.js"></script>
</head>
<body>
    <div id="plot"></div>
</body>
</html>

I have kept both these files and tiff file in the node module folder

constantinius commented 1 year ago

The code that ChatGPT wrote is wrong in some places. There is however a nice example in the Readme, which should get you started.

Anubhavx17 commented 1 year ago

Hi there, The snippet you sent is actually using different libraries and I would have to change the entire code. I have used leaflet to display the base map, and I am using geotiff library to read the TIFF file as shown in https://geotiffjs.github.io/geotiff.js/

import GeoTIFF, { fromUrl, fromUrls, fromArrayBuffer, fromBlob } from 'geotiff';

//.. const response = await fetch("assets/NDVI_Nov.tiff"); const arrayBuffer = await response.arrayBuffer(); const tiff = await fromArrayBuffer(arrayBuffer); const image = await tiff.getImage(); const data = await image.readRasters(); //..

Could you please let me know how do I add this Tiff image as a layer to LeafLet map so that I can display the TIFF image on my browser ?

constantinius commented 1 year ago

@Anubhavx17

I think you could use the georaster-layer-for-leaflet project to do so. It was created by @DanielJDufour and uses geotiff.js underneath, I believe

Anubhavx17 commented 1 year ago

hi @DanielJDufour , Could you tell how to display a tiff file in angular using [georaster-layer-for-leaflet], It wasn;t very clear from the example(eg 11 source code not visible) ,thank you!