Website demo - Photorealistic 3D tiles (visgl#7880)

ll299 · May 10, 2023 · 24f0043 · 24f0043
1 parent 630a09c
commit 24f0043
Show file tree

Hide file tree

Showing 9 changed files with 246 additions and 1 deletion.
diff --git a/examples/website/google-3d-tiles/README.md b/examples/website/google-3d-tiles/README.md
@@ -0,0 +1,21 @@
+This is a minimal standalone version of the Photorealistic 3D Tiles integration example
+on [deck.gl](http://deck.gl) website.
+
+### Usage
+
+To run this example, you need a [Google Maps API key](https://developers.google.com/maps/documentation/javascript/get-api-key). You can either set an environment variables:
+
+```bash
+export GoogleMapsAPIKey=<google_maps_api_key>
+```
+
+Or set the `GOOGLE_MAPS_API_KEY` variable in `app.js`.
+
+```bash
+# install dependencies
+npm install
+# or
+yarn
+# bundle and serve the app with vite
+npm start
+```
diff --git a/examples/website/google-3d-tiles/app.jsx b/examples/website/google-3d-tiles/app.jsx
@@ -0,0 +1,90 @@
+import React, {useState} from 'react';
+import {scaleLinear} from 'd3-scale';
+import {createRoot} from 'react-dom/client';
+import DeckGL from '@deck.gl/react';
+import {GeoJsonLayer} from '@deck.gl/layers';
+import {Tile3DLayer} from '@deck.gl/geo-layers';
+import {DataFilterExtension, _TerrainExtension as TerrainExtension} from '@deck.gl/extensions';
+
+const GOOGLE_MAPS_API_KEY = process.env.GoogleMapsAPIKey; // eslint-disable-line
+const TILESET_URL = 'https://tile.googleapis.com/v1/3dtiles/root.json';
+
+export const COLORS = [
+  [254, 235, 226],
+  [251, 180, 185],
+  [247, 104, 161],
+  [197, 27, 138],
+  [122, 1, 119]
+];
+
+const colorScale = scaleLinear().clamp(true).domain([0, 50, 100, 200, 300]).range(COLORS);
+
+const INITIAL_VIEW_STATE = {
+  latitude: 50.089,
+  longitude: 14.42,
+  zoom: 16,
+  minZoom: 14,
+  maxZoom: 16.5,
+  bearing: 90,
+  pitch: 60
+};
+
+const BUILDING_DATA =
+  'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/google-3d-tiles/buildings.geojson';
+
+export default function App({data = TILESET_URL, distance = 0, opacity = 0.2}) {
+  const [credits, setCredits] = useState('');
+
+  const layers = [
+    new Tile3DLayer({
+      id: 'google-3d-tiles',
+      data: TILESET_URL,
+      onTilesetLoad: tileset3d => {
+        tileset3d.options.onTraversalComplete = selectedTiles => {
+          const uniqueCredits = new Set();
+          selectedTiles.forEach(tile => {
+            const {copyright} = tile.content.gltf.asset;
+            copyright.split(';').forEach(uniqueCredits.add, uniqueCredits);
+          });
+          setCredits([...uniqueCredits].join('; '));
+          return selectedTiles;
+        };
+      },
+      loadOptions: {
+        fetch: {headers: {'X-GOOG-API-KEY': GOOGLE_MAPS_API_KEY}}
+      },
+      operation: 'terrain+draw'
+    }),
+    new GeoJsonLayer({
+      id: 'buildings',
+      data: BUILDING_DATA,
+      extensions: [new DataFilterExtension({filterSize: 1}), new TerrainExtension()],
+      stroked: false,
+      filled: true,
+      getFillColor: ({properties}) => colorScale(properties.distance_to_nearest_tree),
+      opacity,
+      getFilterValue: f => f.properties.distance_to_nearest_tree,
+      filterRange: [distance, 500]
+    })
+  ];
+
+  return (
+    <div>
+      <DeckGL
+        style={{backgroundColor: '#061714'}}
+        initialViewState={INITIAL_VIEW_STATE}
+        controller={{touchRotate: true, inertia: 250}}
+        layers={layers}
+      />
+      <div
+        style={{position: 'absolute', left: '8px', bottom: '4px', color: 'white', fontSize: '10px'}}
+      >
+        {credits}
+      </div>
+    </div>
+  );
+}
+
+export function renderToDOM(container) {
+  createRoot(container).render(<App />);
+}
diff --git a/examples/website/google-3d-tiles/index.html b/examples/website/google-3d-tiles/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8" />
+        <title>google-3d-tiles-example</title>
+        <style>
+            body {
+                font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+                font-size: 13px;
+                -webkit-font-smoothing: antialiased;
+                margin: 0;
+                padding: 0;
+                overflow: hidden;
+            }
+            #app {
+                width: 100vw;
+                height: 100vh;
+            }
+            .deck-tooltip {
+                white-space: nowrap;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="app"></div>
+    </body>
+    <script type="module">
+        import {renderToDOM} from './app.jsx';
+        renderToDOM(document.getElementById('app'));
+    </script>
+</html>
diff --git a/examples/website/google-3d-tiles/package.json b/examples/website/google-3d-tiles/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "deckgl-examples-google-maps-3d",
+  "version": "0.0.0",
+  "private": true,
+  "license": "MIT",
+  "scripts": {
+    "start": "vite --open",
+    "start-local": "vite --config ../../vite.config.local.mjs",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "d3-scale": "^2.0.0",
+    "deck.gl": "^8.9.13"
+  },
+  "devDependencies": {
+    "typescript": "^4.6.0",
+    "vite": "^4.0.0"
+  }
+}
diff --git a/examples/website/google-3d-tiles/vite.config.js b/examples/website/google-3d-tiles/vite.config.js
@@ -0,0 +1,5 @@
+export default {
+  define: {
+    'process.env.GoogleMapsAPIKey': JSON.stringify(process.env.GoogleMapsAPIKey)
+  }
+};
diff --git a/website/src/examples-sidebar.js b/website/src/examples-sidebar.js
@@ -43,7 +43,7 @@ const sidebars = {
     {
       type: 'category',
       label: 'Integrations',
-      items: ['arcgis', 'carto', 'google-maps', 'mapbox']
+      items: ['arcgis', 'carto', 'google-3d-tiles', 'google-maps', 'mapbox']
     },
     {
       type: 'category',

diff --git a/website/src/examples/google-3d-tiles.js b/website/src/examples/google-3d-tiles.js
@@ -0,0 +1,74 @@
+import React, {Component} from 'react';
+import {MAPBOX_STYLES, GITHUB_TREE} from '../constants/defaults';
+import App, {COLORS} from 'website-examples/google-3d-tiles/app';
+
+import {makeExample} from '../components';
+
+class Google3dTilesDemo extends Component {
+  static title = 'Photorealistic 3D Tiles';
+
+  static code = `${GITHUB_TREE}/examples/website/google-3d-tiles`;
+
+  static parameters = {
+    distance: {displayName: 'Distance to tree', type: 'range', value: 0, step: 1, min: 0, max: 400},
+    opacity: {displayName: 'Opacity', type: 'range', value: 0.2, step: 0.01, min: 0, max: 0.5}
+  };
+
+  static mapStyle = MAPBOX_STYLES.DARK;
+
+  static renderInfo(meta) {
+    return (
+      <div>
+        <p>Colored building outlines draped over Google Photorealistic 3D Tiles.</p>
+        <p>
+          See <a href="https://3dtiles.carto.com">full interactive Story Map</a>
+        </p>
+        <div className="layout">
+          {COLORS.map((color, i) => {
+            return (
+              <div
+                className="legend"
+                key={i}
+                style={{
+                  background: `rgb(${color.join(',')})`,
+                  width: `${100 / COLORS.length}%`
+                }}
+              />
+            );
+          })}
+        </div>
+        <p className="layout">
+          <span className="col-1-2">Close</span>
+          <span className="col-1-2 text-right">Far</span>
+        </p>
+        <p>Buildings are colored according to the distance to the nearest tree</p>
+        <p>Data sources:</p>
+        <ul>
+          <li>
+            <a href="https://land.copernicus.eu/pan-european/high-resolution-layers/forests/tree-cover-density">
+              Tree Cover Density
+            </a>
+          </li>
+          <li>
+            <a href="https://wiki.openstreetmap.org/wiki/BigQuery_dataset">Building footprints</a>
+          </li>
+          <li>
+            <a href="https://developers.google.com/maps/documentation/tile/3d-tiles-overview">
+              Map Tiles API
+            </a>
+          </li>
+        </ul>
+      </div>
+    );
+  }
+
+  render() {
+    const {params} = this.props;
+    const distance = params.distance.value;
+    const opacity = params.opacity.value;
+
+    return <App {...this.props} distance={distance} opacity={opacity} />;
+  }
+}
+
+export default makeExample(Google3dTilesDemo);
diff --git a/website/src/examples/google-3d-tiles.mdx b/website/src/examples/google-3d-tiles.mdx
@@ -0,0 +1,5 @@
+# Google 3D Tiles
+
+import Demo from './google-3d-tiles';
+
+<Demo />
diff --git a/website/static/images/examples/google-3d-tiles.jpg b/website/static/images/examples/google-3d-tiles.jpg