map-canvas

1import { useEffect, useRef, useState } from "react";
2import {
3  AbsoluteFill,
4  useDelayRender,
5  useVideoConfig,
6} from "remotion";
7import type { Map } from "maplibre-gl";
8import "maplibre-gl/dist/maplibre-gl.css";
9import {
10  createMapInstance,
11  isMapStyleReady,
12  mapVignetteStyle,
13  MAP_THEME,
14  type LngLat,
15} from "@/remotion/lib/map-utils";
16 
17export type MapCanvasProps = {
18  center: LngLat;
19  zoom?: number;
20  style?: string;
21  onMapReady?: (map: Map) => void;
22  backgroundColor?: string;
23  showVignette?: boolean;
24};
25 
26export const MapCanvas: React.FC<MapCanvasProps> = ({
27  center,
28  zoom = 7,
29  style,
30  onMapReady,
31  backgroundColor = MAP_THEME.background,
32  showVignette = true,
33}) => {
34  const containerRef = useRef<HTMLDivElement>(null);
35  const mapRef = useRef<Map | null>(null);
36  const onMapReadyRef = useRef(onMapReady);
37  const { delayRender, continueRender } = useDelayRender();
38  const { width, height } = useVideoConfig();
39  const [loadingHandle] = useState(() => delayRender("Loading map"));
40 
41  onMapReadyRef.current = onMapReady;
42 
43  useEffect(() => {
44    if (!containerRef.current) {
45      return;
46    }
47 
48    const mapInstance = createMapInstance(containerRef.current, width, height, {
49      center,
50      zoom,
51      style,
52    });
53    mapRef.current = mapInstance;
54 
55    const notifyReady = () => {
56      if (!isMapStyleReady(mapInstance)) {
57        return;
58      }
59 
60      mapInstance.jumpTo({ center, zoom });
61      mapInstance.once("idle", () => {
62        onMapReadyRef.current?.(mapInstance);
63        continueRender(loadingHandle);
64      });
65    };
66 
67    if (mapInstance.loaded()) {
68      notifyReady();
69    } else {
70      mapInstance.on("load", notifyReady);
71    }
72  }, [continueRender, height, loadingHandle, style, width, zoom]);
73 
74  useEffect(() => {
75    const mapInstance = mapRef.current;
76    if (!isMapStyleReady(mapInstance) || !mapInstance.loaded()) {
77      return;
78    }
79 
80    mapInstance.jumpTo({ center, zoom });
81    mapInstance.triggerRepaint();
82  }, [center, zoom]);
83 
84  return (
85    <AbsoluteFill style={{ backgroundColor }}>
86      <div
87        ref={containerRef}
88        style={{
89          width,
90          height,
91          position: "absolute",
92        }}
93      />
94      {showVignette ? <div style={mapVignetteStyle} /> : null}
95    </AbsoluteFill>
96  );
97};