-
Notifications
You must be signed in to change notification settings - Fork 2.1k
/
app.jsx
48 lines (43 loc) · 1.09 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
import React from 'react';
import {createRoot} from 'react-dom/client';
import {Map} from 'react-map-gl/maplibre';
import DeckGL from '@deck.gl/react';
import {I3SLoader} from '@loaders.gl/i3s';
import {Tile3DLayer} from '@deck.gl/geo-layers';
const TILESET_URL =
'https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/SanFrancisco_Bldgs/SceneServer/layers/0';
const INITIAL_VIEW_STATE = {
latitude: 37.78,
longitude: -122.4,
zoom: 15.5,
pitch: 30,
minZoom: 14,
maxZoom: 20
};
export default function App({
data = TILESET_URL,
mapStyle = 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json'
}) {
const layers = [
new Tile3DLayer({
id: 'tile-3d-layer',
data,
loader: I3SLoader
})
];
return (
<div>
<DeckGL
style={{backgroundColor: '#061714'}}
initialViewState={INITIAL_VIEW_STATE}
controller={true}
layers={layers}
>
<Map reuseMaps mapStyle={mapStyle} />
</DeckGL>
</div>
);
}
export function renderToDOM(container) {
createRoot(container).render(<App />);
}