Map Tiler Vector Element

1// Surface an existing MapTiler Planet feature without maintaining duplicate GeoJSON.
2// Paint animation is deterministic; geometry slicing is not. For a source-to-end line draw,
3// bake the selected feature to ordered GeoJSON and use RiverReveal.tsx instead.
4
5type VectorLayerType = 'fill' | 'line' | 'circle' | 'symbol';
6
7export type MapTilerVectorElement = {
8	id: string;
9	sourceLayer: string;
10	type: VectorLayerType;
11	filter?: unknown[];
12	minzoom?: number;
13	maxzoom?: number;
14	layout?: Record<string, unknown>;
15	paint: Record<string, unknown>;
16};
17
18const SOURCE_ID = 'maptiler-planet';
19
20export const addMapTilerVectorElement = (
21	map: any,
22	apiKey: string,
23	element: MapTilerVectorElement,
24	beforeId?: string,
25) => {
26	if (!map.getSource(SOURCE_ID)) {
27		map.addSource(SOURCE_ID, {
28			type: 'vector',
29			url: `https://api.maptiler.com/tiles/v3/tiles.json?key=${apiKey}`,
30		});
31	}
32
33	if (map.getLayer(element.id)) return;
34
35	map.addLayer(
36		{
37			id: element.id,
38			type: element.type,
39			source: SOURCE_ID,
40			'source-layer': element.sourceLayer,
41			...(element.filter ? {filter: element.filter} : {}),
42			...(element.minzoom === undefined ? {} : {minzoom: element.minzoom}),
43			...(element.maxzoom === undefined ? {} : {maxzoom: element.maxzoom}),
44			...(element.layout ? {layout: element.layout} : {}),
45			paint: element.paint,
46		},
47		beforeId,
48	);
49};
50
51export const setVectorElementPaint = (
52	map: any,
53	layerId: string,
54	paint: Record<string, unknown>,
55) => {
56	for (const [property, value] of Object.entries(paint)) {
57		map.setPaintProperty(layerId, property, value);
58	}
59};
60
61// Example:
62//
63// addMapTilerVectorElement(map, process.env.REMOTION_MAPTILER_KEY!, {
64//   id: "story-river",
65//   sourceLayer: "waterway",
66//   type: "line",
67//   filter: [
68//     "all",
69//     ["==", ["get", "class"], "river"],
70//     ["==", ["coalesce", ["get", "name_en"], ["get", "name"]], "Yarlung Tsangpo"],
71//   ],
72//   layout: {"line-cap": "round", "line-join": "round"},
73//   paint: {"line-color": "#E8F7FF", "line-width": 3, "line-opacity": 0},
74// });
75//
76// Per Remotion frame:
77// setVectorElementPaint(map, "story-river", {
78//   "line-opacity": reveal,
79//   "line-width": 2 + reveal * 2,
80// });