archive-gh-me/react-map-gl
1
0
Fork 0
mirror of https://github.com/visgl/react-map-gl.git synced 2026-01-25 16:02:50 +00:00
Code Issues Projects Releases Wiki Activity

reorganize get-started examples (#971)

Browse Source
This commit is contained in:
Xiaoji Chen 2020-01-02 11:50:39 -08:00 committed by GitHub
parent c2933249b5
commit 439e7ec567
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
30 changed files with 132 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
docs/get-started/get-started.md
View File

@ -3,7 +3,7 @@
## Installation
Using `react-map-gl` requires `node >= v4` and `react >= 15.4`.
Using `react-map-gl` requires `node >= v4` and `react >= 16.3`.
```sh
npm install --save react-map-gl
@ -27,12 +27,14 @@ function Map() {
return (
<ReactMapGL
{...viewport}
onViewportChange={viewport => setViewport(viewport)}
onViewportChange={setViewport}
/>
);
}
```
See full project setup in [get-started examples](https://github.com/uber/react-map-gl/tree/master/examples/get-started)
## Styling
The current mapbox-gl release requires its stylesheet be included at all times. The marker, popup and navigation components in react-map-gl also need the stylesheet to work properly.
@ -43,10 +45,11 @@ You may add the stylesheet to the head of your page:
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v<YOUR_MAPBOX_VERSION>/mapbox-gl.css' rel='stylesheet' />
```
Find out your mapbox version by running yarn list mapbox-gl or npm ls mapbox-gl.
Find out your mapbox version by running `yarn list mapbox-gl` or `npm ls mapbox-gl`.
Or embed it in your app by using - [browserify-css](https://www.npmjs.com/package/browserify-css)
with Browserify or - [css-loader](https://webpack.github.io/docs/stylesheets.html) with Webpack:
```js
// app.js
import 'mapbox-gl/dist/mapbox-gl.css';
@ -62,4 +65,4 @@ import 'mapbox-gl/dist/mapbox-gl.css';
* `create-react-app-typescript` - react-map-gl is compatible with [create-react-app-typescript](https://github.com/wmonk/create-react-app-typescript). You can see an example [here](https://github.com/zackhsi/react-map-gl-typescript).
There's many other ready-to-run [examples](https://github.com/uber/react-map-gl/tree/5.0-release/examples) you can take a look at if you need more inspiration.
There's many other ready-to-run [examples](https://github.com/uber/react-map-gl/tree/master/examples) you can take a look at if you need more inspiration.

2
examples/additional-overlays/package.json
View File

@ -12,7 +12,7 @@
"immutable": "^3.8.1",
"react": "^16.3.0",
"react-dom": "^16.3.0",
"react-map-gl": "^5.1.0-alpha"
"react-map-gl": "^5.1.0"
},
"devDependencies": {
"@babel/core": "^7.0.0",

2
examples/controls/package.json
View File

@ -6,7 +6,7 @@
"dependencies": {
"react": "^16.3.0",
"react-dom": "^16.3.0",
"react-map-gl": "^5.1.0-alpha"
"react-map-gl": "^5.1.0"
},
"devDependencies": {
"@babel/core": "^7.0.0",

2
examples/custom-controller/package.json
View File

@ -6,7 +6,7 @@
"dependencies": {
"react": "^16.3.0",
"react-dom": "^16.3.0",
"react-map-gl": "^5.1.0-alpha"
"react-map-gl": "^5.1.0"
},
"devDependencies": {
"@babel/core": "^7.0.0",

2
examples/custom-cursor/package.json
View File

@ -6,7 +6,7 @@
"dependencies": {
"react": "^16.3.0",
"react-dom": "^16.3.0",
"react-map-gl": "^5.1.0-alpha"
"react-map-gl": "^5.1.0"
},
"devDependencies": {
"@babel/core": "^7.0.0",

2
examples/deckgl-overlay/package.json
View File

@ -13,7 +13,7 @@
"probe.gl": "2.0.0-beta.1",
"react": "^16.3.0",
"react-dom": "^16.3.0",
"react-map-gl": "^5.1.0-alpha"
"react-map-gl": "^5.1.0"
},
"devDependencies": {
"@babel/core": "^7.0.0",

2
examples/draggable-markers/package.json
View File

@ -6,7 +6,7 @@
"dependencies": {
"react": "^16.3.0",
"react-dom": "^16.3.0",
"react-map-gl": "^5.1.0-alpha"
"react-map-gl": "^5.1.0"
},
"devDependencies": {
"@babel/core": "^7.0.0",

2
examples/draw-polygon/package.json
View File

@ -7,7 +7,7 @@
"@turf/area": "^6.0.1",
"react": "^16.3.0",
"react-dom": "^16.3.0",
"react-map-gl": "^5.1.0-alpha",
"react-map-gl": "^5.1.0",
"react-map-gl-draw": "^0.15.0",
"styled-components": "^4.3.2"
},

10
examples/exhibit-browserify/README.md
View File

@ -1,10 +0,0 @@
<div align="center">
<img src="https://cdn.pbrd.co/images/vAmSmehU.png" />
</div>
## Exhibits: Browserify
Launch the [browserify](https://github.com/substack/node-browserify) process and apply
the [babelify](https://github.com/babel/babelify) transform, for ES6 support.
Serve it using [budo](https://github.com/mattdesl/budo).

40
examples/exhibit-browserify/app.js
View File

@ -1,40 +0,0 @@
/* global document */
import React, {Component} from 'react';
import {render} from 'react-dom';
import MapGL from 'react-map-gl';
const MAPBOX_TOKEN = ''; // Set your mapbox token here
class Root extends Component {
state = {
viewport: {
latitude: 37.785164,
longitude: -122.41669,
zoom: 16.14044,
bearing: -20.55991,
pitch: 60
}
};
render() {
const {viewport} = this.state;
return (
<MapGL
{...viewport}
mapStyle="mapbox://styles/mapbox/dark-v9"
onViewportChange={v => this.setState({viewport: v})}
preventStyleDiffing={false}
mapboxApiAccessToken={MAPBOX_TOKEN}
perspectiveEnabled
width="100vw"
height="100vh"
/>
);
}
}
const root = document.createElement('div');
document.body.appendChild(root);
render(<Root />, root);

26
examples/exhibit-browserify/package.json
View File

@ -1,26 +0,0 @@
{
"scripts": {
"start": "budo app.js --open -- -t babelify -t envify"
},
"dependencies": {
"immutable": "^3.8.1",
"react": "^16.3.0",
"react-dom": "^16.3.0",
"react-map-gl": "^5.1.0-alpha"
},
"devDependencies": {
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-2": "^6.18.0",
"babelify": "^7.3.0",
"budo": "^9.2.2",
"envify": "^4.0.0"
},
"babel": {
"presets": [
"es2015",
"stage-2",
"react"
]
}
}

2
examples/filter/package.json
View File

@ -6,7 +6,7 @@
"dependencies": {
"react": "^16.3.0",
"react-dom": "^16.3.0",
"react-map-gl": "^5.1.0-alpha"
"react-map-gl": "^5.1.0"
},
"devDependencies": {
"@babel/core": "^7.0.0",

2
examples/geojson-animation/package.json
View File

@ -6,7 +6,7 @@
"dependencies": {
"react": "^16.3.0",
"react-dom": "^16.3.0",
"react-map-gl": "^5.1.0-alpha"
"react-map-gl": "^5.1.0"
},
"devDependencies": {
"@babel/core": "^7.0.0",

2
examples/geojson/package.json
View File

@ -8,7 +8,7 @@
"d3-scale": "^1.0.6",
"react": "^16.3.0",
"react-dom": "^16.3.0",
"react-map-gl": "^5.1.0-alpha"
"react-map-gl": "^5.1.0"
},
"devDependencies": {
"@babel/core": "^7.0.0",

13
examples/get-started/classic/README.md Normal file
View File

@ -0,0 +1,13 @@
<div align="center">
<img src="https://avatars3.githubusercontent.com/u/2105791?v=3&s=200" />
</div>
## react-map-gl example with React Component
The configuration showcased here is a bit less straightforward than its browserify
equivalent due to some incompatibilities with mapbox-gl, but has been kept at a
strict minimum.
You should keep in mind that it is a development configuration, and probably
should be tweaked a bit for production optimization, there is plenty ressources
on the subject and are not in the scope of this example.

12
examples/exhibit-webpack/app.js → examples/get-started/classic/app.js
View File

@ -10,8 +10,8 @@ class Root extends Component {
super(props);
this.state = {
viewport: {
latitude: 37.785164,
longitude: -122.41669,
latitude: 37.8,
longitude: -122.4,
zoom: 14,
bearing: 0,
pitch: 0
@ -20,20 +20,18 @@ class Root extends Component {
}
render() {
const {viewport} = this.state;
return (
<MapGL
{...viewport}
{...this.state.viewport}
width="100vw"
height="100vh"
mapStyle="mapbox://styles/mapbox/dark-v9"
onViewportChange={v => this.setState({viewport: v})}
preventStyleDiffing={false}
onViewportChange={viewport => this.setState({viewport})}
mapboxApiAccessToken={MAPBOX_TOKEN}
/>
);
}
}
document.body.style.margin = 0;
render(<Root />, document.body.appendChild(document.createElement('div')));

3
examples/exhibit-webpack/package.json → examples/get-started/classic/package.json
View File

@ -3,10 +3,9 @@
"start": "webpack-dev-server --progress --hot --open"
},
"dependencies": {
"immutable": "^3.8.1",
"react": "^16.3.0",
"react-dom": "^16.3.0",
"react-map-gl": "^5.1.0-alpha"
"react-map-gl": "^5.1.0"
},
"devDependencies": {
"@babel/core": "^7.0.0",

4
examples/exhibit-webpack/webpack.config.js → examples/get-started/classic/webpack.config.js
View File

@ -1,4 +1,3 @@
const resolve = require('path').resolve;
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
@ -6,7 +5,7 @@ module.exports = {
mode: 'development',
entry: {
app: resolve('./app.js')
app: './app.js'
},
devtool: 'source-map',
@ -16,7 +15,6 @@ module.exports = {
{
// Compile ES2015 using babel
test: /\.js$/,
include: [resolve('.')],
exclude: [/node_modules/],
use: [
{

2
examples/exhibit-webpack/README.md → examples/get-started/hooks/README.md
View File

@ -2,7 +2,7 @@
<img src="https://avatars3.githubusercontent.com/u/2105791?v=3&s=200" />
</div>
## Exhibits: Webpack
## react-map-gl example with React Hooks
The configuration showcased here is a bit less straightforward than its browserify
equivalent due to some incompatibilities with mapbox-gl, but has been kept at a

30
examples/get-started/hooks/app.js Normal file
View File

@ -0,0 +1,30 @@
/* global document */
import React, {useState} from 'react';
import {render} from 'react-dom';
import MapGL from 'react-map-gl';
const MAPBOX_TOKEN = ''; // Set your mapbox token here
function Root() {
const [viewport, setViewport] = useState({
latitude: 37.8,
longitude: -122.4,
zoom: 14,
bearing: 0,
pitch: 0
});
return (
<MapGL
{...viewport}
width="100vw"
height="100vh"
mapStyle="mapbox://styles/mapbox/dark-v9"
onViewportChange={setViewport}
mapboxApiAccessToken={MAPBOX_TOKEN}
/>
);
}
document.body.style.margin = 0;
render(<Root />, document.body.appendChild(document.createElement('div')));

20
examples/get-started/hooks/package.json Normal file
View File

@ -0,0 +1,20 @@
{
"scripts": {
"start": "webpack-dev-server --progress --hot --open"
},
"dependencies": {
"react": "^16.8.0",
"react-dom": "^16.8.0",
"react-map-gl": "^5.1.0"
},
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.0",
"html-webpack-plugin": "^3.0.7",
"webpack": "^4.20.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.0"
}
}

36
examples/get-started/hooks/webpack.config.js Normal file
View File

@ -0,0 +1,36 @@
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
app: './app.js'
},
devtool: 'source-map',
module: {
rules: [
{
// Compile ES2015 using babel
test: /\.js$/,
exclude: [/node_modules/],
use: [
{
loader: 'babel-loader',
options: {
presets: ['@babel/env', '@babel/react']
}
}
]
}
]
},
// Optional: Enables reading mapbox token from environment variable
plugins: [
new HtmlWebpackPlugin({title: 'react-map-gl Example'}),
new webpack.EnvironmentPlugin(['MapboxAccessToken'])
]
};

2
examples/heatmap/package.json
View File

@ -7,7 +7,7 @@
"d3-request": "^1.0.5",
"react": "^16.3.0",
"react-dom": "^16.3.0",
"react-map-gl": "^5.1.0-alpha"
"react-map-gl": "^5.1.0"
},
"devDependencies": {
"@babel/core": "^7.0.0",

2
examples/interaction/package.json
View File

@ -6,7 +6,7 @@
"dependencies": {
"react": "^16.3.0",
"react-dom": "^16.3.0",
"react-map-gl": "^5.1.0-alpha"
"react-map-gl": "^5.1.0"
},
"devDependencies": {
"@babel/core": "^7.0.0",

2
examples/layers/package.json
View File

@ -7,7 +7,7 @@
"immutable": "^3.8.1",
"react": "^16.3.0",
"react-dom": "^16.3.0",
"react-map-gl": "^5.1.0-alpha"
"react-map-gl": "^5.1.0"
},
"devDependencies": {
"@babel/core": "^7.0.0",

2
examples/locate-user/package.json
View File

@ -7,7 +7,7 @@
"immutable": "^3.8.1",
"react": "^16.3.0",
"react-dom": "^16.3.0",
"react-map-gl": "^5.1.0-alpha"
"react-map-gl": "^5.1.0"
},
"devDependencies": {
"@babel/core": "^7.0.0",

2
examples/main/package.json
View File

@ -15,7 +15,7 @@
"immutable": "^3.8.1",
"react": "^16.3.0",
"react-dom": "^16.3.0",
"react-map-gl": "^5.1.0-alpha"
"react-map-gl": "^5.1.0"
},
"devDependencies": {
"@babel/cli": "^7.0.0",

2
examples/reuse-map/package.json
View File

@ -6,7 +6,7 @@
"dependencies": {
"react": "^16.3.0",
"react-dom": "^16.3.0",
"react-map-gl": "^5.1.0-alpha"
"react-map-gl": "^5.1.0"
},
"devDependencies": {
"@babel/core": "^7.0.0",

2
examples/viewport-animation/package.json
View File

@ -6,7 +6,7 @@
"dependencies": {
"react": "^16.3.0",
"react-dom": "^16.3.0",
"react-map-gl": "^5.1.0-alpha"
"react-map-gl": "^5.1.0"
},
"devDependencies": {
"@babel/core": "^7.0.0",

2
examples/zoom-to-bounds/package.json
View File

@ -7,7 +7,7 @@
"@turf/bbox": "^6.0.1",
"react": "^16.3.0",
"react-dom": "^16.3.0",
"react-map-gl": "^5.1.0-alpha"
"react-map-gl": "^5.1.0"
},
"devDependencies": {
"@babel/core": "^7.0.0",