All exampleslayerswms-layer
§ examples · layers

WMS Layer

Terrestris public WMS endpoint routed through `WmsAdapter` with auto CRS + version negotiation. Segmented control swaps between OSM and Topo layer names at runtime.

slugwms-layer
source85 lines
statuslive
tsexamples-src/wms-layer.ts
1/**
2 * WMS Layer — two `WMSLayer` instances against the public Terrestris OSM
3 * endpoint (`OSM-WMS` + `TOPO-OSM-WMS`). Both are pre-loaded so the
4 * `WmsAdapter` capabilities handshake happens once per layer; the
5 * segmented control flips visibility without re-issuing GetCapabilities.
6 */
7 
8import { MapView } from "mapgpu";
9import { RasterTileLayer, WMSLayer } from "mapgpu/layers";
10import { RenderEngine } from "mapgpu/render";
11import { WmsAdapter } from "mapgpu/adapters";
12 
13import type { RunResultObject } from "@/components/examples/ExampleCanvas";
14 
15type Endpoint = "osm" | "topo";
16 
17const WMS_URL = "https://ows.terrestris.de/osm/service";
18 
19function buildWms(kind: Endpoint): WMSLayer {
20 const layerName = kind === "osm" ? "OSM-WMS" : "TOPO-OSM-WMS";
21 return new WMSLayer({
22 id: `wms-${kind}`,
23 url: WMS_URL,
24 layers: [layerName],
25 format: "image/png",
26 transparent: true,
27 adapter: new WmsAdapter({ url: WMS_URL, version: "1.3.0" }),
28 });
29}
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: [10, 50],
37 zoom: 4,
38 minZoom: 2,
39 maxZoom: 14,
40 backgroundColor: "transparent",
41 });
42 
43 view.map.add(
44 new RasterTileLayer({
45 id: "carto-light",
46 urlTemplate: "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
47 subdomains: ["a", "b", "c", "d"],
48 maxZoom: 19,
49 attribution: "© CARTO · © OpenStreetMap contributors",
50 }),
51 );
52 
53 // Both layers are added up front; only one is visible at a time.
54 // Capabilities for each endpoint load in parallel while the basemap
55 // renders behind them.
56 const osmLayer = buildWms("osm");
57 const topoLayer = buildWms("topo");
58 osmLayer.opacity = 0.85;
59 topoLayer.opacity = 0.85;
60 topoLayer.visible = false;
61 view.map.add(osmLayer);
62 view.map.add(topoLayer);
63 
64 await view.when();
65 
66 return {
67 dispose: () => view.destroy(),
68 controls: [
69 {
70 kind: "segmented",
71 id: "wms",
72 initial: "osm",
73 options: [
74 { value: "osm", label: "OSM-WMS" },
75 { value: "topo", label: "TOPO-OSM-WMS" },
76 ],
77 onChange: (value) => {
78 osmLayer.visible = value === "osm";
79 topoLayer.visible = value === "topo";
80 },
81 },
82 ],
83 };
84}