Merge dd18f6f into 0ed3cbb

.eslintrc

@@ -29,7 +29,7 @@
     "camelcase": 0,
     "react/forbid-prop-types": 0,
     "react/no-deprecated": 0,
-    "import/no-unresolved": ["error", {"ignore": ["test"]}],
+    "import/no-unresolved": ["error", {"ignore": ["test", "website-examples"]}],
     "import/no-extraneous-dependencies": ["error", {"devDependencies": false, "peerDependencies": true}]
   },
   "parserOptions": {

examples/website/openstreet-map/app.js → examples/website/map-tile/app.js

@@ -42,12 +42,14 @@ export class App extends PureComponent {
   }
 
   _renderLayers() {
+    const {autoHighlight = true, highlightColor = [60, 60, 60, 40]} = this.props;
+
     return [
       new TileLayer({
         pickable: true,
         onHover: this._onHover,
-        autoHighlight: true,
-        highlightColor: [60, 60, 60, 40],
+        autoHighlight,
+        highlightColor,
         opacity: 1,
         // https://wiki.openstreetmap.org/wiki/Zoom_levels
         minZoom: 0,

examples/website/openstreet-map/package.json → examples/website/map-tile/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "openstreet",
+  "name": "map-tile",
   "version": "0.0.0",
   "license": "MIT",
   "scripts": {

website/contents/pages.js

@@ -115,6 +115,13 @@ export const examplePages = generatePath([
           demo: 'TextDemo',
           code: getCodeUrl('examples/website/tagmap')
         }
+      },
+      {
+        name: 'TileLayer',
+        content: {
+          demo: 'MapTileDemo',
+          code: getCodeUrl('examples/website/map-tile')
+        }
       }
     ]
   },

website/src/components/demo-launcher.js

@@ -1,3 +1,4 @@
+/* eslint import/namespace: ['error', { allowComputed: true }] */
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import autobind from 'autobind-decorator';
@@ -9,7 +10,6 @@ import {updateMapState, updateMeta, loadData, useParams, resetParams} from '../a
 import {MAPBOX_STYLES} from '../constants/defaults';
 
 class DemoLauncher extends Component {
-
   componentWillMount() {
     this._loadDemo(this.props.demo, false);
   }
@@ -30,7 +30,9 @@ class DemoLauncher extends Component {
     const DemoComponent = Demos[demo];
 
     if (DemoComponent) {
-      this.props.loadData(demo, DemoComponent.data);
+      if (!DemoComponent.allowMissingData) {
+        this.props.loadData(demo, DemoComponent.data);
+      }
       this.props.useParams(DemoComponent.parameters);
       let demoViewport = DemoComponent.viewport;
       this._mapStyle = DemoComponent.mapStyle;
@@ -65,33 +67,27 @@ class DemoLauncher extends Component {
     const {viewState, width, height, isInteractive} = this.props;
 
     if (!mapStyle) {
-      return (
-        <div style={{width, height, position: 'relative'}}>
-          {component}
-        </div>
-      );
+      return <div style={{width, height, position: 'relative'}}>{component}</div>;
     }
 
     return (
       <MapGL
         mapboxApiAccessToken={MapboxAccessToken}
         mapStyle={mapStyle}
         reuseMap
-
         {...viewState}
         width={width}
         height={height}
-        onViewStateChange={this._updateMapViewState}>
-
+        onViewStateChange={this._updateMapViewState}
+      >
         {component}
         {isInteractive && <div className="mapbox-tip">Hold down shift to rotate</div>}
-
       </MapGL>
     );
   }
 
   render() {
-    const {viewState, demo, owner, data, isInteractive} = this.props;
+    const {viewState, demo, owner, data} = this.props;
     const DemoComponent = Demos[demo];
 
     // Params are not initialized in time
@@ -105,23 +101,18 @@ class DemoLauncher extends Component {
       DemoComponent.mapStyle,
       <DemoComponent
         ref="demo"
-
         controller={false}
         baseMap={false}
-
         data={owner === demo ? data : null}
         viewState={viewState}
-
         mapboxApiAccessToken={MapboxAccessToken}
         mapStyle={this._mapStyle || MAPBOX_STYLES.BLANK}
-
         params={params}
         onStateChange={this.props.updateMeta}
         useParams={this.props.useParams}
-        />
+      />
     );
   }
-
 }
 
 const mapStateToProps = state => ({

website/src/components/demos/index.js

@@ -13,4 +13,5 @@ export {default as IconDemo} from './icon-demo';
 export {default as TextDemo} from './text-demo';
 export {default as HighwayDemo} from './highway-demo';
 export {default as PointCloudDemo} from './point-cloud-demo';
+export {default as MapTileDemo} from './map-tile-demo';
 export * from './layer-demos';

website/src/components/demos/map-tile-demo.js

@@ -0,0 +1,46 @@
+import React, {Component} from 'react';
+import {MAPBOX_STYLES} from '../../constants/defaults';
+import {App, INITIAL_VIEW_STATE} from 'website-examples/map-tile/app';
+
+export default class LineDemo extends Component {
+  static get parameters() {
+    return {
+      autoHighlight: {displayName: 'Enable autoHighlight', type: 'checkbox', value: true}
+    };
+  }
+
+  static get allowMissingData() {
+    return true;
+  }
+
+  static get viewport() {
+    return INITIAL_VIEW_STATE;
+  }
+
+  static get mapStyle() {
+    return MAPBOX_STYLES.DARK;
+  }
+
+  static renderInfo() {
+    return (
+      <div>
+        <p>
+          OpenStreetsMap
+          <br />
+          <a href="https://en.wikipedia.org/wiki/OpenStreetMap"> Wiki </a>
+          <br />
+          <a href="https://wiki.openstreetmap.org/wiki/Tile_servers"> Tile Servers </a>
+          <br />
+          <a href="https://www.openstreetmap.org/"> Explorer </a>
+          <br />
+        </p>
+      </div>
+    );
+  }
+
+  render() {
+    // eslint-disable-next-line no-unused-vars
+    const {params, data, ...otherProps} = this.props;
+    return <App {...otherProps} autoHighlight={params.autoHighlight.value} />;
+  }
+}