-
Notifications
You must be signed in to change notification settings - Fork 2.1k
/
app.jsx
101 lines (87 loc) · 2.67 KB
/
app.jsx
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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
/* eslint-disable max-len */
import React from 'react';
import {useState, useCallback} from 'react';
import {createRoot} from 'react-dom/client';
import {Map} from 'react-map-gl';
import maplibregl from 'maplibre-gl';
import DeckGL from '@deck.gl/react';
import {MapView} from '@deck.gl/core';
import {TextLayer} from '@deck.gl/layers';
import {CollisionFilterExtension} from '@deck.gl/extensions';
import {scaleLinear} from 'd3-scale';
import {CSVLoader} from '@loaders.gl/csv';
import {load} from '@loaders.gl/core';
// Sample data
const DATA_URL =
'https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/text-layer/cities-1000.csv';
const INITIAL_VIEW_STATE = {
latitude: 39.1,
longitude: -94.57,
zoom: 3.8,
maxZoom: 16,
pitch: 0,
bearing: 0
};
const MAP_STYLE = 'https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json';
const colorScale = scaleLinear()
.domain([3, 4, 5, 6, 7])
.range([
[29, 145, 192],
[65, 182, 196],
[127, 205, 187],
[199, 233, 180],
[237, 248, 177]
]);
export default function App({data, noOverlap = true, fontSize = 32, mapStyle = MAP_STYLE}) {
const [zoom, setZoom] = useState(INITIAL_VIEW_STATE.zoom);
const onViewStateChange = useCallback(({viewState}) => {
setZoom(viewState.zoom);
}, []);
const scale = 2 ** zoom;
const sizeMaxPixels = (scale / 3) * fontSize;
const sizeMinPixels = Math.min(scale / 1000, 0.5) * fontSize;
const textLayer = new TextLayer({
id: 'world-cities',
data,
characterSet: 'auto',
fontSettings: {
buffer: 8
},
// TextLayer options
getText: d => d.name,
getPosition: d => [d.longitude, d.latitude],
getColor: d => colorScale(Math.log10(d.population)),
getSize: d => Math.pow(d.population, 0.25) / 40,
sizeScale: fontSize,
sizeMaxPixels,
sizeMinPixels,
maxWidth: 64 * 12,
// CollideExtension options
collisionEnabled: noOverlap,
getCollisionPriority: d => Math.log10(d.population),
collisionTestProps: {
sizeScale: fontSize * 2,
sizeMaxPixels: sizeMaxPixels * 2,
sizeMinPixels: sizeMinPixels * 2
},
extensions: [new CollisionFilterExtension()]
});
return (
<DeckGL
views={new MapView({repeat: true})}
layers={[textLayer]}
initialViewState={INITIAL_VIEW_STATE}
onViewStateChange={onViewStateChange}
controller={{dragRotate: false}}
>
<Map reuseMaps mapLib={maplibregl} mapStyle={mapStyle} preventStyleDiffing={true} />
</DeckGL>
);
}
export function renderToDOM(container) {
const root = createRoot(container);
root.render(<App />);
load(DATA_URL, CSVLoader).then(data => {
root.render(<App data={data} />);
});
}