index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

  <title>reveal.js</title>

  <link rel="stylesheet"
    href="css/reset.css" />
  <link rel="stylesheet"
    href="css/reveal.css" />
  <link rel="stylesheet"
    href="css/theme/black.css" />

  <link rel="stylesheet"
    href="index.css" />

  <!-- Theme used for syntax highlighting of code -->
  <link rel="stylesheet"
    href="lib/css/monokai.css" />

  <!-- Printing and PDF exports -->
  <script>
    var link = document.createElement("link");
    link.rel = "stylesheet";
    link.type = "text/css";
    link.href = window.location.search.match(/print-pdf/gi)
      ? "css/print/pdf.css"
      : "css/print/paper.css";
    document.getElementsByTagName("head")[0].appendChild(link);
  </script>
</head>

<body>
  <div class="reveal">
    <div class="slides">
      <section data-markdown>

        <textarea data-template>
              ## Wrangling GeoTIFFs in the browser
          
              Nick Forbes-Smith 

              <span style="font-weight: 100; font-size: 50%;">CSIRO's Data61 &mdash; RMIT University</span><br>
              <span style="font-weight: 100; font-size: 50%;">Hobart, Tasmania, Australia</span>
             
            </textarea>
      </section>

      <section>
        <section data-markdown>
          <textarea data-template>
                      The first <span style="font-weight: 100">(and last)</span> FOSS4G talk on Geotiff.js!
      
                      <!-- <span class="fragment">Probably not...</span> -->
                    </textarea>
        </section>

        <section data-markdown>
          <textarea data-template>
                        <ul style="font-size: 70%;">
                            <li>FOSS4G 2019 - Discover huge raster files in the Browser with geotiff.js - Fabian Schindler</li>
                            <li class="fragment">FOSS4G 2019 - Algorithm Walk-through: How to Visualize a Large GeoTIFF on Your Web Map - Daniel J. Dufour</li>
                            <li class="fragment">FOSS4G 2019 - Interactive (EO) data visualization in the web -  Lubomír Bucek & Daniel Santillan Pedrosa</li>
                            <li class="fragment">FOSS4G 2019 - Breaking the curse of raster processing software-as-a-service - Iván Sánchez Ortega</li>
                            <li class="fragment">FOSS4G 2018 - Wave Good-Bye to Buttonology: Satellite Imagery Analysis Made Easy with GeoTIFF.io - Daniel Dufour & Stephen Peyton</li>
                            <li class="fragment">FOSS4G 2016 - geotiff.js and plotty.js - Visualizing Scientific Raster Data in the Browser - Fabian Schindler</li>
                            <li class="fragment">...</li>
                            <li class="fragment">...</li>
                          </ul>
                      </textarea>
        </section>
      </section>

      <section>
        <section data-markdown>
          <textarea data-template>
            ## I make

              - Web map apps w/
              - distributed job processing back-ends
               
            <span style="font-weight: 100">for natural hazard modeling</span>

            <span style="font-weight: 100; font-size: 50%;">and heaps of GeoTIFFs</span>
            </textarea>
        </section>

        <!-- Expain how Geotiffs are used in each example... -->

        <section data-transition="slide-in fade-out">
          Wildfire simulation

          <img src="img/new-fire1.png"
            alt="Fire 2"
            class="center">
        </section>

        <section data-transition="fade">
          Wildfire simulation

          <img src="img/newfire2.png"
            alt="Fire 1"
            class="center">
        </section>

        <section data-transition="slide-in fade-out">
          Climate change risk analytics

          <img src="img/climate2.png"
            alt="Climate risk 2"
            class="center">
        </section>

        <section data-transition="slide-in fade-out">
          Evacuation simulation

          <img src="img/new-evac1.png"
            alt="Evac risk 2"
            class="center">
        </section>

        <section data-transition="fade">
          Evacuation simulation

          <img src="img/evac2.png"
            alt="Evac risk 2"
            class="center">
        </section>


        <section data-transition="slide-in fade-out">
          Flood Simulation

          <img src="img/newflood1.png"
            alt="Flooding"
            class="center">
        </section>

        <section data-transition="fade">
          Flood Simulation

          <img src="img/newflood2.png"
            alt="Flooding"
            class="center">
        </section>

      </section>

      <section data-markdown>
        <textarea data-template>
            ## JS libraries

            <ul>
              <li>Angular, PrimeNG</li>
              <li>Mapbox GL JS, Terria/Cesium</li>
              <li><a>d3</a>, <a>Plotty</a></li>
              <li><a>Geotiff.js</a>, <a>Georaster</a></li>
              <li><a>GPU.js</a>, <a>Geoblaze</a></li>
            </ul>

          </textarea>
      </section>

      <section>
        <section data-markdown>
          <textarea data-template>
          ## Show GeoTIFF on Web&#8209;map

          <span style="font-weight: 100; font-size: 50%;">Not going to talk about GeoTIFF</span>

          --------------
      
          Usual method: WMS
        </textarea>
        </section>

        <section data-markdown>
          <textarea data-template>
        ### WMS
        1. Load GeoTIFF into WMS Server (GeoServer)
        2. Create style(s)
        3. Publish

        4. Client (mapbox, leaflet...) requests static image tiles
        
      </textarea>
        </section>


        <section data-markdown>
          <textarea data-template>
          Okay, this is great

            --------------

          We're done right?
      </textarea>
        </section>


        <!-- <section data-markdown>
          <textarea data-template>
          Multi-dimensional

          Too many dimensions and caching becomes impractical 
      </textarea>
        </section> -->


        <section data-markdown>
          <textarea data-template>
          ...GeoTIFFs are being created on demand?
      </textarea>
        </section>

        <section data-markdown>
          <textarea data-template>
        ...interactive/dynamic styling?

        <!-- Dynamic styling is painful (and also makes caching impractical) -->

        <!-- Every change of style fetches new tiles from server -> every request is time and money! -->
      </textarea>
        </section>

        <section data-markdown>
          <textarea data-template>
        ...inspect raw values?

        <!-- No access to actual values - to inspect values have to use GetFeatureInfo WMS request -->
      </textarea>
        </section>

        <section data-markdown>
          <textarea data-template>
        ...run script on values?
      </textarea>
        </section>

        <section data-markdown>
          <textarea data-template>
            ...I have millions (or **BILLIONS!**) of geotiffs?
      </textarea>
        </section>

        <section data-markdown>
          <textarea data-template>
        ### So many requests to the server!

        Even if the browser already has the data
      </textarea>
        </section>

      </section>

      <section>
        <section data-markdown>
          <textarea data-template>
        Forget that rubbish! 

        ## We have GeoTIFF.js and WebGL!

        <span style="font-weight: 100; font-size: 50%;">I'm joking WMS is not rubbish</span>

        </textarea>
        </section>

        <section data-markdown>
          <textarea data-template>
        ### GeoTIFF.js
        1. Client (mapbox, leaflet...) requests and renders GeoTIFF...
        
      </textarea>
        </section>

        <section data-markdown>
          <textarea data-template>
          Single layer

<img src="img/show-singlelayer.png" alt="CSS Overlay"  class="center">
</textarea>
        </section>

        <section data-markdown>
          <textarea data-template>
          Colour scale

          <video data-autoplay src="video/show-colscale.webm"  class="center"></video>
        </textarea>

        </section>

        <section data-markdown>
          <textarea data-template>
          Set min/max and clamp

          <video data-autoplay src="video/show-minmax.webm"  class="center"></video>
        </textarea>
        </section>

        <section data-markdown>
          <textarea data-template>
          Blending layers with CSS

          <img src="img/css-overlay.jpg" alt="CSS Overlay">

        </textarea>
        </section>

      </section>

      <section>
        <section data-markdown>
          <textarea data-template>
        ## Web-based Geotiff Analytics

        --------------
    
        Usual method: WPS
      </textarea>
        </section>

        <section data-markdown>
          <textarea data-template>
        ### WPS

        1. Write python script
            - Read in data via WCS
            - Crunch the numbers
            - Return result
        2. Load scripts into WPS server (eg PyWPS)
        3. Publish

        4. Client executes WPS processes
        
      </textarea>
        </section>

        <section data-markdown>
          <textarea data-template>
          Okay, this is great too
      </textarea>
        </section>

        <section data-markdown>
          <textarea data-template>
            ...I already have the data in the browser?!
      </textarea>
        </section>

        <section data-markdown>
          <textarea data-template>
          ...100s of requests using the same data in realtime?

          <!-- Cache values between analysis -->
      </textarea>
        </section>

        <section data-markdown>
          <textarea data-template>
              ...more requests to the server!  

<span style="font-weight: 100">Ridiculous</span>
      </textarea>
        </section>

      </section>

      <section>
        <section data-markdown>
          <textarea data-template>
            But we can also do this with 
            
            ## JavaScript

            in the browser!

            <span style="font-weight: 100; font-size: 50%;">Wooo "edge computing"!</span>
        </textarea>

        </section>

        <section data-markdown>
          <textarea data-template>
          Contouring

          <video data-autoplay src="video/analysis-contour.webm"></video>
        </textarea>
        </section>

        <section data-markdown>
          <textarea data-template>
          Statistics

          <video data-autoplay src="video/analysis-stats.webm"></video>
        </textarea>

        </section>

        <section data-markdown>
          <textarea>
          <div >Raster algebra</div >
          <img src="img/wetbulbformula.png" alt="Wetbulb Formula" style="width: 50vw;padding: 20px; ">
        </textarea>

        </section>

        <section>

          <video data-autoplay
            src="video/analysis-raster-algebra.webm"></video>

        </section>

      </section>

      <section>
        <section data-markdown>
          <textarea data-template>
          ## What! How?

          --------------
            
          - Fetch + decode data &mdash; <a>Geotiff.js</a>
          - Data wrapper &mdash; <a>Georaster</a>
          - Visualise &mdash; <a>Plotty</a>
          - Analytics &mdash; <a>Geoblaze</a>, <a>GPU.js, (d3)</a>
        </textarea>

        </section>

        <section data-markdown>
          <textarea data-template>
          ## Geotiff.js

          <!-- The star of the talk -->

          This does all the hard work!

Pure JavaScript implementation of Geotiff:  
- Reads in file 
- Supports HTTP range requests for subsets - bbox or band
- Decodes and uncompresses
        </textarea>

        </section>

        <section data-markdown>
          <textarea data-template>
            From <a>https://geotiffjs.github.io/geotiff.js/</a>

```js
// Fetch a GeoTIFF
const response = await fetch(someUrl);

// Decode...
const arrayBuffer = await response.arrayBuffer();
const tiff = await GeoTIFF.fromArrayBuffer(arrayBuffer);

const image = await tiff.getImage();

// Get pixels
const pixels = await image.readRasters();

// Get some properties
const origin = image.getOrigin();
const resolution = image.getResolution();
const bbox = image.getBoundingBox();
...
```
        </textarea>

        </section>

        <section data-markdown>
          <textarea data-template>
          ## Georaster

          > Wrapper around Georeferenced Rasters

          GeoTIFF, NetCDF, JPG, and PNG &mdash; provides a standard interface

          <span style="font-weight: 100;">Also simplifies GeoTIFF.js usage</span>


        </textarea>

        </section>

        <section data-markdown>
          <textarea data-template>
            From <a>https://github.com/GeoTIFF/georaster</a>

```js
// Fetch
const response = await fetch(someUrl);
const arrayBuffer = await response.arrayBuffer();

const georaster = await parseGeoraster(arrayBuffer)

// Get pixels
const pixels = georaster.values;

// Get some properties
const projection = georaster.projection;
...
  ```
          </textarea>

        </section>

        <section data-markdown>
          <textarea data-template>
          ## Plotty
Colourise 2d raster using Canvas API and WebGL (with JS fallback)

Set value domain, clamp, transform matrix, colorscale, raster/band algebra

<!-- Show plotty NDVI (show set expression) - more RGB imagery   -->

        </textarea>

        </section>

        <section data-markdown>
          <textarea data-template>
            From <a>https://github.com/santilland/plotty</a>

```js
plot = new plotty.plot({
  canvas: document.getElementById("canvas"),
  data: somePixels, 
  width: width, 
  height: height,
  domain: [-1, 1], 
  colorScale: 'viridis'
});
plot.render();
```
            </textarea>
        </section>

        <section data-markdown>
          <textarea data-template>
            ## Geoblaze
  
            - Basic statistics (min, max, mean, mode) 
            - Band arithmetic and histogram generation
  
            No WebGL - all done on CPU.
          </textarea>

        </section>


        <section data-markdown>
          <textarea data-template>
            From <a>https://docs.geoblaze.io/</a>

```js
const mean = geoblaze.mean(georaster, geometry);

const ndvi = geoblaze.bandArithmetic(georaster, '(c - b)/(c + b)');

const histogram = geoblaze.histogram(georaster, geometry, options);
```        
            </textarea>

        </section>

        <section data-markdown>
          <textarea data-template>
                ## GPU.js
      
                Kernel functions - matrix algebra
      
                - Raster calculation
                - Interpolation
                - Reprojection...
      
                <span style="font-weight: 100; font-size: 50%;">and other crazy stuff</span>
      
              </textarea>

        </section>

        <section data-markdown>
          <textarea data-template>
            From <a>https://github.com/gpujs/gpu.js</a>

```js
import { GPU } from 'gpu.js';

const gpu = new GPU();
const multiplyMatrix = 
  gpu.createKernel(function(a: number[][], b: number[][]) {
    let sum = 0;
    for (let i = 0; i < 512; i++) {
      sum += a[this.thread.y][i] * b[i][this.thread.x];
    }
    return sum;
  }).setOutput([512, 512]);

const c = multiplyMatrix(a, b) as number[][];
```
                </textarea>

        </section>


        <section data-markdown>
          <textarea data-template>
            ## D3
  
            - contouring / isobands
            - streamlines
            - arrows / barbs
          </textarea>
        </section>

        <section data-markdown>
          <textarea data-template>
                From <a>https://github.com/d3/d3-contour</a>
    
```js
const contours: MultiPolygon[] = d3.contours()
    .size([width, height])
    .thresholds([0,1,2,3,...])
    (pixelValues);
```
              </textarea>
        </section>


      </section>

      <section data-markdown>
        <textarea data-template>
        ## I want this now!

        --------------

- <a>geotiff.io/</a> - have a play with geotiffs in the browser and geoblaze
- Leaflet - <a href="https://github.com/GeoTIFF/georaster-layer-for-leaflet">georaster-layer-for-leaflet</a>
- OpenLayers - <a href="https://github.com/GeoTIFF/ol-geotiff">ol-geotiff</a>
- Cesium/Terria, Mapbox...

      </textarea>
      </section>

      <section>
        <section data-markdown>
          <textarea data-template>
          ## Limitations

          --------------

          - File size
          - Projections
          - Client-side computation (GPU)
          - Service-oriented or API?
          - Client-side complexity
        </textarea>
        </section>

        <section data-markdown>
          <textarea data-template>
          ## File size

          - GeoTIFF files can be large
            - Don't want to load entire file!
          - Cloud Optimised GeoTIFFs (COGs)
            - Layout friendly for network consumption

          <!-- WCS can query NetCDF (faster?) -->

          <!-- then getting file through WCS and then WebGL rendering faster and more interactive -->

          <!-- Smaller datasets generate more PNG than original dataset!? -->

          <!-- Size comparison between geotiff and png -->
        </textarea>

        </section>

        <section data-markdown>
          <textarea data-template>
          ## Projection

          Web mercator...

          <!-- WCS, in browser reprojection? -->
        </textarea>
        </section>

        <section data-markdown>
          <textarea data-template>
          ## Client-side computation

          Uncompress, render pixels to canvas...
        
          Analysing values...

          <!-- Drill through dimensions?
          - Might have to fetch single value from many files -->
        </textarea>
        </section>

        <section data-markdown>
          <textarea data-template>
          ## WMS is service oriented
          
          JS librares are for client-side use 
          
          <span style="font-weight: 100; font-size: 50%;">Can be used with Node.js but Python libraries are better!</span>
        </textarea>

        </section>

        <!-- <section data-markdown>
          <textarea data-template>
          ## Complex queries

          
        </textarea>

        </section> -->

        <section data-markdown>
          <textarea data-template>
          ## Client-side complexity

          Just want to show static imagery?

          Probably not worth it - WMS is supported by everything!

          <!-- mainly directed towards greyscale scientific datasets!!! -->
          
        </textarea>

        </section>

      </section>

      <section>
        <section data-markdown>
          <textarea data-template>
          ## Demo
        </textarea>

        </section>
      </section>

      <section>
        <section data-markdown>
          <textarea data-template>
          ## Future

          --------------

          - COG / Satelite imagery performance
          - NetCDF
          - Reprojection (WebGL?)
          - Caching
          - GUI raster formula editor
        </textarea>
        </section>
      </section>

      <section>
        <section data-markdown>
          <textarea data-template>
          ## Other cool things
        </textarea>
        </section>

        <section data-markdown>
          <textarea data-template>
          ### Hillshade

          <video data-autoplay src="video/extra-hillshade.webm"></video>
        </textarea>
        </section>

        <section data-markdown>
          <textarea data-template>
          ### Reprojection

          <video data-autoplay src="video/extra-project.webm"></video>
        </textarea>
        </section>

        <section data-markdown>
          <textarea data-template>
          ### 3D

          <iframe width="900" height="600" src="https://www.youtube.com/embed/qDazKJQBxuE?controls=0&amp;start=42" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </textarea>
        </section>

        <section data-markdown>
          <textarea data-template>
          ### PNG raw
          24 bit integer packed into RGB channels - see mapbox elevation tiles

          Hybrid WMS approach?
        </textarea>
        </section>

      </section>

      <section data-markdown>
        <textarea data-template>
        ## Thanks
        
        --------------

        Questions?
      </textarea>
      </section>
    </div>
  </div>

  <script src="js/reveal.js"></script>

  <script>
    // More info about config & dependencies:
    // - https://github.com/hakimel/reveal.js#configuration
    // - https://github.com/hakimel/reveal.js#dependencies

    Reveal.configure({ slideNumber: true });

    Reveal.initialize({
      dependencies: [
        { src: "plugin/markdown/marked.js" },
        { src: "plugin/markdown/markdown.js" },
        { src: "plugin/notes/notes.js", async: true },
        { src: "plugin/highlight/highlight.js", async: true }
      ]
    });
  </script>
</body>

</html>