Split out ChoroplethExample into its own folder (#175)

examples/choropleth-overlay/README.md

@@ -0,0 +1,10 @@
+As of version 2, the `ChoroplethOverlay` React component is no longer part
+of the exported library of react-map-gl.
+
+It has been moved to this examples folder, and applications that
+still need it can copy it from here instead of importing it directly.
+
+Removing `ChoroplethOverlay` eliminated a fairly large overlay and a big
+D3 dependency (in particular, d3-geo) from react-map-gl, which seemed like
+the right tradeoff since most users are using mapbox styles or deck.gl layers
+for Choropleths.

examples/choropleth-overlay/app.js

@@ -0,0 +1,45 @@
+// Copyright (c) 2015 Uber Technologies, Inc.
+
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import document from 'global/document';
+import ReactDOM from 'react-dom';
+import React, {Component} from 'react';
+import window from 'global/window';
+
+import ChoroplethOverlayExample from './choropleth-overlay-example';
+
+export default class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {width: window.innerWidth, height: window.innerHeight};
+    window.addEventListener('resize',
+      () => this.setState({width: window.innerWidth, height: window.innerHeight}));
+  }
+
+  render() {
+    const {width, height} = this.state;
+    const props = {width, height, style: {float: 'left'}};
+    return (
+      <ChoroplethOverlayExample {...props}/>
+    );
+  }
+}
+
+ReactDOM.render(<App/>, document.body.appendChild(document.createElement('div')));

examples/choropleth-overlay/choropleth-overlay-example.js

@@ -24,8 +24,9 @@ import MapGL, {autobind} from 'react-map-gl';
 import ChoroplethOverlay from './choropleth-overlay';
 
 // San Francisco
-import ZIPCODES_SF from './../data/feature-example-sf.json';
-import CITIES from './../data/cities.json';
+import ZIPCODES_SF from './data/feature-example-sf.json';
+import CITIES from './data/cities.json';
+
 const location = CITIES[0];
 
 for (const feature of ZIPCODES_SF.features) {

examples/choropleth-overlay/data/cities.json

@@ -0,0 +1,12 @@
+[
+  {
+    "cityName": "San Francisco",
+    "latitude": 37.7749,
+    "longitude": -122.4194
+  },
+  {
+    "cityName": "Pittsburgh",
+    "latitude": 40.4406,
+    "longitude": -79.9959
+  }
+]

examples/choropleth-overlay/data/routes-example.json

@@ -0,0 +1,274 @@
+[
+  {
+    "coordinates": [
+      [
+        -122.3933557873733,
+        37.794219992184324
+      ],
+      [
+        -122.39367189820892,
+        37.79398165755795
+      ],
+      [
+        -122.39401838092769,
+        37.79388241198406
+      ],
+      [
+        -122.3947071294908,
+        37.794423228499795
+      ],
+      [
+        -122.39494688373745,
+        37.79445423060049
+      ],
+      [
+        -122.39571409732676,
+        37.793858299053696
+      ],
+      [
+        -122.39741853206209,
+        37.79245284608079
+      ],
+      [
+        -122.39918399515115,
+        37.79106459055073
+      ],
+      [
+        -122.40003607642596,
+        37.79035713167143
+      ],
+      [
+        -122.40213357823212,
+        37.790068858430104
+      ],
+      [
+        -122.40388909604812,
+        37.78983463559349
+      ],
+      [
+        -122.4054166245374,
+        37.78960041201444
+      ],
+      [
+        -122.40869967084274,
+        37.78920403195862
+      ],
+      [
+        -122.41193711928267,
+        37.788789632353996
+      ],
+      [
+        -122.41526576345333,
+        37.788429282982534
+      ],
+      [
+        -122.41848041296066,
+        37.78799686141706
+      ],
+      [
+        -122.42820266442968,
+        37.78667030140305
+      ],
+      [
+        -122.43987587617389,
+        37.785191419954316
+      ],
+      [
+        -122.43880657433475,
+        37.78061374219536
+      ],
+      [
+        -122.43827192341516,
+        37.777866999452826
+      ],
+      [
+        -122.44669267539851,
+        37.776704885260315
+      ],
+      [
+        -122.44660356691189,
+        37.7757540509692
+      ],
+      [
+        -122.45453422221897,
+        37.77476798767644
+      ]
+    ]
+  },
+  {
+    "coordinates": [
+      [
+        -122.44080380201595,
+        37.75251037780083
+      ],
+      [
+        -122.4425396821639,
+        37.7523902843234
+      ],
+      [
+        -122.44225217701438,
+        37.75281918870459
+      ],
+      [
+        -122.44200806886859,
+        37.75321806754765
+      ],
+      [
+        -122.44180193310093,
+        37.753471118602434
+      ],
+      [
+        -122.44130829218389,
+        37.75388286084137
+      ],
+      [
+        -122.44084177439416,
+        37.75459482638962
+      ],
+      [
+        -122.44071982406115,
+        37.7546745592597
+      ],
+      [
+        -122.44044034714439,
+        37.75508766756418
+      ],
+      [
+        -122.44012846710689,
+        37.75567049861364
+      ],
+      [
+        -122.44005961047523,
+        37.755907472562626
+      ],
+      [
+        -122.44015276944751,
+        37.75640703677898
+      ],
+      [
+        -122.44018924596475,
+        37.756528133045606
+      ],
+      [
+        -122.44033181327828,
+        37.75666225134219
+      ],
+      [
+        -122.44070537573275,
+        37.75680778368681
+      ],
+      [
+        -122.44023039641965,
+        37.75725150991822
+      ],
+      [
+        -122.43988427866199,
+        37.757200599225015
+      ],
+      [
+        -122.4395582840298,
+        37.75708923196163
+      ],
+      [
+        -122.43904715664357,
+        37.757098777733574
+      ],
+      [
+        -122.4390310581432,
+        37.75743287897778
+      ],
+      [
+        -122.43797228289426,
+        37.757496186354615
+      ],
+      [
+        -122.43690020835358,
+        37.75758520091664
+      ],
+      [
+        -122.43582256860111,
+        37.75763591465913
+      ],
+      [
+        -122.43356465673874,
+        37.75773734204003
+      ],
+      [
+        -122.43248701698633,
+        37.7578184838447
+      ],
+      [
+        -122.4326537945671,
+        37.75940073124414
+      ],
+      [
+        -122.43275642692444,
+        37.76103365621418
+      ],
+      [
+        -122.43285905928187,
+        37.76182474975916
+      ],
+      [
+        -122.43293905683697,
+        37.762663828581225
+      ],
+      [
+        -122.43313584578942,
+        37.764194972084184
+      ],
+      [
+        -122.43195511207469,
+        37.76511200542191
+      ],
+      [
+        -122.4310229538788,
+        37.76584889897153
+      ],
+      [
+        -122.42984222016415,
+        37.766757724237436
+      ],
+      [
+        -122.4285786279431,
+        37.76783028743526
+      ],
+      [
+        -122.42690074319054,
+        37.76905839413027
+      ],
+      [
+        -122.42561643634292,
+        37.77008998799232
+      ],
+      [
+        -122.42458070501422,
+        37.77093326434769
+      ],
+      [
+        -122.42341032861272,
+        37.77189114912355
+      ],
+      [
+        -122.42198101937899,
+        37.77302094598606
+      ],
+      [
+        -122.42074849909775,
+        37.773970616950706
+      ],
+      [
+        -122.41969205314248,
+        37.774813849048584
+      ],
+      [
+        -122.41863560718714,
+        37.77560795203675
+      ],
+      [
+        -122.41794166719687,
+        37.77623831637716
+      ]
+    ]
+  }
+]

examples/choropleth-overlay/index.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset='UTF-8' />
+    <title>react-map-gl examples</title>
+  </head>
+  <body>
+    <script src='bundle.js'></script>
+  </body>
+</html>

examples/choropleth-overlay/package.json

@@ -0,0 +1,21 @@
+{
+  "description": "Main example for react-map-gl",
+  "license": "MIT",
+  "scripts": {
+    "start": "webpack-dev-server --progress --hot --port 3001 --open"
+  },
+  "dependencies": {
+    "d3-array": "^1.0.1",
+    "d3-geo": "^1.2.4",
+    "d3-scale": "^1.0.3",
+    "immutable": "^3.8.1",
+    "react": "^15.4.1",
+    "react-dom": "^15.4.1",
+    "react-map-gl": "^1.7.2"
+  },
+  "devDependencies": {
+    "buble-loader": "^0.4.0",
+    "webpack": "^2.2.0-rc.3",
+    "webpack-dev-server": "^2.2.0-rc.0"
+  }
+}

examples/choropleth-overlay/webpack.config.js

@@ -0,0 +1,54 @@
+// NOTE: This is a Webpack 2 configuration file for react-map-gl
+const {resolve} = require('path');
+const webpack = require('webpack');
+
+module.exports = {
+  // Example entry point
+  entry: {
+    app: resolve('./app.js')
+  },
+
+  // Silence excessive webpack dev server warnings
+  devServer: {
+    stats: {
+      warnings: false
+    }
+  },
+
+  devtool: 'source-maps',
+
+  resolve: {
+    alias: {
+      // Work against the latest base library in this repo
+      'react-map-gl': resolve('../..'),
+      // Ensure only one copy of react
+      react: resolve('./node_modules/react'),
+      // Per mapbox-gl-js README for non-browserify bundlers
+      'mapbox-gl$': resolve('./node_modules/mapbox-gl/dist/mapbox-gl.js')
+    }
+  },
+
+  module: {
+    rules: [
+      {
+        // Compile ES2015 and JSX using buble
+        test: /\.js$/,
+        loader: 'buble-loader',
+        exclude: [/node_modules/],
+        options: {
+          objectAssign: 'Object.assign',
+          transforms: {
+            dangerousForOf: true,
+            modules: false
+          }
+        }
+      }
+    ]
+  },
+
+  // Allow setting mapbox token using environment variables
+  plugins: [
+    new webpack.EnvironmentPlugin(['MAPBOX_ACCESS_TOKEN', 'MapboxAccessToken']),
+    new webpack.LoaderOptionsPlugin({minimize: false, debug: true})
+  ]
+};

examples/main/README.md

@@ -0,0 +1,2 @@
+This is the main example of react-map-gl showing multiple configurations
+of the map component and a number of the overlays and styles.

examples/main/app.js

@@ -18,14 +18,12 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import document from 'global/document';
 import ReactDOM from 'react-dom';
 import React, {Component} from 'react';
 import window from 'global/window';
+import document from 'global/document';
 
-import {autobind} from 'react-map-gl';
 import NotInteractiveExample from './views/not-interactive-example';
-import ChoroplethOverlayExample from './views/choropleth-overlay-example';
 import CustomOverlayExample from './views/custom-overlay-example';
 import GeodataCreator from './views/geodata-creator-example';
 import ScatterplotOverlayExample from './views/scatterplot-overlay-example';
@@ -37,28 +35,17 @@ import ClickExample from './views/click-example';
 export default class App extends Component {
   constructor(props) {
     super(props);
-    window.addEventListener('resize', this._onWindowResize);
     this.state = {width: window.innerWidth};
-    autobind(this);
-  }
-
-  _onWindowResize() {
-    this.setState({width: window.innerWidth});
+    window.addEventListener('resize', () => this.setState({width: window.innerWidth}));
   }
 
   render() {
-    const common = {
-      width: 400,
-      height: 400,
-      style: {float: 'left'}
-      // mapboxApiAccessToken: getAccessToken()
-    };
+    const common = {width: 400, height: 400, style: {float: 'left'}};
     return (
       <div>
         <TiltExample {...common} width={ this.state.width - 30 }/>
         <RouteOverlayExample {...common}/>
         <ScatterplotOverlayExample {...common}/>
-        <ChoroplethOverlayExample {...common}/>
         <CustomOverlayExample {...common}/>
         <GeodataCreator {...common}/>
         <NotInteractiveExample {...common}/>

examples/main/package.json

@@ -7,8 +7,6 @@
   "dependencies": {
     "d3-array": "^1.0.1",
     "d3-color": "^1.0.1",
-    "d3-format": "^1.0.2",
-    "d3-geo": "^1.2.4",
     "d3-random": "^1.0.2",
     "d3-scale": "^1.0.3",
     "immutable": "^3.8.1",

examples/main/views/not-interactive-example.js

@@ -20,8 +20,8 @@
 
 import React, {PropTypes, Component} from 'react';
 import MapGL from 'react-map-gl';
-import ZIPCODES_SF from './../data/feature-example-sf.json';
-import CITIES from './../data/cities.json';
+import ZIPCODES_SF from '../data/feature-example-sf.json';
+import CITIES from '../data/cities.json';
 
 const location = CITIES[0];
 

examples/main/views/route-overlay-example.js

@@ -28,7 +28,7 @@ import alphaify from './alphaify';
 import window from 'global/window';
 const windowAlert = window.alert;
 
-import ROUTES from './../data/routes-example.json';
+import ROUTES from '../data/routes-example.json';
 
 function round(x, n) {
   const tenN = Math.pow(10, n);

examples/main/views/scatterplot-overlay-example.js

@@ -26,7 +26,7 @@ import {randomNormal} from 'd3-random';
 import {range} from 'd3-array';
 
 // San Francisco
-import CITIES from './../data/cities.json';
+import CITIES from '../data/cities.json';
 const location = CITIES[0];
 
 const normal = randomNormal();

examples/main/views/style-diffing-example.js

@@ -25,8 +25,8 @@ import Immutable from 'immutable';
 import window from 'global/window';
 
 // San Francisco
-import SF_FEATURE from './../data/feature-example-sf.json';
-import CITIES from './../data/cities.json';
+import SF_FEATURE from '../data/feature-example-sf.json';
+import CITIES from '../data/cities.json';
 const location = CITIES[0];
 
 function buildStyle({fill = 'red', stroke = 'blue'}) {

examples/main/views/tilt-example.js

@@ -25,8 +25,8 @@ import Immutable from 'immutable';
 import window from 'global/window';
 
 // San Francisco
-import SF_FEATURE from './../data/feature-example-sf.json';
-import CITIES from './../data/cities.json';
+import SF_FEATURE from '../data/feature-example-sf.json';
+import CITIES from '../data/cities.json';
 const location = CITIES[0];
 
 function buildStyle({fill = 'red', stroke = 'blue'}) {