map-markers

1import type { FeatureCollection, Point } from "geojson";
2import { useEffect } from "react";
3import { interpolate, useCurrentFrame } from "remotion";
4import type { GeoJSONSource, Map } from "maplibre-gl";
5import {
6  clampProgress,
7  hasMapLayer,
8  hasMapSource,
9  isMapStyleReady,
10  MAP_THEME,
11  removeMapLayer,
12  removeMapSource,
13} from "@/remotion/lib/map-utils";
14import { EASING } from "@/remotion/lib/motion-tokens";
15 
16export type MapMarkersProps = {
17  map: Map | null;
18  markers: FeatureCollection<Point>;
19  dotColor?: string;
20  glowColor?: string;
21  dotRadius?: number;
22  labelSize?: number;
23  sourceId?: string;
24  /** Staggered entrance 0–1; defaults to frame-driven reveal */
25  revealProgress?: number;
26};
27 
28const applyMarkerReveal = ({
29  map,
30  sourceId,
31  dotRadius,
32  revealProgress,
33}: {
34  map: Map;
35  sourceId: string;
36  dotRadius: number;
37  revealProgress: number;
38}) => {
39  if (!isMapStyleReady(map)) {
40    return;
41  }
42 
43  const labelOpacity = revealProgress;
44  const dotScale = 0.72 + revealProgress * 0.28;
45  const labelsId = `${sourceId}-labels`;
46  const dotsId = `${sourceId}-dots`;
47  const glowId = `${sourceId}-glow`;
48 
49  if (hasMapLayer(map, labelsId)) {
50    map.setPaintProperty(labelsId, "text-opacity", labelOpacity);
51  }
52  if (hasMapLayer(map, dotsId)) {
53    map.setPaintProperty(dotsId, "circle-radius", dotRadius * dotScale);
54    map.setPaintProperty(dotsId, "circle-opacity", labelOpacity);
55  }
56  if (hasMapLayer(map, glowId)) {
57    map.setPaintProperty(glowId, "circle-radius", dotRadius * 2.4 * dotScale);
58    map.setPaintProperty(glowId, "circle-opacity", 0.55 * labelOpacity);
59  }
60 
61  map.triggerRepaint();
62};
63 
64export const MapMarkers: React.FC<MapMarkersProps> = ({
65  map,
66  markers,
67  dotColor = MAP_THEME.marker,
68  glowColor = MAP_THEME.markerGlow,
69  dotRadius = 11,
70  labelSize = 28,
71  sourceId = "city-markers",
72  revealProgress: revealProgressProp,
73}) => {
74  const frame = useCurrentFrame();
75  const revealProgress =
76    revealProgressProp ??
77    clampProgress(
78      interpolate(frame, [6, 34], [0, 1], {
79        extrapolateLeft: "clamp",
80        extrapolateRight: "clamp",
81        easing: EASING.enter,
82      }),
83    );
84 
85  useEffect(() => {
86    if (!isMapStyleReady(map)) {
87      return;
88    }
89 
90    if (!hasMapSource(map, sourceId)) {
91      map.addSource(sourceId, {
92        type: "geojson",
93        data: markers,
94      });
95 
96      map.addLayer({
97        id: `${sourceId}-glow`,
98        type: "circle",
99        source: sourceId,
100        paint: {
101// … truncated