All exampleslayersgeojson-layer
§ examples · layers

GeoJSON Layer

Three GeoJSONLayers — 10 city points, 3 river polylines, 1 polygon hull — each with its own SimpleRenderer symbol type (marker / line / fill). Per-layer visibility toggles.

sluggeojson-layer
source149 lines
statuslive
tsexamples-src/geojson-layer.ts
1/**
2 * GeoJSON Layer — three GeoJSONLayer instances (points / lines / polygons)
3 * each with its own SimpleRenderer. The buttons flip per-layer visibility
4 * so you can isolate a symbology type.
5 */
6 
7import { MapView } from "mapgpu";
8import { GeoJSONLayer, RasterTileLayer } from "mapgpu/layers";
9import { RenderEngine } from "mapgpu/render";
10import { SimpleRenderer } from "mapgpu/core";
11 
12import type { RunResultObject } from "@/components/examples/ExampleCanvas";
13 
14// Inline GeoJSON — in production you'd fetch from a URL. For the demo
15// the data stays small, self-contained and diffable.
16const CITIES = {
17 type: "FeatureCollection" as const,
18 features: [
19 { type: "Feature" as const, properties: { name: "Ankara" }, geometry: { type: "Point" as const, coordinates: [32.866, 39.925] } },
20 { type: "Feature" as const, properties: { name: "Istanbul" }, geometry: { type: "Point" as const, coordinates: [28.979, 41.015] } },
21 { type: "Feature" as const, properties: { name: "Izmir" }, geometry: { type: "Point" as const, coordinates: [27.140, 38.423] } },
22 { type: "Feature" as const, properties: { name: "Antalya" }, geometry: { type: "Point" as const, coordinates: [30.714, 36.897] } },
23 { type: "Feature" as const, properties: { name: "Gaziantep" },geometry: { type: "Point" as const, coordinates: [37.378, 37.067] } },
24 { type: "Feature" as const, properties: { name: "Trabzon" }, geometry: { type: "Point" as const, coordinates: [39.727, 41.005] } },
25 { type: "Feature" as const, properties: { name: "Erzurum" }, geometry: { type: "Point" as const, coordinates: [41.277, 39.904] } },
26 { type: "Feature" as const, properties: { name: "Diyarbakır" },geometry:{ type: "Point" as const, coordinates: [40.230, 37.913] } },
27 { type: "Feature" as const, properties: { name: "Bursa" }, geometry: { type: "Point" as const, coordinates: [29.060, 40.188] } },
28 { type: "Feature" as const, properties: { name: "Konya" }, geometry: { type: "Point" as const, coordinates: [32.484, 37.871] } },
29 ],
30};
31 
32const RIVERS = {
33 type: "FeatureCollection" as const,
34 features: [
35 {
36 type: "Feature" as const,
37 properties: { name: "Kızılırmak" },
38 geometry: {
39 type: "LineString" as const,
40 coordinates: [[38.4, 39.6], [36.8, 39.2], [35.2, 40.1], [34.0, 41.5], [35.9, 41.7]],
41 },
42 },
43 {
44 type: "Feature" as const,
45 properties: { name: "Euphrates" },
46 geometry: {
47 type: "LineString" as const,
48 coordinates: [[39.6, 39.9], [38.6, 39.1], [38.2, 37.8], [38.8, 37.0], [40.6, 36.6], [41.5, 35.6]],
49 },
50 },
51 {
52 type: "Feature" as const,
53 properties: { name: "Tigris" },
54 geometry: {
55 type: "LineString" as const,
56 coordinates: [[41.0, 38.5], [41.4, 37.4], [42.4, 37.1], [43.4, 36.3]],
57 },
58 },
59 ],
60};
61 
62// Simple triangular polygon framing central Anatolia.
63const REGIONS = {
64 type: "FeatureCollection" as const,
65 features: [
66 {
67 type: "Feature" as const,
68 properties: { name: "Central Anatolia hull" },
69 geometry: {
70 type: "Polygon" as const,
71 coordinates: [[
72 [30.5, 37.2],
73 [36.5, 37.5],
74 [33.8, 41.0],
75 [30.5, 37.2],
76 ]],
77 },
78 },
79 ],
80};
81 
82export async function run(container: HTMLElement): Promise<RunResultObject> {
83 const view = new MapView({
84 container,
85 renderEngine: new RenderEngine(),
86 mode: "2d",
87 center: [35.0, 39.5],
88 zoom: 5,
89 minZoom: 2,
90 maxZoom: 18,
91 backgroundColor: "transparent",
92 });
93 
94 view.map.add(
95 new RasterTileLayer({
96 id: "osm",
97 urlTemplate: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
98 maxZoom: 19,
99 attribution: "© OpenStreetMap contributors",
100 }),
101 );
102 
103 // Region polygon — semi-transparent accent fill with solid outline.
104 const regions = new GeoJSONLayer({ id: "regions", data: REGIONS });
105 regions.renderer = new SimpleRenderer({
106 type: "simple-fill",
107 color: [255, 92, 26, 45],
108 outlineColor: [255, 92, 26, 220],
109 outlineWidth: 2,
110 });
111 view.map.add(regions);
112 
113 // Rivers — blue dashed polylines.
114 const rivers = new GeoJSONLayer({ id: "rivers", data: RIVERS });
115 rivers.renderer = new SimpleRenderer({
116 type: "simple-line",
117 color: [67, 176, 255, 220],
118 width: 2.5,
119 style: "solid",
120 });
121 view.map.add(rivers);
122 
123 // City points — orange markers with white ring.
124 const cities = new GeoJSONLayer({ id: "cities", data: CITIES });
125 cities.renderer = new SimpleRenderer({
126 type: "simple-marker",
127 color: [255, 92, 26, 240],
128 size: 9,
129 outlineColor: [255, 255, 255, 255],
130 outlineWidth: 2,
131 });
132 view.map.add(cities);
133 
134 await view.when();
135 
136 const flip = (layer: { visible: boolean }) => {
137 layer.visible = !layer.visible;
138 };
139 
140 return {
141 dispose: () => view.destroy(),
142 controls: [
143 { kind: "button", id: "cities", label: "Toggle cities", onClick: () => flip(cities) },
144 { kind: "button", id: "rivers", label: "Toggle rivers", onClick: () => flip(rivers) },
145 { kind: "button", id: "regions", label: "Toggle region", onClick: () => flip(regions) },
146 ],
147 };
148}