-
-
Notifications
You must be signed in to change notification settings - Fork 816
/
DataDrivenCircleColors.js
executable file
·84 lines (77 loc) · 1.76 KB
/
DataDrivenCircleColors.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
import React from 'react';
import Mapbox from '@rnmapbox/maps';
const styles = {
circles: {
circleRadius: [
'interpolate',
['exponential', 1.75],
['zoom'],
12,
2,
22,
180,
],
circleColor: [
'match',
['get', 'ethnicity'],
'White',
'#fbb03b',
'Black',
'#223b53',
'Hispanic',
'#e55e5e',
'Asian',
'#3bb2d0',
/* other */ '#ccc',
],
},
matchParent: { flex: 1 },
};
class DataDrivenCircleColors extends React.PureComponent {
render() {
return (
<>
<Mapbox.MapView
styleURL={Mapbox.StyleURL.Light}
style={styles.matchParent}
>
<Mapbox.Camera
defaultSettings={{
centerCoordinate: [-122.400021, 37.789085],
pitch: 45,
zoomLevel: 10,
}}
/>
<Mapbox.VectorSource
id="population"
url={'mapbox://examples.8fgz4egr'}
>
<Mapbox.CircleLayer
id="sf2010CircleFill"
sourceLayerID="sf2010"
style={styles.circles}
/>
</Mapbox.VectorSource>
</Mapbox.MapView>
</>
);
}
}
export default DataDrivenCircleColors;
/* end-example-doc */
/** @type {import('../common/ExampleMetadata').ExampleMetadata} */
const metadata = {
title: 'Data driven circle colors',
tags: [
'VectorSource',
'CircleLayer',
'CircleLayer#circleRadius',
'CircleLayer#circleColor',
'expressions',
],
docs: `
Renders circles with radius and color based on data-driven expressions.
Color is based on the \`ethnicity\` property of the feature, radius is based on zoom level.
`,
};
DataDrivenCircleColors.metadata = metadata;