geotiff.js and plotty.js

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

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();