1
2
3
4
5
6
7
8import { MapView } from "mapgpu";
9import { RasterTileLayer } from "mapgpu/layers";
10import { RenderEngine } from "mapgpu/render";
11import {
12 AttributionWidget,
13 ScaleBarWidget,
14 ZoomControlWidget,
15} from "mapgpu/widgets";
16
17import type { RunResultObject } from "@/components/examples/ExampleCanvas";
18
19export async function run(container: HTMLElement): Promise<RunResultObject> {
20 const view = new MapView({
21 container,
22 renderEngine: new RenderEngine(),
23 mode: "2d",
24 center: [32.866, 39.925],
25 zoom: 6,
26 minZoom: 2,
27 maxZoom: 18,
28 backgroundColor: "transparent",
29 });
30
31 view.map.add(
32 new RasterTileLayer({
33 id: "osm",
34 urlTemplate: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
35 minZoom: 0,
36 maxZoom: 19,
37 attribution: "© OpenStreetMap contributors",
38 }),
39 );
40
41 const zoomCtl = new ZoomControlWidget({ position: "top-left" });
42 const scaleBar = new ScaleBarWidget({ position: "bottom-left", unit: "metric" });
43 const attribution = new AttributionWidget({
44 position: "bottom-right",
45 prefix: "mapgpu",
46 }).addAttribution("© OpenStreetMap");
47
48 const widgets = [zoomCtl, scaleBar, attribution];
49 for (const w of widgets) {
50 w.mount(container);
51 w.bind(view);
52 }
53
54 await view.when();
55
56 return {
57 dispose: () => {
58 for (const w of widgets) w.destroy();
59 view.destroy();
60 },
61 controls: [
62 {
63 kind: "toggle",
64 id: "unit",
65 labels: ["metric", "imperial"],
66 initial: false,
67 onChange: (on) => {
68 scaleBar.unit = on ? "imperial" : "metric";
69 },
70 },
71 ],
72 };
73}