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 { parseKml } from "mapgpu/adapters";
12
13import type { RunResultObject } from "@/components/examples/ExampleCanvas";
14
15const KML = `<?xml version="1.0" encoding="UTF-8"?>
16<kml xmlns="http://www.opengis.net/kml/2.2">
17 <Document>
18 <name>Sample KML</name>
19 <Placemark>
20 <name>Ankara</name>
21 <Point><coordinates>32.866,39.925,0</coordinates></Point>
22 </Placemark>
23 <Placemark>
24 <name>Line A</name>
25 <LineString>
26 <coordinates>32.8,39.9,0 33.2,40.1,0 33.6,40.0,0 34.0,40.3,0</coordinates>
27 </LineString>
28 </Placemark>
29 <Placemark>
30 <name>Region</name>
31 <Polygon>
32 <outerBoundaryIs><LinearRing>
33 <coordinates>32.5,39.7,0 33.4,39.6,0 33.2,40.3,0 32.6,40.4,0 32.5,39.7,0</coordinates>
34 </LinearRing></outerBoundaryIs>
35 </Polygon>
36 </Placemark>
37 </Document>
38</kml>`;
39
40export async function run(container: HTMLElement): Promise<RunResultObject> {
41 const view = new MapView({
42 container,
43 renderEngine: new RenderEngine(),
44 mode: "2d",
45 center: [33.0, 40.0],
46 zoom: 7,
47 backgroundColor: "transparent",
48 });
49
50 view.map.add(
51 new RasterTileLayer({
52 id: "osm",
53 urlTemplate: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
54 maxZoom: 19,
55 attribution: "© OpenStreetMap contributors",
56 }),
57 );
58
59 const parsed = parseKml(KML);
60 const byType = {
61 Point: parsed.features.filter((f) => f.geometry.type === "Point"),
62 LineString: parsed.features.filter((f) => f.geometry.type === "LineString"),
63 Polygon: parsed.features.filter((f) => f.geometry.type === "Polygon"),
64 };
65
66 const polygons = new GraphicsLayer({ id: "kml-polygons" });
67 polygons.renderer = new SimpleRenderer({
68 type: "simple-fill",
69 color: [255, 92, 26, 50],
70 outlineColor: [255, 92, 26, 230],
71 outlineWidth: 2,
72 });
73 polygons.addMany(byType.Polygon as never[]);
74 view.map.add(polygons);
75
76 const lines = new GraphicsLayer({ id: "kml-lines" });
77 lines.renderer = new SimpleRenderer({
78 type: "simple-line",
79 color: [67, 176, 255, 240],
80 width: 3,
81 style: "solid",
82 });
83 lines.addMany(byType.LineString as never[]);
84 view.map.add(lines);
85
86 const points = new GraphicsLayer({ id: "kml-points" });
87 points.renderer = new SimpleRenderer({
88 type: "simple-marker",
89 color: [255, 92, 26, 240],
90 size: 10,
91 outlineColor: [255, 255, 255, 255],
92 outlineWidth: 2,
93 });
94 points.addMany(byType.Point as never[]);
95 view.map.add(points);
96
97 await view.when();
98
99 return {
100 dispose: () => view.destroy(),
101 controls: [],
102 };
103}