google-3d-tiles-example

diff --git a/examples/website/google-3d-tiles/README.md b/examples/website/google-3d-tiles/README.md new file mode 100644 index 00000000000..a271dc20efa --- /dev/null +++ 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= +``` + +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 new file mode 100644 index 00000000000..5e9601ac2f8 --- /dev/null +++ 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 ( +

+ +

+ {credits} +

+

+ ); +} + +export function renderToDOM(container) { + createRoot(container).render(); +} diff --git a/examples/website/google-3d-tiles/index.html b/examples/website/google-3d-tiles/index.html new file mode 100644 index 00000000000..931f7617b86 --- /dev/null +++ b/examples/website/google-3d-tiles/index.html @@ -0,0 +1,31 @@ + + + + + google-3d-tiles-example + + + +

+ + + diff --git a/examples/website/google-3d-tiles/package.json b/examples/website/google-3d-tiles/package.json new file mode 100644 index 00000000000..64f0dd3d313 --- /dev/null +++ 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 new file mode 100644 index 00000000000..c782ed83e21 --- /dev/null +++ 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 index 0cd97de1e0d..79d2f9f0b80 100644 --- 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 new file mode 100644 index 00000000000..77ccd240764 --- /dev/null +++ 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 ( +

+

Colored building outlines draped over Google Photorealistic 3D Tiles.

+

+ See full interactive Story Map +

+

+ {COLORS.map((color, i) => { + return ( +

+ ); + })} +

+

+ Close + Far +

+

Buildings are colored according to the distance to the nearest tree

+

Data sources:

+

+

+ ); + } + + render() { + const {params} = this.props; + const distance = params.distance.value; + const opacity = params.opacity.value; + + return ; + } +} + +export default makeExample(Google3dTilesDemo); diff --git a/website/src/examples/google-3d-tiles.mdx b/website/src/examples/google-3d-tiles.mdx new file mode 100644 index 00000000000..8b156d4a00b --- /dev/null +++ b/website/src/examples/google-3d-tiles.mdx @@ -0,0 +1,5 @@ +# Google 3D Tiles + +import Demo from './google-3d-tiles'; + + diff --git a/website/static/images/examples/google-3d-tiles.jpg b/website/static/images/examples/google-3d-tiles.jpg new file mode 100644 index 00000000000..0a282ec3ce4 Binary files /dev/null and b/website/static/images/examples/google-3d-tiles.jpg differ