archive-gh-me/react-map-gl
1
0
Fork 0
mirror of https://github.com/visgl/react-map-gl.git synced 2026-01-18 15:54:22 +00:00
Code Issues Projects Releases Wiki Activity

Add terrain example (#1495)

Browse Source
This commit is contained in:
Xiaoji Chen 2021-06-07 11:08:23 -07:00 committed by Xiaoji Chen
parent 32ce88d004
commit 815dd50ce4
9 changed files with 207 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
examples/terrain/README.md Normal file
View File

@ -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
```

24
examples/terrain/app.css Normal file
View File

@ -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;
}

15
examples/terrain/index.html Normal file
View File

@ -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>

21
examples/terrain/package.json Normal file
View File

@ -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"
}
}

61
examples/terrain/src/app.js Normal file
View File

@ -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);
}

21
examples/terrain/src/control-panel.js Normal file
View File

@ -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);

47
examples/terrain/webpack.config.js Normal file
View File

@ -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;

6
website/gatsby-config.js
View File

@ -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'
}
],

BIN
website/static/images/example-terrain.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 127 KiB