1
2
3
4
5
6
7import { MapView } from "mapgpu";
8import { GraphicsLayer, RasterTileLayer } from "mapgpu/layers";
9import { RenderEngine } from "mapgpu/render";
10import { SimpleRenderer } from "mapgpu/core";
11import { gpxToFeatures, parseGpx } from "mapgpu/adapters";
12
13import type { RunResultObject } from "@/components/examples/ExampleCanvas";
14
15const GPX = `<?xml version="1.0" encoding="UTF-8"?>
16<gpx version="1.1" creator="mapgpu example" xmlns="http://www.topografix.com/GPX/1/1">
17 <wpt lat="39.925" lon="32.866"><name>start</name><ele>900</ele></wpt>
18 <wpt lat="40.100" lon="33.200"><name>waypoint</name><ele>1100</ele></wpt>
19 <trk>
20 <name>Sample track</name>
21 <trkseg>
22 <trkpt lat="39.920" lon="32.870"><ele>895</ele><time>2026-01-01T08:00:00Z</time></trkpt>
23 <trkpt lat="39.950" lon="32.950"><ele>950</ele><time>2026-01-01T08:05:00Z</time></trkpt>
24 <trkpt lat="40.000" lon="33.050"><ele>1020</ele><time>2026-01-01T08:10:00Z</time></trkpt>
25 <trkpt lat="40.050" lon="33.120"><ele>1080</ele><time>2026-01-01T08:15:00Z</time></trkpt>
26 <trkpt lat="40.100" lon="33.200"><ele>1100</ele><time>2026-01-01T08:20:00Z</time></trkpt>
27 </trkseg>
28 </trk>
29</gpx>`;
30
31export async function run(container: HTMLElement): Promise<RunResultObject> {
32 const view = new MapView({
33 container,
34 renderEngine: new RenderEngine(),
35 mode: "2d",
36 center: [33.0, 40.0],
37 zoom: 9,
38 backgroundColor: "transparent",
39 });
40
41 view.map.add(
42 new RasterTileLayer({
43 id: "osm",
44 urlTemplate: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
45 maxZoom: 19,
46 attribution: "© OpenStreetMap contributors",
47 }),
48 );
49
50 const parsed = parseGpx(GPX);
51 const features = gpxToFeatures(parsed);
52 const tracks = features.filter((f) => f.geometry.type === "LineString");
53 const points = features.filter((f) => f.geometry.type === "Point");
54
55 const line = new GraphicsLayer({ id: "gpx-track" });
56 line.renderer = new SimpleRenderer({
57 type: "simple-line",
58 color: [255, 92, 26, 240],
59 width: 3,
60 style: "solid",
61 });
62 line.addMany(tracks as never[]);
63 view.map.add(line);
64
65 const wpt = new GraphicsLayer({ id: "gpx-waypoints" });
66 wpt.renderer = new SimpleRenderer({
67 type: "simple-marker",
68 color: [67, 176, 255, 240],
69 size: 10,
70 outlineColor: [255, 255, 255, 255],
71 outlineWidth: 2,
72 });
73 wpt.addMany(points as never[]);
74 view.map.add(wpt);
75
76 await view.when();
77
78 return {
79 dispose: () => view.destroy(),
80 controls: [],
81 };
82}