-
Notifications
You must be signed in to change notification settings - Fork 1.3k
/
app.tsx
74 lines (64 loc) · 2.18 KB
/
app.tsx
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
import * as React from 'react';
import {useState, useEffect, useMemo, useCallback} from 'react';
import {createRoot} from 'react-dom/client';
import Map, {Source, Layer} from 'react-map-gl';
import ControlPanel from './control-panel';
import {dataLayer} from './map-style';
import {updatePercentiles} from './utils';
const MAPBOX_TOKEN = ''; // Set your mapbox token here
export default function App() {
const [year, setYear] = useState(2015);
const [allData, setAllData] = useState(null);
const [hoverInfo, setHoverInfo] = useState(null);
useEffect(() => {
/* global fetch */
fetch(
'https://raw.githubusercontent.com/uber/react-map-gl/master/examples/.data/us-income.geojson'
)
.then(resp => resp.json())
.then(json => setAllData(json))
.catch(err => console.error('Could not load data', err)); // eslint-disable-line
}, []);
const onHover = useCallback(event => {
const {
features,
point: {x, y}
} = event;
const hoveredFeature = features && features[0];
// prettier-ignore
setHoverInfo(hoveredFeature && {feature: hoveredFeature, x, y});
}, []);
const data = useMemo(() => {
return allData && updatePercentiles(allData, f => f.properties.income[year]);
}, [allData, year]);
return (
<>
<Map
initialViewState={{
latitude: 40,
longitude: -100,
zoom: 3
}}
mapStyle="mapbox://styles/mapbox/light-v9"
mapboxAccessToken={MAPBOX_TOKEN}
interactiveLayerIds={['data']}
onMouseMove={onHover}
>
<Source type="geojson" data={data}>
<Layer {...dataLayer} />
</Source>
{hoverInfo && (
<div className="tooltip" style={{left: hoverInfo.x, top: hoverInfo.y}}>
<div>State: {hoverInfo.feature.properties.name}</div>
<div>Median Household Income: {hoverInfo.feature.properties.value}</div>
<div>Percentile: {(hoverInfo.feature.properties.percentile / 8) * 100}</div>
</div>
)}
</Map>
<ControlPanel year={year} onChange={value => setYear(value)} />
</>
);
}
export function renderToDom(container) {
createRoot(container).render(<App />);
}