@remotion/maptiler 4.0.514

package/README.md

@@ -0,0 +1,7 @@
+# @remotion/maptiler
+
+MapTiler components for Remotion
+
+## Usage
+
+This is an internal package and has no documentation.

package/dist/MapOverlay.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from 'react';
+import { type InteractiveBaseProps, type InteractiveTransformProps, type SequenceControls } from 'remotion';
+export declare const MapOverlay: import("react").ComponentType<InteractiveBaseProps & InteractiveTransformProps & {
+    readonly children?: ReactNode;
+    readonly controls?: SequenceControls | undefined;
+    readonly latitude: number;
+    readonly longitude: number;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/MapRegion.d.ts

@@ -0,0 +1,23 @@
+import { type InteractiveBaseProps, type SequenceControls } from 'remotion';
+export type MapRegionFeature = {
+    type: 'Feature';
+    properties: {
+        name: string;
+        source: string;
+    };
+    geometry: {
+        type: 'Polygon';
+        coordinates: number[][][];
+    };
+};
+export declare const MapRegion: import("react").ComponentType<InteractiveBaseProps & {
+    readonly controls?: SequenceControls | undefined;
+    readonly feature: MapRegionFeature;
+    readonly fill?: number | undefined;
+    readonly fillColor: string;
+    readonly glow?: number | undefined;
+    readonly id: string;
+    readonly progress?: number | undefined;
+    readonly strokeColor?: string | undefined;
+    readonly strokeWidth?: number | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/MapRoute.d.ts

@@ -0,0 +1,21 @@
+import { type InteractiveBaseProps, type SequenceControls } from 'remotion';
+export type MapRouteFeature = {
+    type: 'Feature';
+    properties: {
+        name: string;
+        source: string;
+    };
+    geometry: {
+        type: 'LineString';
+        coordinates: number[][];
+    };
+};
+export declare const MapRoute: import("react").ComponentType<InteractiveBaseProps & {
+    readonly controls?: SequenceControls | undefined;
+    readonly feature: MapRouteFeature;
+    readonly glow?: number | undefined;
+    readonly id: string;
+    readonly progress?: number | undefined;
+    readonly strokeColor?: string | undefined;
+    readonly strokeWidth?: number | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/MapTilerContext.d.ts

@@ -0,0 +1,6 @@
+import type { Map as MapTilerMap } from '@maptiler/sdk';
+export type MapTilerContextValue = {
+    readonly cameraRevision: number;
+    readonly map: MapTilerMap | null;
+};
+export declare const MapTilerContext: import("react").Context<MapTilerContextValue>;

package/dist/MapViewport.d.ts

@@ -0,0 +1,13 @@
+import '@maptiler/sdk/style.css';
+import type { ReactNode } from 'react';
+import { type InteractiveBaseProps, type SequenceControls } from 'remotion';
+export declare const MapViewport: import("react").ComponentType<InteractiveBaseProps & {
+    readonly apiKey: string | null;
+    readonly backgroundColor?: string | undefined;
+    readonly bearing?: number | undefined;
+    readonly centerLatitude?: number | undefined;
+    readonly centerLongitude?: number | undefined;
+    readonly children?: ReactNode;
+    readonly controls?: SequenceControls | undefined;
+    readonly zoom?: number | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/esm/index.mjs

@@ -0,0 +1,900 @@
+// src/MapOverlay.tsx
+import {
+  forwardRef,
+  useContext,
+  useImperativeHandle,
+  useRef
+} from "react";
+import {
+  Interactive,
+  Sequence
+} from "remotion";
+
+// src/MapTilerContext.ts
+import { createContext } from "react";
+var MapTilerContext = createContext({
+  cameraRevision: 0,
+  map: null
+});
+
+// src/MapOverlay.tsx
+import { jsx } from "react/jsx-runtime";
+var mapOverlaySchema = {
+  ...Interactive.baseSchema,
+  longitude: {
+    type: "number",
+    min: -180,
+    max: 180,
+    step: 0.0001,
+    default: 0,
+    description: "Longitude",
+    hiddenFromList: false
+  },
+  latitude: {
+    type: "number",
+    min: -90,
+    max: 90,
+    step: 0.0001,
+    default: 0,
+    description: "Latitude",
+    hiddenFromList: false
+  },
+  ...Interactive.transformSchema
+};
+var MapOverlayRefForwardingFunction = ({
+  children,
+  latitude,
+  longitude,
+  style,
+  durationInFrames,
+  from,
+  trimBefore,
+  freeze,
+  hidden,
+  name,
+  showInTimeline,
+  controls
+}, ref) => {
+  const { map } = useContext(MapTilerContext);
+  const refForOutline = useRef(null);
+  const point = map?.project([longitude, latitude]);
+  useImperativeHandle(ref, () => refForOutline.current, []);
+  return /* @__PURE__ */ jsx(Sequence, {
+    layout: "none",
+    from: from ?? 0,
+    trimBefore,
+    durationInFrames: durationInFrames ?? Infinity,
+    freeze,
+    hidden,
+    name: name ?? "<MapOverlay>",
+    showInTimeline: showInTimeline ?? true,
+    controls,
+    outlineRef: refForOutline,
+    children: /* @__PURE__ */ jsx("div", {
+      ref: refForOutline,
+      style: {
+        left: point?.x ?? 0,
+        pointerEvents: "none",
+        position: "absolute",
+        top: point?.y ?? 0,
+        zIndex: 1,
+        ...style
+      },
+      children
+    })
+  });
+};
+var MapOverlayInner = forwardRef(MapOverlayRefForwardingFunction);
+var MapOverlay = Interactive.withSchema({
+  Component: MapOverlayInner,
+  componentName: "<MapOverlay>",
+  componentIdentity: null,
+  schema: mapOverlaySchema,
+  supportsEffects: false
+});
+// src/MapRegion.tsx
+import { length as getLineLength, lineSliceAlong, lineString } from "@turf/turf";
+import {
+  forwardRef as forwardRef2,
+  useContext as useContext2,
+  useEffect,
+  useImperativeHandle as useImperativeHandle2,
+  useMemo,
+  useRef as useRef2,
+  useState
+} from "react";
+import {
+  Interactive as Interactive2,
+  Sequence as Sequence2,
+  useDelayRender
+} from "remotion";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var mapRegionSchema = {
+  ...Interactive2.baseSchema,
+  fill: {
+    type: "number",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    default: 0,
+    description: "Fill opacity",
+    hiddenFromList: false
+  },
+  fillColor: {
+    type: "color",
+    default: "#d52b1e",
+    description: "Fill color",
+    keyframable: true
+  },
+  glow: {
+    type: "number",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    default: 0.72,
+    description: "Glow intensity",
+    hiddenFromList: false,
+    keyframable: true
+  },
+  progress: {
+    type: "number",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    default: 1,
+    description: "Outline drawing progress",
+    hiddenFromList: false
+  },
+  strokeColor: {
+    type: "color",
+    default: "#8f1712",
+    description: "Stroke color"
+  },
+  strokeWidth: {
+    type: "number",
+    min: 0,
+    max: 50,
+    step: 1,
+    default: 9,
+    description: "Stroke width",
+    hiddenFromList: false
+  }
+};
+var MapRegionDrawing = ({
+  feature,
+  fill = 0,
+  fillColor,
+  glow = 0.72,
+  id,
+  progress = 1,
+  strokeColor = "#8f1712",
+  strokeWidth = 9
+}) => {
+  const { map } = useContext2(MapTilerContext);
+  const { continueRender, delayRender } = useDelayRender();
+  const [isReady, setIsReady] = useState(false);
+  const [loadingHandle] = useState(() => delayRender(`Loading ${feature.properties.name} geometry`));
+  const outline = useMemo(() => lineString(feature.geometry.coordinates[0]), [feature]);
+  const outlineLength = useMemo(() => getLineLength(outline), [outline]);
+  const fillSourceId = `${id}-fill`;
+  const outlineSourceId = `${id}-outline`;
+  const outlineGlowLayerId = `${id}-outline-glow`;
+  useEffect(() => {
+    if (!map) {
+      return;
+    }
+    if (!map.getSource(fillSourceId)) {
+      map.addSource(fillSourceId, {
+        data: feature,
+        type: "geojson"
+      });
+    }
+    if (!map.getLayer(fillSourceId)) {
+      map.addLayer({
+        id: fillSourceId,
+        paint: {
+          "fill-color": fillColor,
+          "fill-color-transition": { delay: 0, duration: 0 },
+          "fill-opacity": 0,
+          "fill-opacity-transition": { delay: 0, duration: 0 }
+        },
+        source: fillSourceId,
+        type: "fill"
+      });
+    }
+    map.setPaintProperty(fillSourceId, "fill-color", fillColor);
+    if (!map.getSource(outlineSourceId)) {
+      map.addSource(outlineSourceId, {
+        data: lineSliceAlong(outline, 0, 0.001),
+        type: "geojson"
+      });
+    }
+    if (!map.getLayer(outlineGlowLayerId)) {
+      map.addLayer({
+        id: outlineGlowLayerId,
+        layout: { "line-cap": "round", "line-join": "round" },
+        paint: {
+          "line-blur": 8,
+          "line-color": "#ffffff",
+          "line-opacity": glow,
+          "line-opacity-transition": { delay: 0, duration: 0 },
+          "line-width": 22
+        },
+        source: outlineSourceId,
+        type: "line"
+      });
+    }
+    map.setPaintProperty(outlineGlowLayerId, "line-opacity", Math.min(1, Math.max(0, glow)));
+    if (!map.getLayer(outlineSourceId)) {
+      map.addLayer({
+        id: outlineSourceId,
+        layout: { "line-cap": "round", "line-join": "round" },
+        paint: {
+          "line-color": strokeColor,
+          "line-color-transition": { delay: 0, duration: 0 },
+          "line-opacity": 1,
+          "line-width": strokeWidth,
+          "line-width-transition": { delay: 0, duration: 0 }
+        },
+        source: outlineSourceId,
+        type: "line"
+      });
+    }
+    map.setPaintProperty(outlineSourceId, "line-color", strokeColor);
+    map.setPaintProperty(outlineSourceId, "line-width", strokeWidth);
+    map.once("idle", () => {
+      setIsReady(true);
+      continueRender(loadingHandle);
+    });
+    map.triggerRepaint();
+  }, [
+    continueRender,
+    feature,
+    fillColor,
+    fillSourceId,
+    glow,
+    loadingHandle,
+    map,
+    outline,
+    outlineGlowLayerId,
+    outlineSourceId,
+    strokeColor,
+    strokeWidth
+  ]);
+  useEffect(() => {
+    if (!isReady || !map) {
+      return;
+    }
+    const frameHandle = delayRender(`Drawing ${feature.properties.name}`);
+    map.getSource(outlineSourceId).setData(lineSliceAlong(outline, 0, Math.max(0.001, outlineLength * Math.min(1, Math.max(0, progress)))));
+    map.setPaintProperty(fillSourceId, "fill-opacity", Math.min(1, Math.max(0, fill)));
+    map.once("idle", () => continueRender(frameHandle));
+    map.triggerRepaint();
+  }, [
+    continueRender,
+    delayRender,
+    feature.properties.name,
+    fill,
+    fillSourceId,
+    isReady,
+    map,
+    outline,
+    outlineLength,
+    outlineSourceId,
+    progress
+  ]);
+  useEffect(() => {
+    if (!map) {
+      return;
+    }
+    return () => {
+      if (map.getLayer(outlineSourceId)) {
+        map.removeLayer(outlineSourceId);
+      }
+      if (map.getLayer(outlineGlowLayerId)) {
+        map.removeLayer(outlineGlowLayerId);
+      }
+      if (map.getLayer(fillSourceId)) {
+        map.removeLayer(fillSourceId);
+      }
+      if (map.getSource(outlineSourceId)) {
+        map.removeSource(outlineSourceId);
+      }
+      if (map.getSource(fillSourceId)) {
+        map.removeSource(fillSourceId);
+      }
+      map.triggerRepaint();
+    };
+  }, [fillSourceId, map, outlineGlowLayerId, outlineSourceId]);
+  return null;
+};
+var MapRegionBounds = ({
+  feature,
+  refForOutline
+}) => {
+  const { map } = useContext2(MapTilerContext);
+  if (!map) {
+    return /* @__PURE__ */ jsx2("div", {
+      ref: refForOutline
+    });
+  }
+  const points = feature.geometry.coordinates.flat().map(([longitude, latitude]) => map.project([longitude, latitude]));
+  const left = Math.min(...points.map((point) => point.x));
+  const right = Math.max(...points.map((point) => point.x));
+  const top = Math.min(...points.map((point) => point.y));
+  const bottom = Math.max(...points.map((point) => point.y));
+  return /* @__PURE__ */ jsx2("div", {
+    ref: refForOutline,
+    style: {
+      height: bottom - top,
+      left,
+      opacity: 0,
+      pointerEvents: "none",
+      position: "absolute",
+      top,
+      width: right - left,
+      zIndex: 1
+    }
+  });
+};
+var MapRegionRefForwardingFunction = ({
+  feature,
+  fill = 0,
+  fillColor,
+  glow = 0.72,
+  id,
+  progress = 1,
+  strokeColor = "#8f1712",
+  strokeWidth = 9,
+  durationInFrames,
+  from,
+  trimBefore,
+  freeze,
+  hidden,
+  name,
+  showInTimeline,
+  controls
+}, ref) => {
+  const refForOutline = useRef2(null);
+  useImperativeHandle2(ref, () => refForOutline.current, []);
+  return /* @__PURE__ */ jsxs(Sequence2, {
+    layout: "none",
+    from: from ?? 0,
+    trimBefore,
+    durationInFrames: durationInFrames ?? Infinity,
+    freeze,
+    hidden,
+    name: name ?? `<${feature.properties.name}>`,
+    showInTimeline: showInTimeline ?? true,
+    controls,
+    outlineRef: refForOutline,
+    children: [
+      /* @__PURE__ */ jsx2(MapRegionDrawing, {
+        feature,
+        fill,
+        fillColor,
+        glow,
+        id,
+        progress,
+        strokeColor,
+        strokeWidth
+      }),
+      /* @__PURE__ */ jsx2(MapRegionBounds, {
+        feature,
+        refForOutline
+      })
+    ]
+  });
+};
+var MapRegionInner = forwardRef2(MapRegionRefForwardingFunction);
+var MapRegion = Interactive2.withSchema({
+  Component: MapRegionInner,
+  componentName: "<MapRegion>",
+  componentIdentity: null,
+  schema: mapRegionSchema,
+  supportsEffects: false
+});
+// src/MapRoute.tsx
+import { length as getLineLength2, lineSliceAlong as lineSliceAlong2, lineString as lineString2 } from "@turf/turf";
+import {
+  forwardRef as forwardRef3,
+  useContext as useContext3,
+  useEffect as useEffect2,
+  useImperativeHandle as useImperativeHandle3,
+  useMemo as useMemo2,
+  useRef as useRef3,
+  useState as useState2
+} from "react";
+import {
+  Interactive as Interactive3,
+  Sequence as Sequence3,
+  useDelayRender as useDelayRender2
+} from "remotion";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var mapRouteSchema = {
+  ...Interactive3.baseSchema,
+  glow: {
+    type: "number",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    default: 0.72,
+    description: "Glow intensity",
+    hiddenFromList: false,
+    keyframable: true
+  },
+  progress: {
+    type: "number",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    default: 1,
+    description: "Route drawing progress",
+    hiddenFromList: false
+  },
+  strokeColor: {
+    type: "color",
+    default: "#006cff",
+    description: "Stroke color"
+  },
+  strokeWidth: {
+    type: "number",
+    min: 0,
+    max: 50,
+    step: 1,
+    default: 9,
+    description: "Stroke width",
+    hiddenFromList: false
+  }
+};
+var MapRouteDrawing = ({
+  feature,
+  glow = 0.72,
+  id,
+  progress = 1,
+  strokeColor = "#006cff",
+  strokeWidth = 9
+}) => {
+  const { map } = useContext3(MapTilerContext);
+  const { continueRender, delayRender } = useDelayRender2();
+  const [isReady, setIsReady] = useState2(false);
+  const [loadingHandle] = useState2(() => delayRender(`Loading ${feature.properties.name} route`));
+  const route = useMemo2(() => lineString2(feature.geometry.coordinates), [feature]);
+  const routeLength = useMemo2(() => getLineLength2(route), [route]);
+  const sourceId = `${id}-route`;
+  const glowLayerId = `${id}-route-glow`;
+  useEffect2(() => {
+    if (!map) {
+      return;
+    }
+    if (!map.getSource(sourceId)) {
+      map.addSource(sourceId, {
+        data: lineSliceAlong2(route, 0, 0.001),
+        type: "geojson"
+      });
+    }
+    if (!map.getLayer(glowLayerId)) {
+      map.addLayer({
+        id: glowLayerId,
+        layout: { "line-cap": "round", "line-join": "round" },
+        paint: {
+          "line-blur": 8,
+          "line-color": "#ffffff",
+          "line-opacity": glow,
+          "line-opacity-transition": { delay: 0, duration: 0 },
+          "line-width": 22
+        },
+        source: sourceId,
+        type: "line"
+      });
+    }
+    map.setPaintProperty(glowLayerId, "line-opacity", Math.min(1, Math.max(0, glow)));
+    if (!map.getLayer(sourceId)) {
+      map.addLayer({
+        id: sourceId,
+        layout: { "line-cap": "round", "line-join": "round" },
+        paint: {
+          "line-color": strokeColor,
+          "line-color-transition": { delay: 0, duration: 0 },
+          "line-opacity": 1,
+          "line-width": strokeWidth,
+          "line-width-transition": { delay: 0, duration: 0 }
+        },
+        source: sourceId,
+        type: "line"
+      });
+    }
+    map.setPaintProperty(sourceId, "line-color", strokeColor);
+    map.setPaintProperty(sourceId, "line-width", strokeWidth);
+    map.once("idle", () => {
+      setIsReady(true);
+      continueRender(loadingHandle);
+    });
+    map.triggerRepaint();
+  }, [
+    continueRender,
+    glow,
+    glowLayerId,
+    loadingHandle,
+    map,
+    route,
+    sourceId,
+    strokeColor,
+    strokeWidth
+  ]);
+  useEffect2(() => {
+    if (!isReady || !map) {
+      return;
+    }
+    const frameHandle = delayRender(`Drawing ${feature.properties.name} route`);
+    map.getSource(sourceId).setData(lineSliceAlong2(route, 0, Math.max(0.001, routeLength * Math.min(1, Math.max(0, progress)))));
+    map.once("idle", () => continueRender(frameHandle));
+    map.triggerRepaint();
+  }, [
+    continueRender,
+    delayRender,
+    feature.properties.name,
+    isReady,
+    map,
+    progress,
+    route,
+    routeLength,
+    sourceId
+  ]);
+  useEffect2(() => {
+    if (!map) {
+      return;
+    }
+    return () => {
+      if (map.getLayer(sourceId)) {
+        map.removeLayer(sourceId);
+      }
+      if (map.getLayer(glowLayerId)) {
+        map.removeLayer(glowLayerId);
+      }
+      if (map.getSource(sourceId)) {
+        map.removeSource(sourceId);
+      }
+      map.triggerRepaint();
+    };
+  }, [glowLayerId, map, sourceId]);
+  return null;
+};
+var MapRouteBounds = ({
+  feature,
+  refForOutline
+}) => {
+  const { map } = useContext3(MapTilerContext);
+  if (!map) {
+    return /* @__PURE__ */ jsx3("div", {
+      ref: refForOutline
+    });
+  }
+  const points = feature.geometry.coordinates.map(([longitude, latitude]) => map.project([longitude, latitude]));
+  const left = Math.min(...points.map((point) => point.x));
+  const right = Math.max(...points.map((point) => point.x));
+  const top = Math.min(...points.map((point) => point.y));
+  const bottom = Math.max(...points.map((point) => point.y));
+  return /* @__PURE__ */ jsx3("div", {
+    ref: refForOutline,
+    style: {
+      height: bottom - top,
+      left,
+      opacity: 0,
+      pointerEvents: "none",
+      position: "absolute",
+      top,
+      width: right - left,
+      zIndex: 1
+    }
+  });
+};
+var MapRouteRefForwardingFunction = ({
+  feature,
+  glow = 0.72,
+  id,
+  progress = 1,
+  strokeColor = "#006cff",
+  strokeWidth = 9,
+  durationInFrames,
+  from,
+  trimBefore,
+  freeze,
+  hidden,
+  name,
+  showInTimeline,
+  controls
+}, ref) => {
+  const refForOutline = useRef3(null);
+  useImperativeHandle3(ref, () => refForOutline.current, []);
+  return /* @__PURE__ */ jsxs2(Sequence3, {
+    layout: "none",
+    from: from ?? 0,
+    trimBefore,
+    durationInFrames: durationInFrames ?? Infinity,
+    freeze,
+    hidden,
+    name: name ?? `<${feature.properties.name}>`,
+    showInTimeline: showInTimeline ?? true,
+    controls,
+    outlineRef: refForOutline,
+    children: [
+      /* @__PURE__ */ jsx3(MapRouteDrawing, {
+        feature,
+        glow,
+        id,
+        progress,
+        strokeColor,
+        strokeWidth
+      }),
+      /* @__PURE__ */ jsx3(MapRouteBounds, {
+        feature,
+        refForOutline
+      })
+    ]
+  });
+};
+var MapRouteInner = forwardRef3(MapRouteRefForwardingFunction);
+var MapRoute = Interactive3.withSchema({
+  Component: MapRouteInner,
+  componentName: "<MapRoute>",
+  componentIdentity: null,
+  schema: mapRouteSchema,
+  supportsEffects: false
+});
+// src/MapViewport.tsx
+import { Map as MapTilerMap, MapStyle } from "@maptiler/sdk";
+import"@maptiler/sdk/style.css";
+import {
+  forwardRef as forwardRef4,
+  useEffect as useEffect3,
+  useImperativeHandle as useImperativeHandle4,
+  useMemo as useMemo3,
+  useRef as useRef4,
+  useState as useState3
+} from "react";
+import {
+  Interactive as Interactive4,
+  Sequence as Sequence4,
+  useDelayRender as useDelayRender3
+} from "remotion";
+import { jsx as jsx4, jsxs as jsxs3, Fragment } from "react/jsx-runtime";
+var mapViewportSchema = {
+  ...Interactive4.baseSchema,
+  centerLongitude: {
+    type: "number",
+    min: -180,
+    max: 180,
+    step: 0.0001,
+    default: 0,
+    description: "Center longitude",
+    hiddenFromList: false,
+    keyframable: true
+  },
+  centerLatitude: {
+    type: "number",
+    min: -90,
+    max: 90,
+    step: 0.0001,
+    default: 0,
+    description: "Center latitude",
+    hiddenFromList: false,
+    keyframable: true
+  },
+  zoom: {
+    type: "number",
+    min: 0,
+    max: 22,
+    step: 0.01,
+    default: 4,
+    description: "Zoom",
+    hiddenFromList: false,
+    keyframable: true
+  },
+  bearing: {
+    type: "number",
+    min: -360,
+    max: 360,
+    step: 1,
+    default: 0,
+    description: "Bearing",
+    hiddenFromList: false,
+    keyframable: true
+  },
+  backgroundColor: {
+    type: "color",
+    default: "#dfe7e2",
+    description: "Background color"
+  }
+};
+var MissingApiKey = () => {
+  return /* @__PURE__ */ jsxs3("div", {
+    style: {
+      alignItems: "center",
+      color: "#171a1f",
+      display: "flex",
+      flexDirection: "column",
+      fontFamily: "Arial, sans-serif",
+      inset: 0,
+      justifyContent: "center",
+      padding: 100,
+      position: "absolute",
+      textAlign: "center"
+    },
+    children: [
+      /* @__PURE__ */ jsx4("div", {
+        style: { fontSize: 64, fontWeight: 700 },
+        children: "MapTiler key needed"
+      }),
+      /* @__PURE__ */ jsx4("div", {
+        style: { fontSize: 32, lineHeight: 1.4, marginTop: 24 },
+        children: "Pass an apiKey prop to <MapViewport>."
+      })
+    ]
+  });
+};
+var MapViewportRefForwardingFunction = ({
+  apiKey,
+  backgroundColor = "#dfe7e2",
+  bearing = 0,
+  centerLatitude = 0,
+  centerLongitude = 0,
+  children,
+  durationInFrames,
+  from,
+  trimBefore,
+  freeze,
+  hidden,
+  name,
+  showInTimeline,
+  zoom = 4,
+  controls
+}, ref) => {
+  const mapContainerRef = useRef4(null);
+  const mapRef = useRef4(null);
+  const viewportRef = useRef4(null);
+  const initialCameraRef = useRef4({
+    bearing,
+    centerLatitude,
+    centerLongitude,
+    zoom
+  });
+  const { continueRender, delayRender } = useDelayRender3();
+  const [map, setMap] = useState3(null);
+  const [cameraRevision, setCameraRevision] = useState3(0);
+  const [loadingHandle] = useState3(() => delayRender("Loading MapTiler map"));
+  const contextValue = useMemo3(() => ({ cameraRevision, map }), [cameraRevision, map]);
+  useImperativeHandle4(ref, () => viewportRef.current, []);
+  useEffect3(() => {
+    if (!apiKey) {
+      continueRender(loadingHandle);
+      return;
+    }
+    if (!mapContainerRef.current || mapRef.current) {
+      return;
+    }
+    const initialCamera = initialCameraRef.current;
+    const mapInstance = new MapTilerMap({
+      apiKey,
+      bearing: initialCamera.bearing,
+      canvasContextAttributes: { preserveDrawingBuffer: true },
+      center: [initialCamera.centerLongitude, initialCamera.centerLatitude],
+      container: mapContainerRef.current,
+      fadeDuration: 0,
+      fullscreenControl: false,
+      geolocateControl: false,
+      interactive: false,
+      navigationControl: false,
+      scaleControl: false,
+      style: MapStyle.BASIC,
+      terrainControl: false,
+      zoom: initialCamera.zoom
+    });
+    mapRef.current = mapInstance;
+    mapInstance.on("load", () => {
+      for (const layer of [...mapInstance.getStyle().layers ?? []]) {
+        if (layer.type === "symbol" || /other border/i.test(layer.id)) {
+          mapInstance.removeLayer(layer.id);
+        }
+      }
+      mapInstance.once("idle", () => {
+        setMap(mapInstance);
+        continueRender(loadingHandle);
+      });
+      mapInstance.triggerRepaint();
+    });
+    return () => {
+      mapInstance.remove();
+      mapRef.current = null;
+    };
+  }, [apiKey, continueRender, loadingHandle]);
+  useEffect3(() => {
+    if (!map) {
+      return;
+    }
+    const currentCenter = map.getCenter();
+    const cameraIsCurrent = Math.abs(currentCenter.lng - centerLongitude) < 0.0000001 && Math.abs(currentCenter.lat - centerLatitude) < 0.0000001 && Math.abs(map.getZoom() - zoom) < 0.0000001 && Math.abs(map.getBearing() - bearing) < 0.0000001;
+    if (cameraIsCurrent) {
+      return;
+    }
+    const cameraHandle = delayRender("Updating MapTiler camera");
+    let hasFinished = false;
+    const finish = () => {
+      if (hasFinished) {
+        return;
+      }
+      hasFinished = true;
+      continueRender(cameraHandle);
+    };
+    const onIdle = () => finish();
+    map.once("idle", onIdle);
+    map.jumpTo({
+      bearing,
+      center: [centerLongitude, centerLatitude],
+      zoom
+    });
+    setCameraRevision((revision) => revision + 1);
+    map.triggerRepaint();
+    return () => {
+      map.off("idle", onIdle);
+      finish();
+    };
+  }, [
+    bearing,
+    centerLatitude,
+    centerLongitude,
+    continueRender,
+    delayRender,
+    map,
+    zoom
+  ]);
+  return /* @__PURE__ */ jsx4(Sequence4, {
+    layout: "none",
+    from: from ?? 0,
+    trimBefore,
+    durationInFrames: durationInFrames ?? Infinity,
+    freeze,
+    hidden,
+    name: name ?? "<MapViewport>",
+    showInTimeline: showInTimeline ?? true,
+    controls,
+    children: /* @__PURE__ */ jsx4("div", {
+      ref: viewportRef,
+      style: {
+        backgroundColor,
+        inset: 0,
+        overflow: "hidden",
+        position: "absolute"
+      },
+      children: apiKey ? /* @__PURE__ */ jsxs3(Fragment, {
+        children: [
+          /* @__PURE__ */ jsx4("div", {
+            ref: mapContainerRef,
+            style: {
+              inset: 0,
+              position: "absolute"
+            }
+          }),
+          /* @__PURE__ */ jsx4(MapTilerContext.Provider, {
+            value: contextValue,
+            children
+          })
+        ]
+      }) : /* @__PURE__ */ jsx4(MissingApiKey, {})
+    })
+  });
+};
+var MapViewportInner = forwardRef4(MapViewportRefForwardingFunction);
+var MapViewport = Interactive4.withSchema({
+  Component: MapViewportInner,
+  componentName: "<MapViewport>",
+  componentIdentity: null,
+  schema: mapViewportSchema,
+  supportsEffects: false
+});
+export {
+  MapViewport,
+  MapRoute,
+  MapRegion,
+  MapOverlay
+};

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { MapOverlay } from './MapOverlay';
+export { MapRegion, type MapRegionFeature } from './MapRegion';
+export { MapRoute, type MapRouteFeature } from './MapRoute';
+export { MapViewport } from './MapViewport';

package/package.json

@@ -0,0 +1,56 @@
+{
+	"name": "@remotion/maptiler",
+	"version": "4.0.514",
+	"description": "MapTiler components for Remotion",
+	"main": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"module": "dist/esm/index.mjs",
+	"repository": {
+		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/maptiler"
+	},
+	"type": "module",
+	"scripts": {
+		"formatting": "oxfmt src --check",
+		"format": "oxfmt src",
+		"lint": "eslint src",
+		"watch": "tsgo -w",
+		"make": "tsgo && bun --env-file=../.env.bundle bundle.ts"
+	},
+	"author": "Jonny Burger <jonny@remotion.dev>",
+	"contributors": [],
+	"license": "Remotion License",
+	"bugs": {
+		"url": "https://github.com/remotion-dev/remotion/issues"
+	},
+	"dependencies": {
+		"@maptiler/sdk": "4.0.2",
+		"@turf/turf": "7.3.2",
+		"remotion": "4.0.514"
+	},
+	"peerDependencies": {
+		"react": ">=16.8.0",
+		"react-dom": ">=16.8.0"
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"module": "./dist/esm/index.mjs",
+			"import": "./dist/esm/index.mjs"
+		},
+		"./package.json": "./package.json"
+	},
+	"devDependencies": {
+		"react": "19.2.3",
+		"react-dom": "19.2.3",
+		"@remotion/eslint-config-internal": "4.0.514",
+		"eslint": "9.19.0",
+		"@typescript/native-preview": "7.0.0-dev.20260217.1"
+	},
+	"keywords": [
+		"remotion",
+		"maptiler"
+	],
+	"publishConfig": {
+		"access": "public"
+	}
+}