Add terrain example to the website (#4298)

examples/website/terrain/app.js

@@ -0,0 +1,53 @@
+/* eslint-disable max-statements */
+import React from 'react';
+import {render} from 'react-dom';
+import DeckGL from '@deck.gl/react';
+
+import {TerrainLayer} from '@deck.gl/geo-layers';
+
+// Set your mapbox token here
+const MAPBOX_TOKEN = process.env.MapboxAccessToken; // eslint-disable-line
+
+const INITIAL_VIEW_STATE = {
+  latitude: 46.24,
+  longitude: -122.18,
+  zoom: 11.5,
+  bearing: 140,
+  pitch: 60
+};
+
+const TERRAIN_IMAGE = `https://api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.png?access_token=${MAPBOX_TOKEN}`;
+const SURFACE_IMAGE = `https://api.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}@2x.png?access_token=${MAPBOX_TOKEN}`;
+
+// https://docs.mapbox.com/help/troubleshooting/access-elevation-data/#mapbox-terrain-rgb
+// Note - the elevation rendered by this example is greatly exagerated!
+const ELEVATION_DECODER = {
+  rScaler: 6553.6,
+  gScaler: 25.6,
+  bScaler: 0.1,
+  offset: -10000
+};
+
+export default function App({
+  surfaceImage = SURFACE_IMAGE,
+  wireframe = false,
+  initialViewState = INITIAL_VIEW_STATE
+}) {
+  const layer = new TerrainLayer({
+    id: 'terrain',
+    minZoom: 0,
+    maxZoom: 23,
+    strategy: 'no-overlap',
+    elevationDecoder: ELEVATION_DECODER,
+    terrainImage: TERRAIN_IMAGE,
+    surfaceImage,
+    wireframe,
+    color: [255, 255, 255]
+  });
+
+  return <DeckGL initialViewState={initialViewState} controller={true} layers={[layer]} />;
+}
+
+export function renderToDOM(container) {
+  render(<App />, container);
+}

examples/experimental/terrain/package.json → examples/website/terrain/package.json

@@ -6,19 +6,11 @@
     "start-local": "webpack-dev-server --env.local --progress --hot --open",
     "start": "webpack-dev-server --progress --hot --open"
   },
-  "resolutions": {
-    "@loaders.gl/core": "^2.1.0-alpha.4",
-    "@loaders.gl/images": "^2.1.0-alpha.4",
-    "@loaders.gl/loader-utils": "^2.1.0-alpha.4"
-  },
   "dependencies": {
-    "@loaders.gl/images": "^2.1.0-alpha.4",
-    "@mapbox/martini": "^0.2.0",
     "deck.gl": "^8.1.0-alpha.3",
     "react": "^16.3.0",
     "react-dom": "^16.3.0",
-    "react-map-gl": "^5.0.0",
-    "@loaders.gl/terrain": "^2.1.0-alpha.4"
+    "react-map-gl": "^5.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",

examples/experimental/terrain/webpack.config.js → examples/website/terrain/webpack.config.js

@@ -9,7 +9,7 @@ const CONFIG = {
   mode: 'development',
 
   entry: {
-    app: resolve('./src/app.js')
+    app: resolve('./app.js')
   },
 
   output: {

website/contents/pages.js

@@ -152,6 +152,13 @@ export const examplePages = generatePath([
           demo: 'Tiles3DDemo',
           code: getCodeUrl('examples/website/3d-tiles')
         }
+      },
+      {
+        name: 'TerrainLayer',
+        content: {
+          demo: 'TerrainDemo',
+          code: getCodeUrl('examples/website/terrain')
+        }
       }
     ]
   },

website/src/components/demos/index.js

@@ -17,6 +17,7 @@ export {default as PointCloudDemo} from './point-cloud-demo';
 export {default as MapTileDemo} from './map-tile-demo';
 export {default as DataFilterDemo} from './data-filter-demo';
 export {default as Tiles3DDemo} from './tiles-3d-demo';
+export {default as TerrainDemo} from './terrain-demo';
 export * from './layer-demos';
 export * from './aggregation-layer-demos';
 export * from './geo-layer-demos';