Non-Geospatial Tiling Example

examples/website/image-tile/README.md

@@ -0,0 +1,23 @@
+This is a standalone high resolution image example using TileLayer and BitmapLayer, with non-geospatial coordinates
+on the [deck.gl](http://deck.gl) website.
+
+### Usage
+
+Copy the content of this folder to your project.
+
+```bash
+# install dependencies
+npm install
+# or
+yarn
+# bundle and serve the app with webpack
+npm start
+```
+
+### Data Source
+
+A DeepZoom pyramid was created from a [source image](http://lroc.sese.asu.edu/posts/293).
+If you have [libvips](https://github.com/libvips/libvips) installed,
+you can run something from the command line like:
+
+`vips dzsave wac_nearside.tif moon.image --tile-size 512 --overlap 0`

examples/website/image-tile/app.js

@@ -0,0 +1,135 @@
+import React, {PureComponent} from 'react';
+import {render} from 'react-dom';
+
+import DeckGL, {OrthographicView, COORDINATE_SYSTEM} from 'deck.gl';
+import {TileLayer} from '@deck.gl/geo-layers';
+import {BitmapLayer} from '@deck.gl/layers';
+import {load} from '@loaders.gl/core';
+
+const INITIAL_VIEW_STATE = {
+  target: [13000, 13000, 0],
+  zoom: -5
+};
+
+const ROOT_URL =
+  'https://raw.githubusercontent.com/uber-common/deck.gl-data/master/website/image-tiles/moon.image';
+
+export default class App extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      height: null,
+      width: null,
+      tileSize: null
+    };
+    this._onHover = this._onHover.bind(this);
+    this._renderTooltip = this._renderTooltip.bind(this);
+    this.inTileBounds = this.inTileBounds.bind(this);
+    this.cutOffImageBounds = this.cutOffImageBounds.bind(this);
+    this.fetchDataFromDZI(`${ROOT_URL}/moon.image.dzi`);
+  }
+
+  _onHover({x, y, sourceLayer, tile}) {
+    this.setState({x, y, hoveredObject: {sourceLayer, tile}});
+  }
+
+  _renderTooltip() {
+    const {x, y, hoveredObject} = this.state;
+    const {sourceLayer, tile} = hoveredObject || {};
+    return (
+      sourceLayer &&
+      tile && (
+        <div className="tooltip" style={{left: x, top: y}}>
+          tile: x: {tile.x}, y: {tile.y}, z: {tile.z}
+        </div>
+      )
+    );
+  }
+
+  inTileBounds({x, y, z}) {
+    const xInBounds = x < Math.ceil(this.state.width / (this.state.tileSize * 2 ** z)) && x >= 0;
+    const yInBounds = y < Math.ceil(this.state.height / (this.state.tileSize * 2 ** z)) && y >= 0;
+    return xInBounds && yInBounds;
+  }
+
+  cutOffImageBounds({left, bottom, right, top}) {
+    return {
+      left: Math.max(0, left),
+      bottom: Math.max(0, Math.min(this.state.height, bottom)),
+      right: Math.max(0, Math.min(this.state.width, right)),
+      top: Math.max(0, top)
+    };
+  }
+
+  fetchDataFromDZI(dziSource) {
+    return (
+      fetch(dziSource) // eslint-disable-line no-undef
+        .then(response => response.text())
+        // eslint-disable-next-line no-undef
+        .then(str => new window.DOMParser().parseFromString(str, 'text/xml'))
+        .then(dziXML => {
+          if (Number(dziXML.getElementsByTagName('Image')[0].attributes.Overlap.value) !== 0) {
+            // eslint-disable-next-line no-undef, no-console
+            console.warn('Overlap paramter is nonzero and should be 0');
+          }
+          this.setState({
+            height: Number(dziXML.getElementsByTagName('Size')[0].attributes.Height.value),
+            width: Number(dziXML.getElementsByTagName('Size')[0].attributes.Width.value),
+            tileSize: Number(dziXML.getElementsByTagName('Image')[0].attributes.TileSize.value)
+          });
+        })
+    );
+  }
+
+  _renderLayers() {
+    const {autoHighlight = true, highlightColor = [60, 60, 60, 40]} = this.props;
+    const {tileSize} = this.state;
+    return [
+      new TileLayer({
+        pickable: true,
+        onHover: this._onHover,
+        tileSize,
+        autoHighlight,
+        highlightColor,
+        minZoom: -16,
+        maxZoom: 0,
+        coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
+        getTileData: ({x, y, z}) => {
+          if (this.inTileBounds({x, y, z: -z})) {
+            return load(`${ROOT_URL}/moon.image_files/${15 + z}/${x}_${y}.jpeg`);
+          }
+          return null;
+        },
+
+        renderSubLayers: props => {
+          const {
+            bbox: {left, bottom, right, top}
+          } = props.tile;
+          const newBounds = this.cutOffImageBounds({left, bottom, right, top});
+          return new BitmapLayer(props, {
+            data: null,
+            image: props.data,
+            bounds: [newBounds.left, newBounds.bottom, newBounds.right, newBounds.top]
+          });
+        }
+      })
+    ];
+  }
+
+  render() {
+    return (
+      <DeckGL
+        views={[new OrthographicView({id: 'ortho'})]}
+        layers={this.state.tileSize ? this._renderLayers() : []}
+        initialViewState={INITIAL_VIEW_STATE}
+        controller={true}
+      >
+        {this._renderTooltip}
+      </DeckGL>
+    );
+  }
+}
+
+export function renderToDOM(container) {
+  render(<App />, container);
+}

examples/website/image-tile/index.html

@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>deck.gl Example</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style>
+    body {
+      margin: 0;
+      font-family: sans-serif;
+      width: 100vw;
+      height: 100vh;
+      overflow: hidden;
+      background-color: black;
+    }
+
+    .tooltip {
+      pointer-events: none;
+      position: absolute;
+      z-index: 9;
+      font-size: 12px;
+      padding: 8px;
+      background: #000;
+      color: #fff;
+      min-width: 160px;
+      max-height: 360px;
+      overflow-y: hidden;
+    }
+
+  </style>
+</head>
+<body>
+<div id="app"></div>
+</body>
+<script type="text/javascript" src="app.js"></script>
+<script type="text/javascript">
+  App.renderToDOM(document.getElementById('app'));
+</script>
+</html>

examples/website/image-tile/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "map-tile",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "start-local": "webpack-dev-server --env.local --progress --hot --open",
+    "start": "webpack-dev-server --progress --hot --open"
+  },
+  "dependencies": {
+    "deck.gl": "^8.0.0",
+    "react": "^16.3.0",
+    "react-dom": "^16.3.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.4.0",
+    "@babel/preset-react": "^7.0.0",
+    "babel-loader": "^8.0.5",
+    "webpack": "^4.20.2",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.1"
+  }
+}

examples/website/image-tile/webpack.config.js

@@ -0,0 +1,32 @@
+// NOTE: To use this example standalone (e.g. outside of deck.gl repo)
+// delete the local development overrides at the bottom of this file
+
+const CONFIG = {
+  mode: 'development',
+
+  entry: {
+    app: './app.js'
+  },
+
+  output: {
+    library: 'App'
+  },
+
+  module: {
+    rules: [
+      {
+        // Transpile ES6 to ES5 with babel
+        // Remove if your app does not use JSX or you don't need to support old browsers
+        test: /\.js$/,
+        loader: 'babel-loader',
+        exclude: [/node_modules/],
+        options: {
+          presets: ['@babel/preset-react']
+        }
+      }
+    ]
+  }
+};
+
+// This line enables bundling against src in this repo rather than installed module
+module.exports = env => (env ? require('../../webpack.config.local')(CONFIG)(env) : CONFIG);