Add terrain example (#1495)

visgl · Jun 7, 2021 · 227afdb · 227afdb
1 parent b1c74be
commit 227afdb
Show file tree

Hide file tree

Showing 9 changed files with 207 additions and 0 deletions.
diff --git a/examples/terrain/README.md b/examples/terrain/README.md
@@ -0,0 +1,12 @@
+# Example: 3D Terrain
+
+Demonstrates how to add 3D terrain with react-map-gl.
+
+## Usage
+
+To run this example, you need a [Mapbox token](http://visgl.github.io/react-map-gl/docs/get-started/mapbox-tokens). You can either set it as `MAPBOX_TOKEN` in `src/app.js`, or set a `MapboxAccessToken` environment variable in the command line.
+
+```bash
+npm i
+npm run start
+```
diff --git a/examples/terrain/app.css b/examples/terrain/app.css
@@ -0,0 +1,24 @@
+body {
+  margin: 0;
+  background: #000;
+}
+#map {
+  width: 100vw;
+  height: 100vh;
+}
+
+.control-panel {
+  position: absolute;
+  top: 0;
+  right: 0;
+  max-width: 320px;
+  background: #fff;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
+  padding: 12px 24px;
+  margin: 20px;
+  font-size: 13px;
+  line-height: 2;
+  color: #6b6b76;
+  text-transform: uppercase;
+  outline: none;
+}
diff --git a/examples/terrain/index.html b/examples/terrain/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset='UTF-8' />
+    <title>react-map-gl Example</title>
+    <link rel="stylesheet" type="text/css" href="app.css" />
+  </head>
+  <body>
+    <div id="map"></div>
+    <script src='app.js'></script>
+  </body>
+  <script type="text/javascript">
+    App.renderToDom(document.getElementById('map'));
+  </script>
+</html>
diff --git a/examples/terrain/package.json b/examples/terrain/package.json
@@ -0,0 +1,21 @@
+{
+  "scripts": {
+    "start": "webpack-dev-server --progress --hot --open",
+    "start-local": "webpack-dev-server --env.local --progress --hot --open"
+  },
+  "dependencies": {
+    "react": "^16.3.0",
+    "react-dom": "^16.3.0",
+    "react-map-gl": "^6.1.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "babel-loader": "^8.0.0",
+    "webpack": "^4.20.0",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.0"
+  }
+}
diff --git a/examples/terrain/src/app.js b/examples/terrain/src/app.js
@@ -0,0 +1,61 @@
+import * as React from 'react';
+import {useState, useCallback} from 'react';
+import {render} from 'react-dom';
+import MapGL, {Source, Layer} from 'react-map-gl';
+
+import ControlPanel from './control-panel';
+
+const TOKEN = ''; // Set your mapbox token here
+
+const skyLayer = {
+  id: 'sky',
+  type: 'sky',
+  paint: {
+    'sky-type': 'atmosphere',
+    'sky-atmosphere-sun': [0.0, 0.0],
+    'sky-atmosphere-sun-intensity': 15
+  }
+};
+
+export default function App() {
+  const [viewport, setViewport] = useState({
+    latitude: 32.6141,
+    longitude: -114.34411,
+    zoom: 14,
+    bearing: 80,
+    pitch: 80
+  });
+
+  const onMapLoad = useCallback(evt => {
+    const map = evt.target;
+    map.setTerrain({source: 'mapbox-dem', exaggeration: 1.5});
+  }, []);
+
+  return (
+    <>
+      <MapGL
+        {...viewport}
+        width="100%"
+        height="100%"
+        mapStyle="mapbox://styles/mapbox/satellite-v9"
+        onViewportChange={setViewport}
+        mapboxApiAccessToken={TOKEN}
+        onLoad={onMapLoad}
+      >
+        <Source
+          id="mapbox-dem"
+          type="raster-dem"
+          url="mapbox://mapbox.mapbox-terrain-dem-v1"
+          tileSize={512}
+          maxzoom={14}
+        />
+        <Layer {...skyLayer} />
+      </MapGL>
+      <ControlPanel />
+    </>
+  );
+}
+
+export function renderToDom(container) {
+  render(<App />, container);
+}
diff --git a/examples/terrain/src/control-panel.js b/examples/terrain/src/control-panel.js
@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+function ControlPanel(props) {
+  return (
+    <div className="control-panel">
+      <h3>3D Terrain</h3>
+      <p>Add 3D terrain and sky to a map.</p>
+
+      <div className="source-link">
+        <a
+          href="https://github.com/visgl/react-map-gl/tree/6.1-release/examples/terrain"
+          target="_new"
+        >
+          View Code ↗
+        </a>
+      </div>
+    </div>
+  );
+}
+
+export default React.memo(ControlPanel);
diff --git a/examples/terrain/webpack.config.js b/examples/terrain/webpack.config.js
@@ -0,0 +1,47 @@
+// NOTE: To use this example standalone (e.g. outside of repo)
+// delete the local development overrides at the bottom of this file
+
+// avoid destructuring for older Node version support
+const resolve = require('path').resolve;
+const webpack = require('webpack');
+
+const BABEL_CONFIG = {
+  presets: ['@babel/env', '@babel/react'],
+  plugins: ['@babel/proposal-class-properties']
+};
+
+const config = {
+  mode: 'development',
+
+  entry: {
+    app: resolve('./src/app.js')
+  },
+
+  output: {
+    library: 'App'
+  },
+
+  module: {
+    rules: [
+      {
+        // Compile ES2015 using babel
+        test: /\.js$/,
+        include: [resolve('.')],
+        exclude: [/node_modules/],
+        use: [
+          {
+            loader: 'babel-loader',
+            options: BABEL_CONFIG
+          }
+        ]
+      }
+    ]
+  },
+
+  // Optional: Enables reading mapbox token from environment variable
+  plugins: [new webpack.EnvironmentPlugin(['MapboxAccessToken'])]
+};
+
+// Enables bundling against src in this repo rather than the installed version
+module.exports = env =>
+  env && env.local ? require('../webpack.config.local')(config)(env) : config;
diff --git a/website/gatsby-config.js b/website/gatsby-config.js
@@ -150,6 +150,12 @@ module.exports = {
             image: 'images/example-draw-polygon.jpg',
             componentUrl: resolve(__dirname, '../examples/draw-polygon/src/app.js'),
             path: 'examples/draw-polygon'
+          },
+          {
+            title: 'Terrain',
+            image: 'images/example-terrain.jpg',
+            componentUrl: resolve(__dirname, '../examples/terrain/src/app.js'),
+            path: 'examples/terrain'
           }
         ],
 

diff --git a/website/static/images/example-terrain.jpg b/website/static/images/example-terrain.jpg