reorganize get-started examples (#971)

visgl · Jan 2, 2020 · 439e7ec · 439e7ec
1 parent c293324
commit 439e7ec
Show file tree

Hide file tree

Showing 30 changed files with 132 additions and 111 deletions.
diff --git 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 (
     <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.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git a/examples/exhibit-browserify/app.js b/examples/exhibit-browserify/app.js
diff --git a/examples/exhibit-browserify/package.json b/examples/exhibit-browserify/package.json
diff --git 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
@@ -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
@@ -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
@@ -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.
diff --git a/examples/exhibit-webpack/app.js → examples/get-started/classic/app.js b/examples/exhibit-webpack/app.js → 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 (
       <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')));
diff --git a/examples/exhibit-webpack/package.json → examples/get-started/classic/package.json b/examples/exhibit-webpack/package.json → 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 → ...les/get-started/classic/webpack.config.js b/examples/exhibit-webpack/webpack.config.js → ...les/get-started/classic/webpack.config.js
@@ -1,12 +1,11 @@
-const resolve = require('path').resolve;
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 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 → examples/get-started/hooks/README.md b/examples/exhibit-webpack/README.md → examples/get-started/hooks/README.md
@@ -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

diff --git a/examples/get-started/hooks/app.js 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 (
+    <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')));
diff --git a/examples/get-started/hooks/package.json 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
@@ -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'])
+  ]
+};