What is geotiff?
The 'geotiff' npm package is a JavaScript library for reading and writing GeoTIFF files. It provides a range of functionalities for handling geospatial data stored in the TIFF format, including parsing metadata, extracting image data, and handling various compression methods.
What are geotiff's main functionalities?
Reading GeoTIFF files
This feature allows you to read GeoTIFF files from a URL. The code sample demonstrates how to load a GeoTIFF file, extract image dimensions, and read raster data.
const GeoTIFF = require('geotiff');
async function readGeoTIFF(url) {
const tiff = await GeoTIFF.fromUrl(url);
const image = await tiff.getImage();
const width = image.getWidth();
const height = image.getHeight();
const data = await image.readRasters();
console.log(`Width: ${width}, Height: ${height}`);
console.log(data);
}
readGeoTIFF('path/to/your/geotiff/file.tif');
Writing GeoTIFF files
This feature allows you to write GeoTIFF files. The code sample demonstrates how to create a GeoTIFF file from an array buffer with specified image dimensions and properties.
const GeoTIFF = require('geotiff');
async function writeGeoTIFF() {
const data = new Uint8Array([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);
const tiff = await GeoTIFF.writeArrayBuffer(data, {
width: 2,
height: 5,
samplesPerPixel: 1,
bitsPerSample: 8,
compression: 'none'
});
console.log(tiff);
}
writeGeoTIFF();
Parsing metadata
This feature allows you to parse metadata from a GeoTIFF file. The code sample demonstrates how to load a GeoTIFF file and extract its metadata.
const GeoTIFF = require('geotiff');
async function parseMetadata(url) {
const tiff = await GeoTIFF.fromUrl(url);
const image = await tiff.getImage();
const metadata = image.getFileDirectory();
console.log(metadata);
}
parseMetadata('path/to/your/geotiff/file.tif');
Other packages similar to geotiff
geotiff.js
GeoTIFF.js is a JavaScript library for reading and writing GeoTIFF files in the browser and Node.js. It offers similar functionalities to the 'geotiff' npm package, including reading raster data and parsing metadata. However, 'geotiff' is more actively maintained and has a broader range of features.
tiff
The 'tiff' npm package is a library for reading and writing TIFF files, including GeoTIFFs. It provides basic functionalities for handling TIFF files but lacks some of the advanced geospatial features found in the 'geotiff' package.
georaster
GeoRaster is a JavaScript library for working with geospatial raster data. It supports reading and writing GeoTIFF files and offers additional functionalities for handling raster data in various formats. Compared to 'geotiff', GeoRaster provides more comprehensive support for different raster data formats.
geotiff.js
Read (geospatial) metadata and raw array data from a wide variety of different
(Geo)TIFF files types.
Features
Currently available functionality:
- Parsing the headers of all possible TIFF files
- Rudimentary extraction of geospatial metadata
- Reading raster data from:
- stripped images
- tiled images
- band interleaved images
- pixel interleaved images
- Supported data-types:
- Enabled compressions:
- no compression
- Packbits
- ... (more soon to follow)
- Subsetting via an image window and selected bands
- Reading of samples into separate arrays or a single pixel-interleaved array
- Configurable tile/strip cache
- Automated testing via PhantomJS
Further documentation can be found here.
Setup
To setup the repository do the following steps:
git clone https://github.com/constantinius/geotiff.js.git
cd geotiff.js/
npm install -g grunt-cli
npm install
Testing and Building
In order to run the tests you first have to set up the test data:
cd test/data
sh setup_data.sh
cd -
To test the library (using PhantomJS, karma, mocha and chai) do the following:
grunt test
To do some in-browser testing do:
grunt serve
and navigate to http://localhost:9000/test/
To build the library do:
grunt
The output is written to dist/geotiff.js
and dist/geotiff.min.js
.
Usage
geotiff.js works with both browserify style require
and the global variable
GeoTIFF
:
var GeoTIFF = require("geotiff.js");
or:
<script src="geotiff.js"></script>
<script>
console.log(GeoTIFF);
</script>
To actually open a GeoTIFF image use the parse
function. It works with both
ArrayBuffer
and String
:
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
var tiff = GeoTIFF.parse(this.response);
}
xhr.send();
When using the parser in node, you have to convert the Buffer
to an
ArrayBuffer
first. See the following example for the conversion:
var GeoTIFF = require("geotiff");
var fs = require("fs");
fs.readFile(path, function(err, data) {
if (err) throw err;
dataArray = data.buffer.slice(data.byteOffset, data.byteOffset + data.byteLength);
var tiff = GeoTIFF.parse(dataArray);
});
Each TIFF file can be comprised of multiple "subfiles", containing the actual
raster data. To get the actual images, use the getImage
method:
var image = tiff.getImage();
console.log(image.getWidth(), image.getHeight(), image.getSamplesPerPixel());
To actually read raster data the readRasters
method does the job. It returns
an Array
of TypedArrays
for each of the requested samples of the requested
region:
var rasterWindow = [50, 50, 100, 100];
var samples = [0, 1, 2, 3];
var rasters = image.readRasters({window: rasterWindow, samples: samples});
for (var i = 0; i < rasters.length; ++i) {
console.log(rasters[i]);
}
rasters = image.readRasters();
var array = image.readRasters({interleave: true});
To read TIFF or geo-spatial metadata, the methods .getFileDirectory()
and
.getGeoKeys()
provide the data:
console.log(image.getFileDirectory(), image.getGeoKeys());
What to do with the data?
There is a nice HTML 5/WebGL based rendering library called
plotty, that allows for some really nice
on the fly rendering of the data contained in a GeoTIFF.
<canvas id="plot"></canvas>
<script>
var tiff = GeoTIFF.parse(data);
var image = tiff.getImage();
var rasters = image.readRasters();
var canvas = document.getElementById("plot");
var plot = new plotty.plot({
canvas: canvas, data: rasters[0],
width: image.getWidth(), height: image.getHeight(),
domain: [0, 256], colorScale: "viridis"
});
plot.render();
</script>
Planned stuff:
- Automated extraction of RGB images when possible:
- CMYK, YCbCr or CieLAB conversion to RGB
- Color lookup tables
- Better support of geospatial parameters:
- Parsing of EPSG identifiers
- WKT representation
- Specifying of window in CRS coordinates
- Support of "overview images" (i.e: images with reduced resolution)
Acknowledgements
This library was inspired by
GeotiffParser. It provided a
great starting point, but lacked the capabilities to read the raw raster data
which is the aim of geotiff.js.