geotiff.js and plotty.js

Visualizing Scientific Raster Data in the Browser

Creative Commons License  This work is licensed under a Creative Commons Attribution 4.0 International License.

About us - EOX IT Services

Daniel Santillan

daniel.santillan@eox.at

santilland

@daniel_san123

Fabian Schindler

fabian.schindler@eox.at

constantinius

@__fschindler__

Premise

Scientific Raster Data Exploration

EO Acquisitions/Model Data

Current Status

Prerendered

Server-Side On-Demand Rendering

Goals

Fully interactive raster exploration

HTML / JavaScript only

Integration with Web-Mapping Frameworks

HTML 5

Canvas API

Web GL

Typed Arrays

Required steps

Transfer Raster Data

Raster Rendering

Transfer Format

Browsers usually only support RGB(A) (JPEG/PNG)

Workaround - encode Float/Int as RGBA

Various Drawbacks:

  • Only up to 32bit
  • Not self-explanatory
  • Requires decoding

GeoTIFF

Good software support

Flexible (Thousand Incompatible File Formats)

Extensible

Geographic Metadata

WCS - GeoTIFF application profile

GeoTIFF.js

Pure JavaScript (ECMAScript 2015) implementation

Typed Arrays + DataViews

GeoTIFF.js - capabilities

  • Full implementation of baseline TIFF
  • Tiled/Stripped
  • Band/Pixel interleave
  • various datatypes
  • uncompressed, Packbits (Deflate and LZW to follow)
  • Parsing of Geo-Metadata

GeoTIFF.js - Demo

Click the button above...

GeoTIFF.js - Demo - Under the Hood


fetch('data/rgba.tiff')
  .then(function(response) { return response.arrayBuffer(); })
  .then(function(buffer) {
    var tiff = GeoTIFF.parse(buffer);
    var image = tiff.getImage();

    var ctx = document.getElementById('canvas').getContext('2d');
    var imageData = ctx.createImageData(
      image.getWidth(), image.getHeight());

    var pixels = image.readRasters({ interleave: true });
    for (var i = 0; i < pixels.length; ++i) {
      imageData.data[i] = pixels[i];
    }

    ctx.putImageData(imageData, 0, 0);
  });
            

What about non-RGB(A) data?

Enter plotty...

plotty.js - capabilities

Small JavaScript library to render rasters

Colorscales

WebGL / "Software" renderer

plotty.js - Demo

plotty.js - Demo - Under the Hood


  var width = 100, height = 100, xoff = width / 3, yoff = height / 3;
  var data = new Float32Array(height * width);

  for (y = 0; y <= height; y++) {
      for (x = 0; x <= width; x++) {
          x2 = x - xoff; y2 = y - yoff;
          t = Math.sin(Math.sqrt(x2*x2 + y2*y2)/6.0);
          data[(y*width)+x] = t;
      }
  }

  plot = new plotty.plot({
      canvas: document.getElementById('canvas'),
      data: data, width: width, height: height,
      domain: [-1, 1], colorScale: 'viridis'
  });
  plot.render();
            

Putting it together

Colorscale
Min
Max
Clamp Low
Clamp High

Putting it together

Loading map...

Putting it Together

Future Work

geotiff.js: Compression: LZW and Deflate

plotty.js: Performance, Additional Interpolations

Integrations with OpenLayers, Leaflet and Cesium

Thank You!

Any Questions?

constantinius/geotiff.js

santilland/plotty

Slides: https://constantinius.github.io/foss4g-geotiff.js-plotty.js/