map-route

1import type { Feature, LineString } from "geojson";
2import { useEffect } from "react";
3import {
4  Easing,
5  interpolate,
6  useCurrentFrame,
7  useDelayRender,
8  useVideoConfig,
9} from "remotion";
10import type { GeoJSONSource, Map } from "maplibre-gl";
11import * as turf from "@turf/turf";
12import {
13  clampProgress,
14  hasMapLayer,
15  hasMapSource,
16  isMapStyleReady,
17  MAP_THEME,
18  pointAlongRoute,
19  removeMapLayer,
20  removeMapSource,
21  sliceRouteByProgress,
22} from "@/remotion/lib/map-utils";
23import { EASING } from "@/remotion/lib/motion-tokens";
24 
25export type MapRouteProps = {
26  map: Map | null;
27  route: Feature<LineString>;
28  progress?: number;
29  lineColor?: string;
30  glowColor?: string;
31  lineWidth?: number;
32  sourceId?: string;
33  layerId?: string;
34  showHead?: boolean;
35};
36 
37export const MapRoute: React.FC<MapRouteProps> = ({
38  map,
39  route,
40  progress: progressProp,
41  lineColor = MAP_THEME.route,
42  glowColor = MAP_THEME.routeGlow,
43  lineWidth = 5,
44  sourceId = "trace",
45  layerId = "trace-line",
46  showHead = true,
47}) => {
48  const frame = useCurrentFrame();
49  const { durationInFrames } = useVideoConfig();
50  const { delayRender, continueRender } = useDelayRender();
51 
52  const progress =
53    progressProp ??
54    clampProgress(
55      interpolate(frame, [8, durationInFrames - 12], [0, 1], {
56        extrapolateLeft: "clamp",
57        extrapolateRight: "clamp",
58        easing: EASING.enter,
59      }),
60    );
61 
62  useEffect(() => {
63    if (!isMapStyleReady(map)) {
64      return;
65    }
66 
67    const partialRoute = sliceRouteByProgress(route, 0);
68    const headSourceId = `${sourceId}-head`;
69 
70    if (!hasMapSource(map, sourceId)) {
71      map.addSource(sourceId, {
72        type: "geojson",
73        data: partialRoute,
74      });
75 
76      map.addLayer({
77        id: `${layerId}-glow`,
78        type: "line",
79        source: sourceId,
80        layout: {
81          "line-cap": "round",
82          "line-join": "round",
83        },
84        paint: {
85          "line-color": glowColor,
86          "line-width": lineWidth * 2.8,
87          "line-blur": 1.2,
88          "line-opacity": 0.72,
89        },
90      });
91 
92      map.addLayer({
93        id: layerId,
94        type: "line",
95        source: sourceId,
96        layout: {
97          "line-cap": "round",
98          "line-join": "round",
99        },
100        paint: {
101          "line-color": lineColor,
102          "line-width": lineWidth,
103          "line-opacity": 0.96,
104        },
105      });
106 
107      if (showHead) {
108        map.addSource(headSourceId, {
109// … truncated