feat: handle updates to Source tileJsonSource prop more gracefully (#914

)
alex3165 · Nov 24, 2020 · d802870 · d802870
1 parent 8d12383
commit d802870
Show file tree

Hide file tree

Showing 9 changed files with 334 additions and 34 deletions.
diff --git a/example/generateRaws.js b/example/generateRaws.js
@@ -8,7 +8,8 @@ const files = [
   'htmlCluster.tsx',
   'switchStyle.tsx',
   'geojsonLayer.tsx',
-  'heatmap.tsx'
+  'heatmap.tsx',
+  'vectorLayer.tsx'
 ];
 
 files.forEach((file) => {

diff --git a/example/src/demos/raws/vectorLayer.raw b/example/src/demos/raws/vectorLayer.raw
@@ -0,0 +1,125 @@
+import * as React from 'react';
+import ReactMapboxGl, { Layer, Source } from '../../../';
+
+import styled from 'styled-components';
+
+// tslint:disable-next-line:no-var-requires
+const { token, styles } = require('./config.json');
+
+const Map = ReactMapboxGl({ accessToken: token });
+
+const Container = styled.div`
+  position: relative;
+  height: 100%;
+  flex: 1;
+`;
+
+const Button = styled.button`
+  border: 1px solid #3770c6;
+  background-color: rgb(84, 152, 255);
+  height: 100%;
+  color: white;
+  font-size: 13px;
+  padding: 6px 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  outline: none;
+  :hover {
+    background-color: #3770c6;
+  }
+`;
+const Indicator = styled.div`
+  padding: 6px 10px;
+  background-color: white;
+`;
+const BottomBar = styled.div`
+  position: absolute;
+  bottom: 20px;
+  left: 20px;
+  right: 20px;
+  height: 40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const mapStyle = {
+  height: '100%',
+  width: '100%'
+};
+
+export interface Props {
+  // tslint:disable-next-line:no-any
+  onStyleLoad?: (map: any) => any;
+}
+
+const lineLayout = {
+  'line-cap': 'round' as 'round',
+  'line-join': 'round' as 'round'
+};
+
+const linePaint = {
+  'line-color': '#4790E5',
+  'line-width': 2
+};
+
+export interface State {
+  render: 'cloudfront' | 'mapillary';
+}
+
+export default class VectorLayer extends React.Component<Props> {
+  public state: State = {
+    render: 'mapillary'
+  };
+
+  // tslint:disable-next-line:no-any
+  private onStyleLoad = (map: any) => {
+    const { onStyleLoad } = this.props;
+    return onStyleLoad && onStyleLoad(map);
+  };
+
+  public render() {
+    const { render } = this.state;
+    const tileUrl =
+      render === 'mapillary'
+        ? 'https://tiles3.mapillary.com/v0.1/{z}/{x}/{y}.mvt'
+        : 'https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt';
+
+    return (
+      <Container>
+        <Map
+          style={styles.dark}
+          containerStyle={mapStyle}
+          onStyleLoad={this.onStyleLoad}
+        >
+          <Source
+            id="mapillary"
+            tileJsonSource={{
+              type: 'vector',
+              tiles: [tileUrl],
+              minzoom: 6,
+              maxzoom: 14
+            }}
+          />
+          <Layer
+            id="mapillary"
+            type="line"
+            source="mapillary"
+            sourceLayer="mapillary-sequences"
+            layout={lineLayout}
+            paint={linePaint}
+          />
+        </Map>
+        <BottomBar>
+          <Button onClick={() => this.setState({ render: 'mapillary' })}>
+            Mapillary
+          </Button>
+          <Button onClick={() => this.setState({ render: 'cloudfront' })}>
+            Cloudfront
+          </Button>
+          <Indicator>Using tiles from {render}</Indicator>
+        </BottomBar>
+      </Container>
+    );
+  }
+}
diff --git a/example/src/demos/sections.tsx b/example/src/demos/sections.tsx
@@ -6,6 +6,7 @@ import ThreeDMap from './threeDMap';
 import HtmlCluster from './htmlCluster';
 import SwitchStyle from './switchStyle';
 import GeoJsonLayer from './geojsonLayer';
+import VectorLayer from './vectorLayer';
 import Heatmap from './heatmap';
 import { Live } from '../live';
 import raw from 'raw.macro';
@@ -18,6 +19,7 @@ const HtmlClusterRaw = raw('./raws/htmlCluster.raw');
 const SwitchStyleRaw = raw('./raws/switchStyle.raw');
 const GeoJsonLayerRaw = raw('./raws/geojsonLayer.raw');
 const HeatmapRaw = raw('./raws/heatmap.raw');
+const VectorLayerRaw = raw('./raws/vectorLayer.raw');
 
 export const sections = [
   {
@@ -82,5 +84,12 @@ export const sections = [
     components: ['ReactMapboxGl', 'GeoJsonLayer'],
     DemoComponent: GeoJsonLayer,
     reactLive: <Live full={true} raw={GeoJsonLayerRaw} />
+  },
+  {
+    shortTitle: 'vector-source',
+    title: 'Display data from vector tile',
+    components: ['ReactMapboxGl', 'Source', 'Layer'],
+    DemoComponent: VectorLayer,
+    reactLive: <Live full={true} raw={VectorLayerRaw} />
   }
 ];
diff --git a/example/src/demos/vectorLayer.tsx b/example/src/demos/vectorLayer.tsx
@@ -0,0 +1,125 @@
+import * as React from 'react';
+import ReactMapboxGl, { Layer, Source } from '../../../';
+
+import styled from 'styled-components';
+
+// tslint:disable-next-line:no-var-requires
+const { token, styles } = require('./config.json');
+
+const Map = ReactMapboxGl({ accessToken: token });
+
+const Container = styled.div`
+  position: relative;
+  height: 100%;
+  flex: 1;
+`;
+
+const Button = styled.button`
+  border: 1px solid #3770c6;
+  background-color: rgb(84, 152, 255);
+  height: 100%;
+  color: white;
+  font-size: 13px;
+  padding: 6px 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  outline: none;
+  :hover {
+    background-color: #3770c6;
+  }
+`;
+const Indicator = styled.div`
+  padding: 6px 10px;
+  background-color: white;
+`;
+const BottomBar = styled.div`
+  position: absolute;
+  bottom: 20px;
+  left: 20px;
+  right: 20px;
+  height: 40px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const mapStyle = {
+  height: '100%',
+  width: '100%'
+};
+
+export interface Props {
+  // tslint:disable-next-line:no-any
+  onStyleLoad?: (map: any) => any;
+}
+
+const lineLayout = {
+  'line-cap': 'round' as 'round',
+  'line-join': 'round' as 'round'
+};
+
+const linePaint = {
+  'line-color': '#4790E5',
+  'line-width': 2
+};
+
+export interface State {
+  render: 'cloudfront' | 'mapillary';
+}
+
+export default class VectorLayer extends React.Component<Props> {
+  public state: State = {
+    render: 'mapillary'
+  };
+
+  // tslint:disable-next-line:no-any
+  private onStyleLoad = (map: any) => {
+    const { onStyleLoad } = this.props;
+    return onStyleLoad && onStyleLoad(map);
+  };
+
+  public render() {
+    const { render } = this.state;
+    const tileUrl =
+      render === 'mapillary'
+        ? 'https://tiles3.mapillary.com/v0.1/{z}/{x}/{y}.mvt'
+        : 'https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt';
+
+    return (
+      <Container>
+        <Map
+          style={styles.dark}
+          containerStyle={mapStyle}
+          onStyleLoad={this.onStyleLoad}
+        >
+          <Source
+            id="mapillary"
+            tileJsonSource={{
+              type: 'vector',
+              tiles: [tileUrl],
+              minzoom: 6,
+              maxzoom: 14
+            }}
+          />
+          <Layer
+            id="mapillary"
+            type="line"
+            source="mapillary"
+            sourceLayer="mapillary-sequences"
+            layout={lineLayout}
+            paint={linePaint}
+          />
+        </Map>
+        <BottomBar>
+          <Button onClick={() => this.setState({ render: 'mapillary' })}>
+            Mapillary
+          </Button>
+          <Button onClick={() => this.setState({ render: 'cloudfront' })}>
+            Cloudfront
+          </Button>
+          <Indicator>Using tiles from {render}</Indicator>
+        </BottomBar>
+      </Container>
+    );
+  }
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -72,7 +72,7 @@
     "supercluster": "^7.0.0"
   },
   "peerDependencies": {
-    "mapbox-gl": "^1.10.1",
+    "mapbox-gl": "^1.12.0",
     "prop-types": "^15.6.2",
     "react": "^16.11.0",
     "react-dom": "^16.11.0"
@@ -84,7 +84,7 @@
     "@types/enzyme-adapter-react-16": "^1.0.3",
     "@types/geojson": "7946.0.4",
     "@types/jest": "24.0.19",
-    "@types/mapbox-gl": "^1.10.2",
+    "@types/mapbox-gl": "^1.12.8",
     "@types/node": "8.0.29",
     "@types/prettier": "1.10.0",
     "@types/prop-types": "15.5.6",
@@ -95,7 +95,7 @@
     "enzyme-adapter-react-16": "1.6.0",
     "husky": "^0.14.3",
     "jest": "24.9.0",
-    "mapbox-gl": "^1.10.1",
+    "mapbox-gl": "^1.12.0",
     "prettier": "1.10.2",
     "prop-types": "15.6.2",
     "react": "^16.11.0",