map-flight

1import { loadFont } from "@remotion/google-fonts/Inter";
2import { useEffect, useMemo, useRef, useState } from "react";
3import {
4  AbsoluteFill,
5  interpolate,
6  useCurrentFrame,
7  useDelayRender,
8  useVideoConfig,
9} from "remotion";
10import type { Map } from "maplibre-gl";
11import "maplibre-gl/dist/maplibre-gl.css";
12import { MapMarkers } from "@/remotion/primitives/map-markers";
13import { MapRoute } from "@/remotion/primitives/map-route";
14import {
15  createMapInstance,
16  createMarkerCollection,
17  DEMO_ROUTE,
18  getCameraOptions,
19  greatCircleLine,
20  mapVignetteStyle,
21  MAP_THEME,
22  type LngLat,
23} from "@/remotion/lib/map-utils";
24import { getSafeAreaPadding, scaleFont } from "@/remotion/lib/layout";
25import { EASING } from "@/remotion/lib/motion-tokens";
26 
27const { fontFamily } = loadFont("normal", {
28  weights: ["600", "700"],
29  subsets: ["latin"],
30});
31 
32export type MapFlightProps = {
33  from?: LngLat;
34  to?: LngLat;
35  fromLabel?: string;
36  toLabel?: string;
37  backgroundColor?: string;
38};
39 
40export const MapFlight: React.FC<MapFlightProps> = ({
41  from = DEMO_ROUTE.from,
42  to = DEMO_ROUTE.to,
43  fromLabel,
44  toLabel,
45  backgroundColor = MAP_THEME.background,
46}) => {
47  const containerRef = useRef<HTMLDivElement>(null);
48  const frame = useCurrentFrame();
49  const { delayRender, continueRender } = useDelayRender();
50  const { durationInFrames, width, height } = useVideoConfig();
51  const [map, setMap] = useState<Map | null>(null);
52  const [loadingHandle] = useState(() => delayRender("Loading MapLibre map"));
53 
54  const targetRoute = useMemo(() => greatCircleLine(from, to), [from, to]);
55  const cameraRoute = useMemo(() => greatCircleLine(from, to), [from, to]);
56  const markers = useMemo(
57    () =>
58      createMarkerCollection([
59        { position: from, name: "" },
60        { position: to, name: "" },
61      ]),
62    [from, to],
63  );
64 
65  useEffect(() => {
66    if (!containerRef.current) {
67      return;
68    }
69 
70    const mapInstance = createMapInstance(
71      containerRef.current,
72      width,
73      height,
74      { center: from, zoom: 5 },
75    );
76 
77    mapInstance.on("load", () => {
78      mapInstance.jumpTo({ center: from, zoom: 5 });
79      mapInstance.once("idle", () => {
80        setMap(mapInstance);
81        continueRender(loadingHandle);
82      });
83    });
84  }, [continueRender, from, height, loadingHandle, width]);
85 
86  useEffect(() => {
87    if (!map) {
88      return;
89    }
90 
91    const handle = delayRender("Rendering MapLibre frame");
92    const timelineProgress = interpolate(
93      frame,
94// … truncated