geotiff = require("geotiff.js@1.0.1/dist/geotiff.bundle.min.js")
viewof f = html`<input type='file' />`
f
example = geotiff.fromUrl(url)
image = example.getImage()
image.getBoundingBox()
image.getWidth()
example.getImageCount()
thumbnail = example.getImage(4)
thumbnail.readRasters()
md`That’s much more manageable. Let’s load it:`
{
let data = await readImageData(thumbnail);
let c = DOM.context2d(data.width, data.height, 1);
c.putImageData(data, 0, 0);
return c.canvas;
}
readImageData = async (image, options = {}) => {
const rasters = await image.readRasters(options);
let [r] = rasters;
let { width, height } = rasters;
const data = new Uint8ClampedArray(width * height * 4);
for (let i = 0; i < r.length; i++) {
let rs = r[i]*50;
data[i * 4] = rs;
data[i * 4 + 1] = rs;
data[i * 4 + 2] = rs;
data[i * 4 + 3] = rs[i] == 0 ? 0 : 255;
}
return new ImageData(data, width, height);
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
