Skip to content

Commit d802870

Browse files
henrinormakhenrinormak
authored
feat: handle updates to Source tileJsonSource prop more gracefully (#914)
1 parent 8d12383 commit d802870

File tree

9 files changed

+334
-34
lines changed

9 files changed

+334
-34
lines changed

‎example/generateRaws.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ const files = [
88
'htmlCluster.tsx',
99
'switchStyle.tsx',
1010
'geojsonLayer.tsx',
11-
'heatmap.tsx'
11+
'heatmap.tsx',
12+
'vectorLayer.tsx'
1213
];
1314

1415
files.forEach((file) => {

‎example/src/demos/raws/vectorLayer.raw

+125
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
import * as React from 'react';
2+
import ReactMapboxGl, { Layer, Source } from '../../../';
3+
4+
import styled from 'styled-components';
5+
6+
// tslint:disable-next-line:no-var-requires
7+
const { token, styles } = require('./config.json');
8+
9+
const Map = ReactMapboxGl({ accessToken: token });
10+
11+
const Container = styled.div`
12+
position: relative;
13+
height: 100%;
14+
flex: 1;
15+
`;
16+
17+
const Button = styled.button`
18+
border: 1px solid #3770c6;
19+
background-color: rgb(84, 152, 255);
20+
height: 100%;
21+
color: white;
22+
font-size: 13px;
23+
padding: 6px 12px;
24+
border-radius: 6px;
25+
cursor: pointer;
26+
outline: none;
27+
:hover {
28+
background-color: #3770c6;
29+
}
30+
`;
31+
const Indicator = styled.div`
32+
padding: 6px 10px;
33+
background-color: white;
34+
`;
35+
const BottomBar = styled.div`
36+
position: absolute;
37+
bottom: 20px;
38+
left: 20px;
39+
right: 20px;
40+
height: 40px;
41+
display: flex;
42+
justify-content: space-between;
43+
align-items: center;
44+
`;
45+
46+
const mapStyle = {
47+
height: '100%',
48+
width: '100%'
49+
};
50+
51+
export interface Props {
52+
// tslint:disable-next-line:no-any
53+
onStyleLoad?: (map: any) => any;
54+
}
55+
56+
const lineLayout = {
57+
'line-cap': 'round' as 'round',
58+
'line-join': 'round' as 'round'
59+
};
60+
61+
const linePaint = {
62+
'line-color': '#4790E5',
63+
'line-width': 2
64+
};
65+
66+
export interface State {
67+
render: 'cloudfront' | 'mapillary';
68+
}
69+
70+
export default class VectorLayer extends React.Component<Props> {
71+
public state: State = {
72+
render: 'mapillary'
73+
};
74+
75+
// tslint:disable-next-line:no-any
76+
private onStyleLoad = (map: any) => {
77+
const { onStyleLoad } = this.props;
78+
return onStyleLoad && onStyleLoad(map);
79+
};
80+
81+
public render() {
82+
const { render } = this.state;
83+
const tileUrl =
84+
render === 'mapillary'
85+
? 'https://tiles3.mapillary.com/v0.1/{z}/{x}/{y}.mvt'
86+
: 'https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt';
87+
88+
return (
89+
<Container>
90+
<Map
91+
style={styles.dark}
92+
containerStyle={mapStyle}
93+
onStyleLoad={this.onStyleLoad}
94+
>
95+
<Source
96+
id="mapillary"
97+
tileJsonSource={{
98+
type: 'vector',
99+
tiles: [tileUrl],
100+
minzoom: 6,
101+
maxzoom: 14
102+
}}
103+
/>
104+
<Layer
105+
id="mapillary"
106+
type="line"
107+
source="mapillary"
108+
sourceLayer="mapillary-sequences"
109+
layout={lineLayout}
110+
paint={linePaint}
111+
/>
112+
</Map>
113+
<BottomBar>
114+
<Button onClick={() => this.setState({ render: 'mapillary' })}>
115+
Mapillary
116+
</Button>
117+
<Button onClick={() => this.setState({ render: 'cloudfront' })}>
118+
Cloudfront
119+
</Button>
120+
<Indicator>Using tiles from {render}</Indicator>
121+
</BottomBar>
122+
</Container>
123+
);
124+
}
125+
}

‎example/src/demos/sections.tsx

+9
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import ThreeDMap from './threeDMap';
66
import HtmlCluster from './htmlCluster';
77
import SwitchStyle from './switchStyle';
88
import GeoJsonLayer from './geojsonLayer';
9+
import VectorLayer from './vectorLayer';
910
import Heatmap from './heatmap';
1011
import { Live } from '../live';
1112
import raw from 'raw.macro';
@@ -18,6 +19,7 @@ const HtmlClusterRaw = raw('./raws/htmlCluster.raw');
1819
const SwitchStyleRaw = raw('./raws/switchStyle.raw');
1920
const GeoJsonLayerRaw = raw('./raws/geojsonLayer.raw');
2021
const HeatmapRaw = raw('./raws/heatmap.raw');
22+
const VectorLayerRaw = raw('./raws/vectorLayer.raw');
2123

2224
export const sections = [
2325
{
@@ -82,5 +84,12 @@ export const sections = [
8284
components: ['ReactMapboxGl', 'GeoJsonLayer'],
8385
DemoComponent: GeoJsonLayer,
8486
reactLive: <Live full={true} raw={GeoJsonLayerRaw} />
87+
},
88+
{
89+
shortTitle: 'vector-source',
90+
title: 'Display data from vector tile',
91+
components: ['ReactMapboxGl', 'Source', 'Layer'],
92+
DemoComponent: VectorLayer,
93+
reactLive: <Live full={true} raw={VectorLayerRaw} />
8594
}
8695
];

‎example/src/demos/vectorLayer.tsx

+125
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
import * as React from 'react';
2+
import ReactMapboxGl, { Layer, Source } from '../../../';
3+
4+
import styled from 'styled-components';
5+
6+
// tslint:disable-next-line:no-var-requires
7+
const { token, styles } = require('./config.json');
8+
9+
const Map = ReactMapboxGl({ accessToken: token });
10+
11+
const Container = styled.div`
12+
position: relative;
13+
height: 100%;
14+
flex: 1;
15+
`;
16+
17+
const Button = styled.button`
18+
border: 1px solid #3770c6;
19+
background-color: rgb(84, 152, 255);
20+
height: 100%;
21+
color: white;
22+
font-size: 13px;
23+
padding: 6px 12px;
24+
border-radius: 6px;
25+
cursor: pointer;
26+
outline: none;
27+
:hover {
28+
background-color: #3770c6;
29+
}
30+
`;
31+
const Indicator = styled.div`
32+
padding: 6px 10px;
33+
background-color: white;
34+
`;
35+
const BottomBar = styled.div`
36+
position: absolute;
37+
bottom: 20px;
38+
left: 20px;
39+
right: 20px;
40+
height: 40px;
41+
display: flex;
42+
justify-content: space-between;
43+
align-items: center;
44+
`;
45+
46+
const mapStyle = {
47+
height: '100%',
48+
width: '100%'
49+
};
50+
51+
export interface Props {
52+
// tslint:disable-next-line:no-any
53+
onStyleLoad?: (map: any) => any;
54+
}
55+
56+
const lineLayout = {
57+
'line-cap': 'round' as 'round',
58+
'line-join': 'round' as 'round'
59+
};
60+
61+
const linePaint = {
62+
'line-color': '#4790E5',
63+
'line-width': 2
64+
};
65+
66+
export interface State {
67+
render: 'cloudfront' | 'mapillary';
68+
}
69+
70+
export default class VectorLayer extends React.Component<Props> {
71+
public state: State = {
72+
render: 'mapillary'
73+
};
74+
75+
// tslint:disable-next-line:no-any
76+
private onStyleLoad = (map: any) => {
77+
const { onStyleLoad } = this.props;
78+
return onStyleLoad && onStyleLoad(map);
79+
};
80+
81+
public render() {
82+
const { render } = this.state;
83+
const tileUrl =
84+
render === 'mapillary'
85+
? 'https://tiles3.mapillary.com/v0.1/{z}/{x}/{y}.mvt'
86+
: 'https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt';
87+
88+
return (
89+
<Container>
90+
<Map
91+
style={styles.dark}
92+
containerStyle={mapStyle}
93+
onStyleLoad={this.onStyleLoad}
94+
>
95+
<Source
96+
id="mapillary"
97+
tileJsonSource={{
98+
type: 'vector',
99+
tiles: [tileUrl],
100+
minzoom: 6,
101+
maxzoom: 14
102+
}}
103+
/>
104+
<Layer
105+
id="mapillary"
106+
type="line"
107+
source="mapillary"
108+
sourceLayer="mapillary-sequences"
109+
layout={lineLayout}
110+
paint={linePaint}
111+
/>
112+
</Map>
113+
<BottomBar>
114+
<Button onClick={() => this.setState({ render: 'mapillary' })}>
115+
Mapillary
116+
</Button>
117+
<Button onClick={() => this.setState({ render: 'cloudfront' })}>
118+
Cloudfront
119+
</Button>
120+
<Indicator>Using tiles from {render}</Indicator>
121+
</BottomBar>
122+
</Container>
123+
);
124+
}
125+
}

‎package-lock.json

+19-10
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@
7272
"supercluster": "^7.0.0"
7373
},
7474
"peerDependencies": {
75-
"mapbox-gl": "^1.10.1",
75+
"mapbox-gl": "^1.12.0",
7676
"prop-types": "^15.6.2",
7777
"react": "^16.11.0",
7878
"react-dom": "^16.11.0"
@@ -84,7 +84,7 @@
8484
"@types/enzyme-adapter-react-16": "^1.0.3",
8585
"@types/geojson": "7946.0.4",
8686
"@types/jest": "24.0.19",
87-
"@types/mapbox-gl": "^1.10.2",
87+
"@types/mapbox-gl": "^1.12.8",
8888
"@types/node": "8.0.29",
8989
"@types/prettier": "1.10.0",
9090
"@types/prop-types": "15.5.6",
@@ -95,7 +95,7 @@
9595
"enzyme-adapter-react-16": "1.6.0",
9696
"husky": "^0.14.3",
9797
"jest": "24.9.0",
98-
"mapbox-gl": "^1.10.1",
98+
"mapbox-gl": "^1.12.0",
9999
"prettier": "1.10.2",
100100
"prop-types": "15.6.2",
101101
"react": "^16.11.0",

0 commit comments

Comments
 (0)