1
2
3
4
5
6
7import { MapView } from "mapgpu";
8import { RasterTileLayer } from "mapgpu/layers";
9import { RenderEngine } from "mapgpu/render";
10
11import type { RunResultObject } from "@/components/examples/ExampleCanvas";
12
13export async function run(container: HTMLElement): Promise<RunResultObject> {
14 const view = new MapView({
15 container,
16 renderEngine: new RenderEngine(),
17 mode: "3d",
18 center: [32.0, 20.0],
19 zoom: 2,
20 pitch: 0,
21 bearing: 0,
22 backgroundColor: "transparent",
23 globeEffects: {
24 atmosphere: {
25 enabled: true,
26 colorInner: [1.0, 0.36, 0.1, 0.85],
27 colorOuter: [1.0, 0.69, 0.54, 0.25],
28 strength: 1.6,
29 falloff: 3.2,
30 },
31 },
32 });
33
34 view.map.add(
35 new RasterTileLayer({
36 id: "esri-imagery",
37 urlTemplate:
38 "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
39 maxZoom: 19,
40 attribution: "© Esri · DigitalGlobe · GeoEye · Earthstar Geographics",
41 }),
42 );
43
44 await view.when();
45
46 let spinTimer: number | null = null;
47 const startSpin = () => {
48 let bearing = 0;
49 spinTimer = window.setInterval(() => {
50 bearing = (bearing + 0.3) % 360;
51 void view.goTo({ bearing, duration: 0 });
52 }, 33);
53 };
54 const stopSpin = () => {
55 if (spinTimer != null) {
56 window.clearInterval(spinTimer);
57 spinTimer = null;
58 }
59 };
60
61 return {
62 dispose: () => {
63 stopSpin();
64 view.destroy();
65 },
66 controls: [
67 {
68 kind: "toggle",
69 id: "spin",
70 labels: ["still", "spin"],
71 initial: false,
72 onChange: (on) => {
73 if (on) startSpin();
74 else stopSpin();
75 },
76 },
77 ],
78 };
79}