diff --git a/docs/get-started/get-started.md b/docs/get-started/get-started.md index ead1d2d1..b4faf736 100644 --- a/docs/get-started/get-started.md +++ b/docs/get-started/get-started.md @@ -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 ( 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: ``` -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. diff --git a/examples/additional-overlays/package.json b/examples/additional-overlays/package.json index 170d7566..4262dbc4 100644 --- a/examples/additional-overlays/package.json +++ b/examples/additional-overlays/package.json @@ -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", diff --git a/examples/controls/package.json b/examples/controls/package.json index 1f7fd7f6..dbb5e649 100644 --- a/examples/controls/package.json +++ b/examples/controls/package.json @@ -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", diff --git a/examples/custom-controller/package.json b/examples/custom-controller/package.json index 1f7fd7f6..dbb5e649 100644 --- a/examples/custom-controller/package.json +++ b/examples/custom-controller/package.json @@ -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", diff --git a/examples/custom-cursor/package.json b/examples/custom-cursor/package.json index 1f7fd7f6..dbb5e649 100644 --- a/examples/custom-cursor/package.json +++ b/examples/custom-cursor/package.json @@ -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", diff --git a/examples/deckgl-overlay/package.json b/examples/deckgl-overlay/package.json index 8390b52f..88d5ec0e 100644 --- a/examples/deckgl-overlay/package.json +++ b/examples/deckgl-overlay/package.json @@ -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", diff --git a/examples/draggable-markers/package.json b/examples/draggable-markers/package.json index 1f7fd7f6..dbb5e649 100644 --- a/examples/draggable-markers/package.json +++ b/examples/draggable-markers/package.json @@ -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", diff --git a/examples/draw-polygon/package.json b/examples/draw-polygon/package.json index 3f209a44..f5778f98 100644 --- a/examples/draw-polygon/package.json +++ b/examples/draw-polygon/package.json @@ -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" }, diff --git a/examples/exhibit-browserify/README.md b/examples/exhibit-browserify/README.md deleted file mode 100644 index 0658f7a7..00000000 --- a/examples/exhibit-browserify/README.md +++ /dev/null @@ -1,10 +0,0 @@ -
- -
- -## 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). diff --git a/examples/exhibit-browserify/app.js b/examples/exhibit-browserify/app.js deleted file mode 100644 index 5293b90a..00000000 --- a/examples/exhibit-browserify/app.js +++ /dev/null @@ -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 ( - 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); diff --git a/examples/exhibit-browserify/package.json b/examples/exhibit-browserify/package.json deleted file mode 100644 index d0263e1d..00000000 --- a/examples/exhibit-browserify/package.json +++ /dev/null @@ -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" - ] - } -} diff --git a/examples/filter/package.json b/examples/filter/package.json index 1f7fd7f6..dbb5e649 100644 --- a/examples/filter/package.json +++ b/examples/filter/package.json @@ -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", diff --git a/examples/geojson-animation/package.json b/examples/geojson-animation/package.json index 1f7fd7f6..dbb5e649 100644 --- a/examples/geojson-animation/package.json +++ b/examples/geojson-animation/package.json @@ -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", diff --git a/examples/geojson/package.json b/examples/geojson/package.json index b1f8716e..2eb367dd 100644 --- a/examples/geojson/package.json +++ b/examples/geojson/package.json @@ -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", diff --git a/examples/get-started/classic/README.md b/examples/get-started/classic/README.md new file mode 100644 index 00000000..d0fcd324 --- /dev/null +++ b/examples/get-started/classic/README.md @@ -0,0 +1,13 @@ +
+ +
+ +## 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. diff --git a/examples/exhibit-webpack/app.js b/examples/get-started/classic/app.js similarity index 75% rename from examples/exhibit-webpack/app.js rename to examples/get-started/classic/app.js index 18630c25..2ea0dc54 100644 --- a/examples/exhibit-webpack/app.js +++ b/examples/get-started/classic/app.js @@ -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 ( this.setState({viewport: v})} - preventStyleDiffing={false} + onViewportChange={viewport => this.setState({viewport})} mapboxApiAccessToken={MAPBOX_TOKEN} /> ); } } +document.body.style.margin = 0; render(, document.body.appendChild(document.createElement('div'))); diff --git a/examples/exhibit-webpack/package.json b/examples/get-started/classic/package.json similarity index 87% rename from examples/exhibit-webpack/package.json rename to examples/get-started/classic/package.json index 28bfe530..e53e7514 100644 --- a/examples/exhibit-webpack/package.json +++ b/examples/get-started/classic/package.json @@ -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", diff --git a/examples/exhibit-webpack/webpack.config.js b/examples/get-started/classic/webpack.config.js similarity index 87% rename from examples/exhibit-webpack/webpack.config.js rename to examples/get-started/classic/webpack.config.js index 2003e7af..be7f676e 100644 --- a/examples/exhibit-webpack/webpack.config.js +++ b/examples/get-started/classic/webpack.config.js @@ -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: [ { diff --git a/examples/exhibit-webpack/README.md b/examples/get-started/hooks/README.md similarity index 92% rename from examples/exhibit-webpack/README.md rename to examples/get-started/hooks/README.md index 05c9e38f..f1a05e9f 100644 --- a/examples/exhibit-webpack/README.md +++ b/examples/get-started/hooks/README.md @@ -2,7 +2,7 @@ -## 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 diff --git a/examples/get-started/hooks/app.js b/examples/get-started/hooks/app.js new file mode 100644 index 00000000..eb74f6e4 --- /dev/null +++ b/examples/get-started/hooks/app.js @@ -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 ( + + ); +} + +document.body.style.margin = 0; +render(, document.body.appendChild(document.createElement('div'))); diff --git a/examples/get-started/hooks/package.json b/examples/get-started/hooks/package.json new file mode 100644 index 00000000..8545fe57 --- /dev/null +++ b/examples/get-started/hooks/package.json @@ -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" + } +} diff --git a/examples/get-started/hooks/webpack.config.js b/examples/get-started/hooks/webpack.config.js new file mode 100644 index 00000000..be7f676e --- /dev/null +++ b/examples/get-started/hooks/webpack.config.js @@ -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']) + ] +}; diff --git a/examples/heatmap/package.json b/examples/heatmap/package.json index 47c67cec..ac5c8c7d 100644 --- a/examples/heatmap/package.json +++ b/examples/heatmap/package.json @@ -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", diff --git a/examples/interaction/package.json b/examples/interaction/package.json index 1f7fd7f6..dbb5e649 100644 --- a/examples/interaction/package.json +++ b/examples/interaction/package.json @@ -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", diff --git a/examples/layers/package.json b/examples/layers/package.json index 5f8d5261..70f3a16c 100644 --- a/examples/layers/package.json +++ b/examples/layers/package.json @@ -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", diff --git a/examples/locate-user/package.json b/examples/locate-user/package.json index 5f8d5261..70f3a16c 100644 --- a/examples/locate-user/package.json +++ b/examples/locate-user/package.json @@ -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", diff --git a/examples/main/package.json b/examples/main/package.json index 502c9287..eaf562f1 100644 --- a/examples/main/package.json +++ b/examples/main/package.json @@ -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", diff --git a/examples/reuse-map/package.json b/examples/reuse-map/package.json index 1f7fd7f6..dbb5e649 100644 --- a/examples/reuse-map/package.json +++ b/examples/reuse-map/package.json @@ -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", diff --git a/examples/viewport-animation/package.json b/examples/viewport-animation/package.json index 1f7fd7f6..dbb5e649 100644 --- a/examples/viewport-animation/package.json +++ b/examples/viewport-animation/package.json @@ -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", diff --git a/examples/zoom-to-bounds/package.json b/examples/zoom-to-bounds/package.json index fa5ad49a..7ab07c00 100644 --- a/examples/zoom-to-bounds/package.json +++ b/examples/zoom-to-bounds/package.json @@ -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",