@remotion/maptiler 4.0.514 → 4.0.515

package/dist/esm/index.mjs

@@ -1,24 +1,304 @@
-// src/MapOverlay.tsx
+// src/MapHeatmap.tsx
 import {
-  forwardRef,
-  useContext,
-  useImperativeHandle,
-  useRef
-} from "react";
+  helpers
+} from "@maptiler/sdk";
+import { useContext as useContext2, useEffect, useRef } from "react";
 import {
-  Interactive,
-  Sequence
+  Sequence,
+  useDelayRender
 } from "remotion";
 
+// src/delay-map-render.ts
+var delayMapRender = ({
+  continueRender,
+  delayRender,
+  label,
+  map
+}) => {
+  const handle = delayRender(label);
+  let hasFinished = false;
+  const finish = () => {
+    if (hasFinished) {
+      return;
+    }
+    hasFinished = true;
+    continueRender(handle);
+  };
+  map.once("idle", finish);
+  map.triggerRepaint();
+  return () => {
+    map.off("idle", finish);
+    finish();
+  };
+};
+
 // src/MapTilerContext.ts
-import { createContext } from "react";
+import { createContext, useContext } from "react";
 var MapTilerContext = createContext({
   cameraRevision: 0,
-  map: null
+  map: null,
+  styleRevision: 0
 });
+var useMapTiler = () => {
+  return useContext(MapTilerContext);
+};
 
-// src/MapOverlay.tsx
+// src/MapHeatmap.tsx
 import { jsx } from "react/jsx-runtime";
+var MapHeatmapDrawing = ({
+  beforeId,
+  colorRamp,
+  data,
+  intensity,
+  layerId,
+  maxzoom,
+  minzoom,
+  opacity,
+  property,
+  radius,
+  sourceId = `${layerId}-source`,
+  weight,
+  zoomCompensation
+}) => {
+  const { map, styleRevision } = useContext2(MapTilerContext);
+  const { continueRender, delayRender } = useDelayRender();
+  const layerIdsRef = useRef(null);
+  const optionsRef = useRef(null);
+  const intensityIsDynamic = typeof intensity === "number";
+  const opacityIsDynamic = typeof opacity === "number";
+  const radiusIsDynamic = typeof radius === "number";
+  const structuralKey = JSON.stringify({
+    beforeId,
+    colorRamp,
+    data: typeof data === "string" ? data : null,
+    intensity: intensityIsDynamic ? null : intensity,
+    maxzoom,
+    minzoom,
+    opacity: opacityIsDynamic ? null : opacity,
+    property,
+    radius: radiusIsDynamic ? null : radius,
+    weight,
+    zoomCompensation
+  });
+  optionsRef.current = {
+    ...beforeId === undefined ? {} : { beforeId },
+    ...colorRamp === undefined ? {} : { colorRamp },
+    data,
+    ...intensity === undefined ? {} : { intensity },
+    layerId,
+    ...maxzoom === undefined ? {} : { maxzoom },
+    ...minzoom === undefined ? {} : { minzoom },
+    ...opacity === undefined ? {} : { opacity },
+    ...property === undefined ? {} : { property },
+    ...radius === undefined ? {} : { radius },
+    sourceId,
+    ...weight === undefined ? {} : { weight },
+    ...zoomCompensation === undefined ? {} : { zoomCompensation }
+  };
+  useEffect(() => {
+    if (!map || !optionsRef.current) {
+      return;
+    }
+    const loadingHandle = delayRender(`Loading MapTiler heatmap ${layerId}`);
+    let hasFinished = false;
+    const finish = () => {
+      if (hasFinished) {
+        return;
+      }
+      hasFinished = true;
+      continueRender(loadingHandle);
+    };
+    layerIdsRef.current = helpers.addHeatmap(map, optionsRef.current);
+    map.once("idle", finish);
+    map.triggerRepaint();
+    return () => {
+      map.off("idle", finish);
+      finish();
+      const ids = layerIdsRef.current;
+      if (!ids) {
+        return;
+      }
+      if (map.getLayer(ids.heatmapLayerId)) {
+        map.removeLayer(ids.heatmapLayerId);
+      }
+      if (map.getSource(ids.heatmapSourceId)) {
+        map.removeSource(ids.heatmapSourceId);
+      }
+      layerIdsRef.current = null;
+      map.triggerRepaint();
+    };
+  }, [continueRender, delayRender, layerId, map, structuralKey, styleRevision]);
+  useEffect(() => {
+    if (!map || typeof data === "string") {
+      return;
+    }
+    const ids = layerIdsRef.current;
+    if (ids && map.getSource(ids.heatmapSourceId)) {
+      map.getSource(ids.heatmapSourceId).setData(data);
+      return delayMapRender({
+        continueRender,
+        delayRender,
+        label: `Updating MapTiler heatmap source ${layerId}`,
+        map
+      });
+    }
+  }, [continueRender, data, delayRender, layerId, map]);
+  useEffect(() => {
+    if (!map) {
+      return;
+    }
+    const id = layerIdsRef.current?.heatmapLayerId;
+    if (!id || !map.getLayer(id)) {
+      return;
+    }
+    if (intensityIsDynamic) {
+      map.setPaintProperty(id, "heatmap-intensity", intensity);
+    }
+    if (opacityIsDynamic) {
+      map.setPaintProperty(id, "heatmap-opacity", opacity);
+    }
+    if (radiusIsDynamic) {
+      map.setPaintProperty(id, "heatmap-radius", radius);
+    }
+    return delayMapRender({
+      continueRender,
+      delayRender,
+      label: `Drawing MapTiler heatmap ${layerId}`,
+      map
+    });
+  }, [
+    continueRender,
+    delayRender,
+    intensity,
+    intensityIsDynamic,
+    layerId,
+    map,
+    opacity,
+    opacityIsDynamic,
+    radius,
+    radiusIsDynamic,
+    structuralKey,
+    styleRevision
+  ]);
+  return null;
+};
+var MapHeatmap = (props) => {
+  const {
+    controls,
+    durationInFrames,
+    freeze,
+    from,
+    hidden,
+    name,
+    showInTimeline,
+    trimBefore
+  } = props;
+  return /* @__PURE__ */ jsx(Sequence, {
+    layout: "none",
+    from: from ?? 0,
+    trimBefore,
+    durationInFrames: durationInFrames ?? Infinity,
+    freeze,
+    hidden,
+    name: name ?? "<MapHeatmap>",
+    showInTimeline: showInTimeline ?? true,
+    controls,
+    children: /* @__PURE__ */ jsx(MapHeatmapDrawing, {
+      ...props
+    })
+  });
+};
+// src/MapLayer.tsx
+import { useContext as useContext3, useEffect as useEffect2, useRef as useRef2 } from "react";
+import { useDelayRender as useDelayRender2 } from "remotion";
+var MapLayer = ({ beforeId, layer }) => {
+  const { map, styleRevision } = useContext3(MapTilerContext);
+  const previousLayerRef = useRef2(null);
+  const { continueRender, delayRender } = useDelayRender2();
+  useEffect2(() => {
+    if (!map) {
+      return;
+    }
+    const loadingHandle = delayRender(`Drawing MapTiler layer ${layer.id}`);
+    let hasFinished = false;
+    const finish = () => {
+      if (hasFinished) {
+        return;
+      }
+      hasFinished = true;
+      continueRender(loadingHandle);
+    };
+    const previousLayer = previousLayerRef.current;
+    const existingLayer = map.getLayer(layer.id);
+    const layerWithDefinedProperties = Object.fromEntries(Object.entries(layer).filter(([, value]) => value !== undefined));
+    const sourceChanged = previousLayer !== null && "source" in previousLayer && "source" in layer && (previousLayer.source !== layer.source || previousLayer["source-layer"] !== layer["source-layer"]);
+    if (existingLayer && (existingLayer.type !== layer.type || sourceChanged)) {
+      map.removeLayer(layer.id);
+    }
+    if (!map.getLayer(layer.id)) {
+      map.addLayer(layerWithDefinedProperties, beforeId);
+    } else {
+      if ("paint" in layer || previousLayer && "paint" in previousLayer) {
+        const previousPaint = previousLayer && "paint" in previousLayer ? previousLayer.paint : undefined;
+        const paint = "paint" in layer ? layer.paint : undefined;
+        for (const property of new Set([
+          ...Object.keys(previousPaint ?? {}),
+          ...Object.keys(paint ?? {})
+        ])) {
+          map.setPaintProperty(layer.id, property, paint?.[property] ?? null);
+        }
+      }
+      if ("layout" in layer || previousLayer && "layout" in previousLayer) {
+        const previousLayout = previousLayer && "layout" in previousLayer ? previousLayer.layout : undefined;
+        const layout = "layout" in layer ? layer.layout : undefined;
+        for (const property of new Set([
+          ...Object.keys(previousLayout ?? {}),
+          ...Object.keys(layout ?? {})
+        ])) {
+          map.setLayoutProperty(layer.id, property, layout?.[property] ?? null);
+        }
+      }
+      if ("filter" in layer) {
+        map.setFilter(layer.id, layer.filter ?? null);
+      }
+      map.setLayerZoomRange(layer.id, layer.minzoom ?? 0, layer.maxzoom ?? 24);
+      if (beforeId && map.getLayer(beforeId)) {
+        map.moveLayer(layer.id, beforeId);
+      }
+    }
+    previousLayerRef.current = layer;
+    map.once("idle", finish);
+    map.triggerRepaint();
+    return () => {
+      map.off("idle", finish);
+      finish();
+    };
+  }, [beforeId, continueRender, delayRender, layer, map, styleRevision]);
+  useEffect2(() => {
+    if (!map) {
+      return;
+    }
+    return () => {
+      if (map.getLayer(layer.id)) {
+        map.removeLayer(layer.id);
+        map.triggerRepaint();
+      }
+    };
+  }, [layer.id, map]);
+  return null;
+};
+// src/MapOverlay.tsx
+import {
+  forwardRef,
+  useContext as useContext4,
+  useImperativeHandle,
+  useRef as useRef3
+} from "react";
+import {
+  Interactive,
+  Sequence as Sequence2
+} from "remotion";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var mapOverlaySchema = {
   ...Interactive.baseSchema,
   longitude: {
@@ -39,76 +319,979 @@ var mapOverlaySchema = {
     description: "Latitude",
     hiddenFromList: false
   },
+  offsetX: {
+    type: "number",
+    min: -2000,
+    max: 2000,
+    step: 1,
+    default: 0,
+    description: "Horizontal marker offset",
+    hiddenFromList: false,
+    keyframable: true
+  },
+  offsetY: {
+    type: "number",
+    min: -2000,
+    max: 2000,
+    step: 1,
+    default: 0,
+    description: "Vertical marker offset",
+    hiddenFromList: false,
+    keyframable: true
+  },
+  opacity: {
+    type: "number",
+    min: 0,
+    max: 1,
+    step: 0.01,
+    default: 1,
+    description: "Marker opacity",
+    hiddenFromList: false,
+    keyframable: true
+  },
+  rotation: {
+    type: "number",
+    min: -360,
+    max: 360,
+    step: 1,
+    default: 0,
+    description: "Marker rotation",
+    hiddenFromList: false,
+    keyframable: true
+  },
   ...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, {
+var MapOverlayRefForwardingFunction = ({
+  anchor = "center",
+  children,
+  latitude,
+  longitude,
+  offsetX = 0,
+  offsetY = 0,
+  opacity = 1,
+  rotation = 0,
+  rotationAlignment = "viewport",
+  style,
+  durationInFrames,
+  from,
+  trimBefore,
+  freeze,
+  hidden,
+  name,
+  showInTimeline,
+  controls
+}, ref) => {
+  const { map } = useContext4(MapTilerContext);
+  const refForOutline = useRef3(null);
+  const point = map?.project([longitude, latitude]);
+  const horizontalAnchor = anchor.includes("left") ? 0 : anchor.includes("right") ? -100 : -50;
+  const verticalAnchor = anchor.includes("top") ? 0 : anchor.includes("bottom") ? -100 : -50;
+  useImperativeHandle(ref, () => refForOutline.current, []);
+  return /* @__PURE__ */ jsx2(Sequence2, {
+    layout: "none",
+    from: from ?? 0,
+    trimBefore,
+    durationInFrames: durationInFrames ?? Infinity,
+    freeze,
+    hidden,
+    name: name ?? "<MapOverlay>",
+    showInTimeline: showInTimeline ?? true,
+    controls,
+    outlineRef: refForOutline,
+    children: /* @__PURE__ */ jsx2("div", {
+      ref: refForOutline,
+      style: {
+        left: (point?.x ?? 0) + offsetX,
+        opacity,
+        pointerEvents: "none",
+        position: "absolute",
+        rotate: `${rotation + (rotationAlignment === "map" ? map?.getBearing() ?? 0 : 0)}deg`,
+        top: (point?.y ?? 0) + offsetY,
+        translate: `${horizontalAnchor}% ${verticalAnchor}%`,
+        zIndex: 1,
+        ...style
+      },
+      children
+    })
+  });
+};
+var MapOverlayInner = forwardRef(MapOverlayRefForwardingFunction);
+var MapOverlay = Interactive.withSchema({
+  Component: MapOverlayInner,
+  componentName: "<MapOverlay>",
+  componentIdentity: null,
+  schema: mapOverlaySchema,
+  supportsEffects: false
+});
+var MapMarker = MapOverlay;
+// src/MapPoint.tsx
+import {
+  helpers as helpers2
+} from "@maptiler/sdk";
+import { useContext as useContext5, useEffect as useEffect3, useRef as useRef4 } from "react";
+import {
+  Sequence as Sequence3,
+  useDelayRender as useDelayRender3
+} from "remotion";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var MapPointDrawing = ({
+  alignOnViewport,
+  beforeId,
+  cluster,
+  data,
+  labelColor,
+  labelSize,
+  layerId,
+  maxPointRadius,
+  maxzoom,
+  minPointRadius,
+  minzoom,
+  outline,
+  outlineColor,
+  outlineOpacity,
+  outlineWidth,
+  pointColor,
+  pointOpacity,
+  pointRadius,
+  property,
+  showLabel,
+  sourceId = `${layerId}-source`,
+  zoomCompensation
+}) => {
+  const { map, styleRevision } = useContext5(MapTilerContext);
+  const { continueRender, delayRender } = useDelayRender3();
+  const layerIdsRef = useRef4(null);
+  const optionsRef = useRef4(null);
+  const outlineColorIsDynamic = typeof outlineColor === "string";
+  const outlineOpacityIsDynamic = typeof outlineOpacity === "number";
+  const outlineWidthIsDynamic = typeof outlineWidth === "number";
+  const pointColorIsDynamic = typeof pointColor === "string";
+  const pointOpacityIsDynamic = typeof pointOpacity === "number";
+  const pointRadiusIsDynamic = typeof pointRadius === "number";
+  const structuralKey = JSON.stringify({
+    alignOnViewport,
+    beforeId,
+    cluster,
+    data: typeof data === "string" ? data : null,
+    maxPointRadius,
+    maxzoom,
+    minPointRadius,
+    minzoom,
+    outline,
+    outlineColor: outlineColorIsDynamic ? null : outlineColor,
+    outlineOpacity: outlineOpacityIsDynamic ? null : outlineOpacity,
+    outlineWidth: outlineWidthIsDynamic ? null : outlineWidth,
+    pointColor: pointColorIsDynamic ? null : pointColor,
+    pointOpacity: pointOpacityIsDynamic ? null : pointOpacity,
+    pointRadius: pointRadiusIsDynamic ? null : pointRadius,
+    property,
+    showLabel,
+    zoomCompensation
+  });
+  optionsRef.current = {
+    ...alignOnViewport === undefined ? {} : { alignOnViewport },
+    ...beforeId === undefined ? {} : { beforeId },
+    ...cluster === undefined ? {} : { cluster },
+    data,
+    ...labelColor === undefined ? {} : { labelColor },
+    ...labelSize === undefined ? {} : { labelSize },
+    layerId,
+    ...maxPointRadius === undefined ? {} : { maxPointRadius },
+    ...maxzoom === undefined ? {} : { maxzoom },
+    ...minPointRadius === undefined ? {} : { minPointRadius },
+    ...minzoom === undefined ? {} : { minzoom },
+    ...outline === undefined ? {} : { outline },
+    ...outlineColor === undefined ? {} : { outlineColor },
+    ...outlineOpacity === undefined ? {} : { outlineOpacity },
+    ...outlineWidth === undefined ? {} : { outlineWidth },
+    ...pointColor === undefined ? {} : { pointColor },
+    ...pointOpacity === undefined ? {} : { pointOpacity },
+    ...pointRadius === undefined ? {} : { pointRadius },
+    ...property === undefined ? {} : { property },
+    ...showLabel === undefined ? {} : { showLabel },
+    sourceId,
+    ...zoomCompensation === undefined ? {} : { zoomCompensation }
+  };
+  useEffect3(() => {
+    if (!map || !optionsRef.current) {
+      return;
+    }
+    const loadingHandle = delayRender(`Loading MapTiler point layer ${layerId}`);
+    let hasFinished = false;
+    const finish = () => {
+      if (hasFinished) {
+        return;
+      }
+      hasFinished = true;
+      continueRender(loadingHandle);
+    };
+    layerIdsRef.current = helpers2.addPoint(map, optionsRef.current);
+    map.once("idle", finish);
+    map.triggerRepaint();
+    return () => {
+      map.off("idle", finish);
+      finish();
+      const ids = layerIdsRef.current;
+      if (!ids) {
+        return;
+      }
+      for (const id of [
+        ids.labelLayerId,
+        ids.clusterLayerId,
+        ids.pointLayerId
+      ]) {
+        if (id && map.getLayer(id)) {
+          map.removeLayer(id);
+        }
+      }
+      if (map.getSource(ids.pointSourceId)) {
+        map.removeSource(ids.pointSourceId);
+      }
+      layerIdsRef.current = null;
+      map.triggerRepaint();
+    };
+  }, [continueRender, delayRender, layerId, map, structuralKey, styleRevision]);
+  useEffect3(() => {
+    if (!map || typeof data === "string") {
+      return;
+    }
+    const ids = layerIdsRef.current;
+    if (ids && map.getSource(ids.pointSourceId)) {
+      map.getSource(ids.pointSourceId).setData(data);
+      return delayMapRender({
+        continueRender,
+        delayRender,
+        label: `Updating MapTiler point source ${layerId}`,
+        map
+      });
+    }
+  }, [continueRender, data, delayRender, layerId, map]);
+  useEffect3(() => {
+    if (!map) {
+      return;
+    }
+    const ids = layerIdsRef.current;
+    if (!ids) {
+      return;
+    }
+    for (const id of [ids.pointLayerId, ids.clusterLayerId]) {
+      if (!id || !map.getLayer(id)) {
+        continue;
+      }
+      if (pointColorIsDynamic) {
+        map.setPaintProperty(id, "circle-color", pointColor);
+      }
+      if (pointOpacityIsDynamic) {
+        map.setPaintProperty(id, "circle-opacity", pointOpacity);
+      }
+      if (pointRadiusIsDynamic) {
+        map.setPaintProperty(id, "circle-radius", pointRadius);
+      }
+      if (outlineColorIsDynamic) {
+        map.setPaintProperty(id, "circle-stroke-color", outlineColor);
+      }
+      if (outlineOpacityIsDynamic) {
+        map.setPaintProperty(id, "circle-stroke-opacity", outlineOpacity);
+      }
+      if (outlineWidthIsDynamic) {
+        map.setPaintProperty(id, "circle-stroke-width", outlineWidth);
+      }
+    }
+    if (ids.labelLayerId && map.getLayer(ids.labelLayerId)) {
+      if (labelColor !== undefined) {
+        map.setPaintProperty(ids.labelLayerId, "text-color", labelColor);
+      }
+      if (labelSize !== undefined) {
+        map.setLayoutProperty(ids.labelLayerId, "text-size", labelSize);
+      }
+    }
+    return delayMapRender({
+      continueRender,
+      delayRender,
+      label: `Drawing MapTiler point layer ${layerId}`,
+      map
+    });
+  }, [
+    continueRender,
+    delayRender,
+    labelColor,
+    labelSize,
+    layerId,
+    map,
+    outlineColor,
+    outlineColorIsDynamic,
+    outlineOpacity,
+    outlineOpacityIsDynamic,
+    outlineWidth,
+    outlineWidthIsDynamic,
+    pointColor,
+    pointColorIsDynamic,
+    pointOpacity,
+    pointOpacityIsDynamic,
+    pointRadius,
+    pointRadiusIsDynamic,
+    structuralKey,
+    styleRevision
+  ]);
+  return null;
+};
+var MapPoint = (props) => {
+  const {
+    controls,
+    durationInFrames,
+    freeze,
+    from,
+    hidden,
+    name,
+    showInTimeline,
+    trimBefore
+  } = props;
+  return /* @__PURE__ */ jsx3(Sequence3, {
+    layout: "none",
+    from: from ?? 0,
+    trimBefore,
+    durationInFrames: durationInFrames ?? Infinity,
+    freeze,
+    hidden,
+    name: name ?? "<MapPoint>",
+    showInTimeline: showInTimeline ?? true,
+    controls,
+    children: /* @__PURE__ */ jsx3(MapPointDrawing, {
+      ...props
+    })
+  });
+};
+// src/MapPolygon.tsx
+import {
+  helpers as helpers4
+} from "@maptiler/sdk";
+import { useContext as useContext7, useEffect as useEffect5, useMemo, useRef as useRef6 } from "react";
+import {
+  Sequence as Sequence5,
+  useDelayRender as useDelayRender5
+} from "remotion";
+
+// src/MapPolyline.tsx
+import {
+  helpers as helpers3
+} from "@maptiler/sdk";
+import { length as getLineLength, lineSliceAlong, lineString } from "@turf/turf";
+import { useContext as useContext6, useEffect as useEffect4, useRef as useRef5, useState } from "react";
+import {
+  Sequence as Sequence4,
+  useDelayRender as useDelayRender4
+} from "remotion";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var normalizeData = (data) => {
+  if (typeof data === "string" || data.type === "FeatureCollection") {
+    return data;
+  }
+  return { features: [data], type: "FeatureCollection" };
+};
+var revealData = (data, progress) => {
+  if (typeof data === "string") {
+    return data;
+  }
+  const normalizedData = normalizeData(data);
+  if (typeof normalizedData === "string") {
+    return normalizedData;
+  }
+  const lineCoordinates = normalizedData.features.flatMap((feature) => {
+    if (feature.geometry.type === "LineString") {
+      return [feature.geometry.coordinates];
+    }
+    if (feature.geometry.type === "MultiLineString") {
+      return feature.geometry.coordinates;
+    }
+    return [];
+  });
+  const lines = lineCoordinates.map((coordinates) => lineString(coordinates));
+  const lineLengths = lines.map((line) => getLineLength(line));
+  let remainingLength = lineLengths.reduce((sum, lineLength) => sum + lineLength, 0) * Math.min(1, Math.max(0, progress));
+  let lineIndex = 0;
+  return {
+    ...normalizedData,
+    features: normalizedData.features.map((feature) => {
+      if (feature.geometry.type !== "LineString" && feature.geometry.type !== "MultiLineString") {
+        return feature;
+      }
+      const featureLines = feature.geometry.type === "LineString" ? [feature.geometry.coordinates] : feature.geometry.coordinates;
+      const revealedLines = featureLines.map(() => {
+        const line = lines[lineIndex];
+        const lineLength = lineLengths[lineIndex];
+        lineIndex++;
+        const revealedLength = Math.min(lineLength, remainingLength);
+        remainingLength = Math.max(0, remainingLength - lineLength);
+        return lineSliceAlong(line, 0, Math.max(0.001, revealedLength)).geometry.coordinates;
+      });
+      return {
+        ...feature,
+        geometry: feature.geometry.type === "LineString" ? { coordinates: revealedLines[0], type: "LineString" } : {
+          coordinates: revealedLines,
+          type: "MultiLineString"
+        }
+      };
+    })
+  };
+};
+var MapPolylineDrawing = ({
+  beforeId,
+  data,
+  layerId,
+  lineBlur,
+  lineCap,
+  lineColor,
+  lineDashArray,
+  lineGapWidth,
+  lineJoin,
+  lineOpacity,
+  lineWidth,
+  maxzoom,
+  minzoom,
+  outline,
+  outlineBlur,
+  outlineColor,
+  outlineOpacity,
+  outlineWidth,
+  progress = 1,
+  sourceId = `${layerId}-source`
+}) => {
+  const { map, styleRevision } = useContext6(MapTilerContext);
+  const { cancelRender, continueRender, delayRender } = useDelayRender4();
+  const layerIdsRef = useRef5(null);
+  const optionsRef = useRef5(null);
+  const [layerRevision, setLayerRevision] = useState(0);
+  const lineBlurIsDynamic = typeof lineBlur === "number";
+  const lineColorIsDynamic = typeof lineColor === "string";
+  const lineGapWidthIsDynamic = typeof lineGapWidth === "number";
+  const lineOpacityIsDynamic = typeof lineOpacity === "number";
+  const lineWidthIsDynamic = typeof lineWidth === "number";
+  const outlineBlurIsDynamic = typeof outlineBlur === "number";
+  const outlineColorIsDynamic = typeof outlineColor === "string";
+  const outlineOpacityIsDynamic = typeof outlineOpacity === "number";
+  const outlineWidthIsDynamic = typeof outlineWidth === "number";
+  const structuralKey = JSON.stringify({
+    beforeId,
+    data: typeof data === "string" ? data : null,
+    lineBlur: lineBlurIsDynamic ? null : lineBlur,
+    lineCap,
+    lineColor: lineColorIsDynamic ? null : lineColor,
+    lineDashArray,
+    lineGapWidth: lineGapWidthIsDynamic ? null : lineGapWidth,
+    lineJoin,
+    lineOpacity: lineOpacityIsDynamic ? null : lineOpacity,
+    lineWidth: lineWidthIsDynamic ? null : lineWidth,
+    maxzoom,
+    minzoom,
+    outline,
+    outlineBlur: outlineBlurIsDynamic ? null : outlineBlur,
+    outlineColor: outlineColorIsDynamic ? null : outlineColor,
+    outlineOpacity: outlineOpacityIsDynamic ? null : outlineOpacity,
+    outlineWidth: outlineWidthIsDynamic ? null : outlineWidth
+  });
+  optionsRef.current = {
+    ...beforeId === undefined ? {} : { beforeId },
+    data: revealData(data, progress),
+    layerId,
+    ...lineBlur === undefined ? {} : { lineBlur },
+    ...lineCap === undefined ? {} : { lineCap },
+    ...lineColor === undefined ? {} : { lineColor },
+    ...lineDashArray === undefined ? {} : { lineDashArray },
+    ...lineGapWidth === undefined ? {} : { lineGapWidth },
+    ...lineJoin === undefined ? {} : { lineJoin },
+    ...lineOpacity === undefined ? {} : { lineOpacity },
+    ...lineWidth === undefined ? {} : { lineWidth },
+    ...maxzoom === undefined ? {} : { maxzoom },
+    ...minzoom === undefined ? {} : { minzoom },
+    ...outline === undefined ? {} : { outline },
+    ...outlineBlur === undefined ? {} : { outlineBlur },
+    ...outlineColor === undefined ? {} : { outlineColor },
+    ...outlineOpacity === undefined ? {} : { outlineOpacity },
+    ...outlineWidth === undefined ? {} : { outlineWidth },
+    sourceId
+  };
+  useEffect4(() => {
+    if (!map || !optionsRef.current) {
+      return;
+    }
+    const loadingHandle = delayRender(`Loading MapTiler polyline ${layerId}`);
+    let hasFinished = false;
+    let hasCancelled = false;
+    const finish = () => {
+      if (hasFinished) {
+        return;
+      }
+      hasFinished = true;
+      continueRender(loadingHandle);
+    };
+    const removeLayers = (ids) => {
+      for (const id of [ids.polylineLayerId, ids.polylineOutlineLayerId]) {
+        if (id && map.getLayer(id)) {
+          map.removeLayer(id);
+        }
+      }
+      if (map.getSource(ids.polylineSourceId)) {
+        map.removeSource(ids.polylineSourceId);
+      }
+    };
+    helpers3.addPolyline(map, optionsRef.current).then((ids) => {
+      if (hasCancelled) {
+        removeLayers(ids);
+        finish();
+        return;
+      }
+      layerIdsRef.current = ids;
+      setLayerRevision((revision) => revision + 1);
+      map.once("idle", finish);
+      map.triggerRepaint();
+    }).catch((error) => {
+      finish();
+      if (!hasCancelled) {
+        cancelRender(error);
+      }
+    });
+    return () => {
+      hasCancelled = true;
+      map.off("idle", finish);
+      finish();
+      const ids = layerIdsRef.current;
+      if (ids) {
+        removeLayers(ids);
+        layerIdsRef.current = null;
+        map.triggerRepaint();
+      }
+    };
+  }, [
+    cancelRender,
+    continueRender,
+    delayRender,
+    layerId,
+    map,
+    structuralKey,
+    styleRevision
+  ]);
+  useEffect4(() => {
+    if (!map || typeof data === "string") {
+      return;
+    }
+    const ids = layerIdsRef.current;
+    if (ids && map.getSource(ids.polylineSourceId)) {
+      map.getSource(ids.polylineSourceId).setData(revealData(data, progress));
+      return delayMapRender({
+        continueRender,
+        delayRender,
+        label: `Drawing MapTiler polyline ${layerId}`,
+        map
+      });
+    }
+  }, [
+    continueRender,
+    data,
+    delayRender,
+    layerId,
+    layerRevision,
+    map,
+    progress
+  ]);
+  useEffect4(() => {
+    if (!map) {
+      return;
+    }
+    const ids = layerIdsRef.current;
+    if (!ids || !map.getLayer(ids.polylineLayerId)) {
+      return;
+    }
+    if (lineBlurIsDynamic) {
+      map.setPaintProperty(ids.polylineLayerId, "line-blur", lineBlur);
+    }
+    if (lineColorIsDynamic) {
+      map.setPaintProperty(ids.polylineLayerId, "line-color", lineColor);
+    }
+    if (lineGapWidthIsDynamic) {
+      map.setPaintProperty(ids.polylineLayerId, "line-gap-width", lineGapWidth);
+    }
+    if (lineOpacityIsDynamic) {
+      map.setPaintProperty(ids.polylineLayerId, "line-opacity", lineOpacity);
+    }
+    if (lineWidthIsDynamic) {
+      map.setPaintProperty(ids.polylineLayerId, "line-width", lineWidth);
+    }
+    if (ids.polylineOutlineLayerId && map.getLayer(ids.polylineOutlineLayerId)) {
+      if (outlineBlurIsDynamic) {
+        map.setPaintProperty(ids.polylineOutlineLayerId, "line-blur", outlineBlur);
+      }
+      if (outlineColorIsDynamic) {
+        map.setPaintProperty(ids.polylineOutlineLayerId, "line-color", outlineColor);
+      }
+      if (outlineOpacityIsDynamic) {
+        map.setPaintProperty(ids.polylineOutlineLayerId, "line-opacity", outlineOpacity);
+      }
+      if (outlineWidthIsDynamic || lineWidthIsDynamic) {
+        const actualLineWidth = lineWidth ?? 3;
+        const actualOutlineWidth = outlineWidth ?? 1;
+        const combinedOutlineWidth = typeof actualLineWidth === "number" ? typeof actualOutlineWidth === "number" ? actualLineWidth + actualOutlineWidth * 2 : [
+          "interpolate",
+          ["linear"],
+          ["zoom"],
+          ...actualOutlineWidth.flatMap(({ value, zoom }) => [
+            zoom,
+            actualLineWidth + value * 2
+          ])
+        ] : [
+          "interpolate",
+          ["linear"],
+          ["zoom"],
+          ...actualLineWidth.flatMap(({ value, zoom }) => [
+            zoom,
+            value + (typeof actualOutlineWidth === "number" ? actualOutlineWidth : 1) * 2
+          ])
+        ];
+        map.setPaintProperty(ids.polylineOutlineLayerId, "line-width", combinedOutlineWidth);
+      }
+    }
+    return delayMapRender({
+      continueRender,
+      delayRender,
+      label: `Styling MapTiler polyline ${layerId}`,
+      map
+    });
+  }, [
+    continueRender,
+    delayRender,
+    lineBlur,
+    lineBlurIsDynamic,
+    lineColor,
+    lineColorIsDynamic,
+    lineGapWidth,
+    lineGapWidthIsDynamic,
+    lineOpacity,
+    lineOpacityIsDynamic,
+    lineWidth,
+    lineWidthIsDynamic,
+    layerId,
+    layerRevision,
+    map,
+    outlineBlur,
+    outlineBlurIsDynamic,
+    outlineColor,
+    outlineColorIsDynamic,
+    outlineOpacity,
+    outlineOpacityIsDynamic,
+    outlineWidth,
+    outlineWidthIsDynamic
+  ]);
+  return null;
+};
+var MapPolyline = (props) => {
+  const {
+    controls,
+    durationInFrames,
+    freeze,
+    from,
+    hidden,
+    name,
+    showInTimeline,
+    trimBefore
+  } = props;
+  return /* @__PURE__ */ jsx4(Sequence4, {
+    layout: "none",
+    from: from ?? 0,
+    trimBefore,
+    durationInFrames: durationInFrames ?? Infinity,
+    freeze,
+    hidden,
+    name: name ?? "<MapPolyline>",
+    showInTimeline: showInTimeline ?? true,
+    controls,
+    children: /* @__PURE__ */ jsx4(MapPolylineDrawing, {
+      ...props
+    })
+  });
+};
+
+// src/MapPolygon.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var normalizeData2 = (data) => {
+  if (typeof data === "string" || data.type === "FeatureCollection") {
+    return data;
+  }
+  return { features: [data], type: "FeatureCollection" };
+};
+var getOutlineData = (data) => {
+  if (typeof data === "string") {
+    return null;
+  }
+  const normalizedData = normalizeData2(data);
+  if (typeof normalizedData === "string") {
+    return null;
+  }
+  const features = [];
+  for (const feature of normalizedData.features) {
+    if (feature.geometry.type === "Polygon") {
+      for (const coordinates of feature.geometry.coordinates) {
+        features.push({
+          geometry: { coordinates, type: "LineString" },
+          properties: feature.properties,
+          type: "Feature"
+        });
+      }
+    }
+    if (feature.geometry.type === "MultiPolygon") {
+      for (const polygon of feature.geometry.coordinates) {
+        for (const coordinates of polygon) {
+          features.push({
+            geometry: { coordinates, type: "LineString" },
+            properties: feature.properties,
+            type: "Feature"
+          });
+        }
+      }
+    }
+  }
+  return { features, type: "FeatureCollection" };
+};
+var MapPolygonDrawing = ({
+  beforeId,
+  data,
+  fillColor,
+  fillOpacity,
+  layerId,
+  maxzoom,
+  minzoom,
+  outline,
+  outlineBlur,
+  outlineCap,
+  outlineColor,
+  outlineDashArray,
+  outlineJoin,
+  outlineOpacity,
+  outlinePosition,
+  outlineWidth,
+  pattern,
+  progress,
+  sourceId = `${layerId}-source`
+}) => {
+  const { map, styleRevision } = useContext7(MapTilerContext);
+  const { continueRender, delayRender } = useDelayRender5();
+  const layerIdsRef = useRef6(null);
+  const optionsRef = useRef6(null);
+  const fillColorIsDynamic = typeof fillColor === "string";
+  const fillOpacityIsDynamic = typeof fillOpacity === "number";
+  const outlineBlurIsDynamic = typeof outlineBlur === "number";
+  const outlineColorIsDynamic = typeof outlineColor === "string";
+  const outlineOpacityIsDynamic = typeof outlineOpacity === "number";
+  const outlineWidthIsDynamic = typeof outlineWidth === "number";
+  const shouldAnimateOutline = progress !== undefined;
+  const outlineData = useMemo(() => shouldAnimateOutline ? getOutlineData(data) : null, [data, shouldAnimateOutline]);
+  const hasAnimatedOutline = outlineData !== null && outline !== false;
+  const structuralKey = JSON.stringify({
+    beforeId,
+    data: typeof data === "string" ? data : null,
+    fillColor: fillColorIsDynamic ? null : fillColor,
+    fillOpacity: fillOpacityIsDynamic ? null : fillOpacity,
+    maxzoom,
+    minzoom,
+    outline,
+    outlineBlur: outlineBlurIsDynamic ? null : outlineBlur,
+    outlineCap,
+    outlineColor: outlineColorIsDynamic ? null : outlineColor,
+    outlineDashArray,
+    outlineJoin,
+    outlineOpacity: outlineOpacityIsDynamic ? null : outlineOpacity,
+    outlinePosition,
+    outlineWidth: outlineWidthIsDynamic ? null : outlineWidth,
+    pattern,
+    hasAnimatedOutline
+  });
+  optionsRef.current = {
+    ...beforeId === undefined ? {} : { beforeId },
+    data: normalizeData2(data),
+    ...fillColor === undefined ? {} : { fillColor },
+    ...fillOpacity === undefined || typeof fillOpacity === "number" ? {} : { fillOpacity },
+    layerId,
+    ...maxzoom === undefined ? {} : { maxzoom },
+    ...minzoom === undefined ? {} : { minzoom },
+    ...hasAnimatedOutline ? { outline: false } : outline === undefined ? {} : { outline },
+    ...outlineBlur === undefined ? {} : { outlineBlur },
+    ...outlineCap === undefined ? {} : { outlineCap },
+    ...outlineColor === undefined ? {} : { outlineColor },
+    ...outlineDashArray === undefined ? {} : { outlineDashArray },
+    ...outlineJoin === undefined ? {} : { outlineJoin },
+    ...outlineOpacity === undefined ? {} : { outlineOpacity },
+    outlinePosition: outlinePosition ?? "center",
+    ...outlineWidth === undefined ? {} : { outlineWidth },
+    ...pattern === undefined ? {} : { pattern },
+    sourceId
+  };
+  useEffect5(() => {
+    if (!map || !optionsRef.current) {
+      return;
+    }
+    const loadingHandle = delayRender(`Loading MapTiler polygon ${layerId}`);
+    let hasFinished = false;
+    const finish = () => {
+      if (hasFinished) {
+        return;
+      }
+      hasFinished = true;
+      continueRender(loadingHandle);
+    };
+    layerIdsRef.current = helpers4.addPolygon(map, optionsRef.current);
+    map.once("idle", finish);
+    map.triggerRepaint();
+    return () => {
+      map.off("idle", finish);
+      finish();
+      const ids = layerIdsRef.current;
+      if (!ids) {
+        return;
+      }
+      for (const id of [ids.polygonOutlineLayerId, ids.polygonLayerId]) {
+        if (id && map.getLayer(id)) {
+          map.removeLayer(id);
+        }
+      }
+      if (map.getSource(ids.polygonSourceId)) {
+        map.removeSource(ids.polygonSourceId);
+      }
+      layerIdsRef.current = null;
+      map.triggerRepaint();
+    };
+  }, [continueRender, delayRender, layerId, map, structuralKey, styleRevision]);
+  useEffect5(() => {
+    if (!map || typeof data === "string") {
+      return;
+    }
+    const ids = layerIdsRef.current;
+    if (ids && map.getSource(ids.polygonSourceId)) {
+      map.getSource(ids.polygonSourceId).setData(normalizeData2(data));
+      return delayMapRender({
+        continueRender,
+        delayRender,
+        label: `Updating MapTiler polygon source ${layerId}`,
+        map
+      });
+    }
+  }, [continueRender, data, delayRender, layerId, map]);
+  useEffect5(() => {
+    if (!map) {
+      return;
+    }
+    const ids = layerIdsRef.current;
+    if (!ids || !map.getLayer(ids.polygonLayerId)) {
+      return;
+    }
+    if (fillColorIsDynamic) {
+      map.setPaintProperty(ids.polygonLayerId, "fill-color", fillColor);
+    }
+    if (fillOpacityIsDynamic) {
+      map.setPaintProperty(ids.polygonLayerId, "fill-opacity", fillOpacity);
+    }
+    if (ids.polygonOutlineLayerId && map.getLayer(ids.polygonOutlineLayerId)) {
+      if (outlineBlurIsDynamic) {
+        map.setPaintProperty(ids.polygonOutlineLayerId, "line-blur", outlineBlur);
+      }
+      if (outlineColorIsDynamic) {
+        map.setPaintProperty(ids.polygonOutlineLayerId, "line-color", outlineColor);
+      }
+      if (outlineOpacityIsDynamic) {
+        map.setPaintProperty(ids.polygonOutlineLayerId, "line-opacity", outlineOpacity);
+      }
+      if (outlineWidthIsDynamic) {
+        map.setPaintProperty(ids.polygonOutlineLayerId, "line-width", outlineWidth);
+      }
+    }
+    return delayMapRender({
+      continueRender,
+      delayRender,
+      label: `Drawing MapTiler polygon ${layerId}`,
+      map
+    });
+  }, [
+    continueRender,
+    delayRender,
+    fillColor,
+    fillColorIsDynamic,
+    fillOpacity,
+    fillOpacityIsDynamic,
+    layerId,
+    map,
+    outlineBlur,
+    outlineBlurIsDynamic,
+    outlineColor,
+    outlineColorIsDynamic,
+    outlineOpacity,
+    outlineOpacityIsDynamic,
+    outlineWidth,
+    outlineWidthIsDynamic,
+    structuralKey,
+    styleRevision
+  ]);
+  if (!hasAnimatedOutline) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx5(MapPolyline, {
+    beforeId,
+    data: outlineData,
+    layerId: `${layerId}-outline`,
+    lineBlur: outlineBlur,
+    lineCap: outlineCap,
+    lineColor: outlineColor ?? "#ffffff",
+    lineDashArray: outlineDashArray,
+    lineJoin: outlineJoin,
+    lineOpacity: outlineOpacity,
+    lineWidth: outlineWidth,
+    maxzoom,
+    minzoom,
+    name: "Map polygon outline",
+    progress,
+    showInTimeline: false,
+    sourceId: `${sourceId}-outline`
+  });
+};
+var MapPolygon = (props) => {
+  const {
+    controls,
+    durationInFrames,
+    freeze,
+    from,
+    hidden,
+    name,
+    showInTimeline,
+    trimBefore
+  } = props;
+  return /* @__PURE__ */ jsx5(Sequence5, {
     layout: "none",
     from: from ?? 0,
     trimBefore,
     durationInFrames: durationInFrames ?? Infinity,
     freeze,
     hidden,
-    name: name ?? "<MapOverlay>",
+    name: name ?? "<MapPolygon>",
     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
+    children: /* @__PURE__ */ jsx5(MapPolygonDrawing, {
+      ...props
     })
   });
 };
-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 { length as getLineLength2, lineSliceAlong as lineSliceAlong2, lineString as lineString2 } from "@turf/turf";
 import {
   forwardRef as forwardRef2,
-  useContext as useContext2,
-  useEffect,
+  useContext as useContext8,
+  useEffect as useEffect6,
   useImperativeHandle as useImperativeHandle2,
-  useMemo,
-  useRef as useRef2,
-  useState
+  useMemo as useMemo2,
+  useRef as useRef7,
+  useState as useState2
 } from "react";
 import {
   Interactive as Interactive2,
-  Sequence as Sequence2,
-  useDelayRender
+  Sequence as Sequence6,
+  useDelayRender as useDelayRender6
 } from "remotion";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs } from "react/jsx-runtime";
 var mapRegionSchema = {
   ...Interactive2.baseSchema,
   fill: {
@@ -170,16 +1353,16 @@ var MapRegionDrawing = ({
   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 { map } = useContext8(MapTilerContext);
+  const { continueRender, delayRender } = useDelayRender6();
+  const [isReady, setIsReady] = useState2(false);
+  const [loadingHandle] = useState2(() => delayRender(`Loading ${feature.properties.name} geometry`));
+  const outline = useMemo2(() => lineString2(feature.geometry.coordinates[0]), [feature]);
+  const outlineLength = useMemo2(() => getLineLength2(outline), [outline]);
   const fillSourceId = `${id}-fill`;
   const outlineSourceId = `${id}-outline`;
   const outlineGlowLayerId = `${id}-outline-glow`;
-  useEffect(() => {
+  useEffect6(() => {
     if (!map) {
       return;
     }
@@ -205,7 +1388,7 @@ var MapRegionDrawing = ({
     map.setPaintProperty(fillSourceId, "fill-color", fillColor);
     if (!map.getSource(outlineSourceId)) {
       map.addSource(outlineSourceId, {
-        data: lineSliceAlong(outline, 0, 0.001),
+        data: lineSliceAlong2(outline, 0, 0.001),
         type: "geojson"
       });
     }
@@ -261,12 +1444,12 @@ var MapRegionDrawing = ({
     strokeColor,
     strokeWidth
   ]);
-  useEffect(() => {
+  useEffect6(() => {
     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.getSource(outlineSourceId).setData(lineSliceAlong2(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();
@@ -283,7 +1466,7 @@ var MapRegionDrawing = ({
     outlineSourceId,
     progress
   ]);
-  useEffect(() => {
+  useEffect6(() => {
     if (!map) {
       return;
     }
@@ -312,9 +1495,9 @@ var MapRegionBounds = ({
   feature,
   refForOutline
 }) => {
-  const { map } = useContext2(MapTilerContext);
+  const { map } = useContext8(MapTilerContext);
   if (!map) {
-    return /* @__PURE__ */ jsx2("div", {
+    return /* @__PURE__ */ jsx6("div", {
       ref: refForOutline
     });
   }
@@ -323,7 +1506,7 @@ var MapRegionBounds = ({
   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", {
+  return /* @__PURE__ */ jsx6("div", {
     ref: refForOutline,
     style: {
       height: bottom - top,
@@ -355,9 +1538,9 @@ var MapRegionRefForwardingFunction = ({
   showInTimeline,
   controls
 }, ref) => {
-  const refForOutline = useRef2(null);
+  const refForOutline = useRef7(null);
   useImperativeHandle2(ref, () => refForOutline.current, []);
-  return /* @__PURE__ */ jsxs(Sequence2, {
+  return /* @__PURE__ */ jsxs(Sequence6, {
     layout: "none",
     from: from ?? 0,
     trimBefore,
@@ -369,7 +1552,7 @@ var MapRegionRefForwardingFunction = ({
     controls,
     outlineRef: refForOutline,
     children: [
-      /* @__PURE__ */ jsx2(MapRegionDrawing, {
+      /* @__PURE__ */ jsx6(MapRegionDrawing, {
         feature,
         fill,
         fillColor,
@@ -379,7 +1562,7 @@ var MapRegionRefForwardingFunction = ({
         strokeColor,
         strokeWidth
       }),
-      /* @__PURE__ */ jsx2(MapRegionBounds, {
+      /* @__PURE__ */ jsx6(MapRegionBounds, {
         feature,
         refForOutline
       })
@@ -395,22 +1578,22 @@ var MapRegion = Interactive2.withSchema({
   supportsEffects: false
 });
 // src/MapRoute.tsx
-import { length as getLineLength2, lineSliceAlong as lineSliceAlong2, lineString as lineString2 } from "@turf/turf";
+import { length as getLineLength3, lineSliceAlong as lineSliceAlong3, lineString as lineString3 } from "@turf/turf";
 import {
   forwardRef as forwardRef3,
-  useContext as useContext3,
-  useEffect as useEffect2,
+  useContext as useContext9,
+  useEffect as useEffect7,
   useImperativeHandle as useImperativeHandle3,
-  useMemo as useMemo2,
-  useRef as useRef3,
-  useState as useState2
+  useMemo as useMemo3,
+  useRef as useRef8,
+  useState as useState3
 } from "react";
 import {
   Interactive as Interactive3,
-  Sequence as Sequence3,
-  useDelayRender as useDelayRender2
+  Sequence as Sequence7,
+  useDelayRender as useDelayRender7
 } from "remotion";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
 var mapRouteSchema = {
   ...Interactive3.baseSchema,
   glow: {
@@ -455,21 +1638,21 @@ var MapRouteDrawing = ({
   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 { map } = useContext9(MapTilerContext);
+  const { continueRender, delayRender } = useDelayRender7();
+  const [isReady, setIsReady] = useState3(false);
+  const [loadingHandle] = useState3(() => delayRender(`Loading ${feature.properties.name} route`));
+  const route = useMemo3(() => lineString3(feature.geometry.coordinates), [feature]);
+  const routeLength = useMemo3(() => getLineLength3(route), [route]);
   const sourceId = `${id}-route`;
   const glowLayerId = `${id}-route-glow`;
-  useEffect2(() => {
+  useEffect7(() => {
     if (!map) {
       return;
     }
     if (!map.getSource(sourceId)) {
       map.addSource(sourceId, {
-        data: lineSliceAlong2(route, 0, 0.001),
+        data: lineSliceAlong3(route, 0, 0.001),
         type: "geojson"
       });
     }
@@ -522,12 +1705,12 @@ var MapRouteDrawing = ({
     strokeColor,
     strokeWidth
   ]);
-  useEffect2(() => {
+  useEffect7(() => {
     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.getSource(sourceId).setData(lineSliceAlong3(route, 0, Math.max(0.001, routeLength * Math.min(1, Math.max(0, progress)))));
     map.once("idle", () => continueRender(frameHandle));
     map.triggerRepaint();
   }, [
@@ -541,7 +1724,7 @@ var MapRouteDrawing = ({
     routeLength,
     sourceId
   ]);
-  useEffect2(() => {
+  useEffect7(() => {
     if (!map) {
       return;
     }
@@ -564,9 +1747,9 @@ var MapRouteBounds = ({
   feature,
   refForOutline
 }) => {
-  const { map } = useContext3(MapTilerContext);
+  const { map } = useContext9(MapTilerContext);
   if (!map) {
-    return /* @__PURE__ */ jsx3("div", {
+    return /* @__PURE__ */ jsx7("div", {
       ref: refForOutline
     });
   }
@@ -575,7 +1758,7 @@ var MapRouteBounds = ({
   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", {
+  return /* @__PURE__ */ jsx7("div", {
     ref: refForOutline,
     style: {
       height: bottom - top,
@@ -605,9 +1788,9 @@ var MapRouteRefForwardingFunction = ({
   showInTimeline,
   controls
 }, ref) => {
-  const refForOutline = useRef3(null);
+  const refForOutline = useRef8(null);
   useImperativeHandle3(ref, () => refForOutline.current, []);
-  return /* @__PURE__ */ jsxs2(Sequence3, {
+  return /* @__PURE__ */ jsxs2(Sequence7, {
     layout: "none",
     from: from ?? 0,
     trimBefore,
@@ -619,7 +1802,7 @@ var MapRouteRefForwardingFunction = ({
     controls,
     outlineRef: refForOutline,
     children: [
-      /* @__PURE__ */ jsx3(MapRouteDrawing, {
+      /* @__PURE__ */ jsx7(MapRouteDrawing, {
         feature,
         glow,
         id,
@@ -627,7 +1810,7 @@ var MapRouteRefForwardingFunction = ({
         strokeColor,
         strokeWidth
       }),
-      /* @__PURE__ */ jsx3(MapRouteBounds, {
+      /* @__PURE__ */ jsx7(MapRouteBounds, {
         feature,
         refForOutline
       })
@@ -642,23 +1825,94 @@ var MapRoute = Interactive3.withSchema({
   schema: mapRouteSchema,
   supportsEffects: false
 });
+// src/MapSource.tsx
+import { useContext as useContext10, useEffect as useEffect8, useRef as useRef9 } from "react";
+import { useDelayRender as useDelayRender8 } from "remotion";
+var MapSource = ({ children, id, source }) => {
+  const { map, styleRevision } = useContext10(MapTilerContext);
+  const sourceRef = useRef9(source);
+  const { continueRender, delayRender } = useDelayRender8();
+  sourceRef.current = source;
+  useEffect8(() => {
+    if (!map) {
+      return;
+    }
+    const loadingHandle = delayRender(`Loading MapTiler source ${id}`);
+    let hasFinished = false;
+    const finish = () => {
+      if (hasFinished) {
+        return;
+      }
+      hasFinished = true;
+      continueRender(loadingHandle);
+    };
+    if (!map.getSource(id)) {
+      map.addSource(id, sourceRef.current);
+    }
+    map.once("idle", finish);
+    map.triggerRepaint();
+    return () => {
+      map.off("idle", finish);
+      finish();
+      for (const layer of map.getStyle().layers ?? []) {
+        if ("source" in layer && layer.source === id && map.getLayer(layer.id)) {
+          map.removeLayer(layer.id);
+        }
+      }
+      if (map.getSource(id)) {
+        map.removeSource(id);
+      }
+      map.triggerRepaint();
+    };
+  }, [continueRender, delayRender, id, map, styleRevision]);
+  useEffect8(() => {
+    if (!map || source.type !== "geojson") {
+      return;
+    }
+    const existingSource = map.getSource(id);
+    if (!existingSource) {
+      return;
+    }
+    existingSource.setData(source.data);
+    return delayMapRender({
+      continueRender,
+      delayRender,
+      label: `Updating MapTiler source ${id}`,
+      map
+    });
+  }, [continueRender, delayRender, id, map, source]);
+  return children;
+};
 // src/MapViewport.tsx
 import { Map as MapTilerMap, MapStyle } from "@maptiler/sdk";
 import"@maptiler/sdk/style.css";
 import {
   forwardRef as forwardRef4,
-  useEffect as useEffect3,
+  useEffect as useEffect9,
   useImperativeHandle as useImperativeHandle4,
-  useMemo as useMemo3,
-  useRef as useRef4,
-  useState as useState3
+  useMemo as useMemo4,
+  useRef as useRef10,
+  useState as useState4
 } from "react";
 import {
   Interactive as Interactive4,
-  Sequence as Sequence4,
-  useDelayRender as useDelayRender3
+  Sequence as Sequence8,
+  useDelayRender as useDelayRender9
 } from "remotion";
-import { jsx as jsx4, jsxs as jsxs3, Fragment } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs3, Fragment } from "react/jsx-runtime";
+var stripStyleLayers = ({
+  administrativeBorders,
+  map,
+  showLabels
+}) => {
+  for (const layer of [...map.getStyle().layers ?? []]) {
+    const shouldRemoveLabel = !showLabels && layer.type === "symbol";
+    const shouldRemoveAdministrativeBorder = administrativeBorders === "none" ? /border/i.test(layer.id) : administrativeBorders === "country-only" && /other border/i.test(layer.id);
+    if (shouldRemoveLabel || shouldRemoveAdministrativeBorder) {
+      map.removeLayer(layer.id);
+    }
+  }
+};
 var mapViewportSchema = {
   ...Interactive4.baseSchema,
   centerLongitude: {
@@ -701,6 +1955,56 @@ var mapViewportSchema = {
     hiddenFromList: false,
     keyframable: true
   },
+  pitch: {
+    type: "number",
+    min: 0,
+    max: 85,
+    step: 1,
+    default: 0,
+    description: "Pitch",
+    hiddenFromList: false,
+    keyframable: true
+  },
+  paddingTop: {
+    type: "number",
+    min: 0,
+    max: 2000,
+    step: 1,
+    default: 0,
+    description: "Top camera padding",
+    hiddenFromList: false,
+    keyframable: true
+  },
+  paddingRight: {
+    type: "number",
+    min: 0,
+    max: 2000,
+    step: 1,
+    default: 0,
+    description: "Right camera padding",
+    hiddenFromList: false,
+    keyframable: true
+  },
+  paddingBottom: {
+    type: "number",
+    min: 0,
+    max: 2000,
+    step: 1,
+    default: 0,
+    description: "Bottom camera padding",
+    hiddenFromList: false,
+    keyframable: true
+  },
+  paddingLeft: {
+    type: "number",
+    min: 0,
+    max: 2000,
+    step: 1,
+    default: 0,
+    description: "Left camera padding",
+    hiddenFromList: false,
+    keyframable: true
+  },
   backgroundColor: {
     type: "color",
     default: "#dfe7e2",
@@ -722,11 +2026,11 @@ var MissingApiKey = () => {
       textAlign: "center"
     },
     children: [
-      /* @__PURE__ */ jsx4("div", {
+      /* @__PURE__ */ jsx8("div", {
         style: { fontSize: 64, fontWeight: 700 },
         children: "MapTiler key needed"
       }),
-      /* @__PURE__ */ jsx4("div", {
+      /* @__PURE__ */ jsx8("div", {
         style: { fontSize: 32, lineHeight: 1.4, marginTop: 24 },
         children: "Pass an apiKey prop to <MapViewport>."
       })
@@ -740,6 +2044,20 @@ var MapViewportRefForwardingFunction = ({
   centerLatitude = 0,
   centerLongitude = 0,
   children,
+  language,
+  mapOptions,
+  mapStyle = MapStyle.BASIC,
+  onMapReady,
+  paddingBottom = 0,
+  paddingLeft = 0,
+  paddingRight = 0,
+  paddingTop = 0,
+  pitch = 0,
+  projection,
+  showLabels = true,
+  administrativeBorders = "all",
+  terrain = false,
+  terrainExaggeration = 1,
   durationInFrames,
   from,
   trimBefore,
@@ -750,22 +2068,45 @@ var MapViewportRefForwardingFunction = ({
   zoom = 4,
   controls
 }, ref) => {
-  const mapContainerRef = useRef4(null);
-  const mapRef = useRef4(null);
-  const viewportRef = useRef4(null);
-  const initialCameraRef = useRef4({
+  const mapContainerRef = useRef10(null);
+  const mapRef = useRef10(null);
+  const viewportRef = useRef10(null);
+  const initialCameraRef = useRef10({
     bearing,
     centerLatitude,
     centerLongitude,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    pitch,
     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]);
+  const initialMapOptionsRef = useRef10({
+    administrativeBorders,
+    language,
+    mapOptions,
+    mapStyle,
+    projection,
+    showLabels,
+    terrain,
+    terrainExaggeration
+  });
+  const lastMapStyleRef = useRef10(mapStyle);
+  const lastLayerVisibilityRef = useRef10({
+    administrativeBorders,
+    showLabels
+  });
+  const onMapReadyRef = useRef10(onMapReady);
+  onMapReadyRef.current = onMapReady;
+  const { continueRender, delayRender } = useDelayRender9();
+  const [map, setMap] = useState4(null);
+  const [cameraRevision, setCameraRevision] = useState4(0);
+  const [styleRevision, setStyleRevision] = useState4(0);
+  const [loadingHandle] = useState4(() => delayRender("Loading MapTiler map"));
+  const contextValue = useMemo4(() => ({ cameraRevision, map, styleRevision }), [cameraRevision, map, styleRevision]);
   useImperativeHandle4(ref, () => viewportRef.current, []);
-  useEffect3(() => {
+  useEffect9(() => {
     if (!apiKey) {
       continueRender(loadingHandle);
       return;
@@ -774,31 +2115,48 @@ var MapViewportRefForwardingFunction = ({
       return;
     }
     const initialCamera = initialCameraRef.current;
+    const initialOptions = initialMapOptionsRef.current;
     const mapInstance = new MapTilerMap({
+      fullscreenControl: false,
+      geolocateControl: false,
+      navigationControl: false,
+      scaleControl: false,
+      terrainControl: false,
+      ...initialOptions.mapOptions,
       apiKey,
       bearing: initialCamera.bearing,
-      canvasContextAttributes: { preserveDrawingBuffer: true },
+      canvasContextAttributes: {
+        ...initialOptions.mapOptions?.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,
+      language: initialOptions.language,
+      pitch: initialCamera.pitch,
+      projection: initialOptions.projection,
+      style: initialOptions.mapStyle,
+      terrain: initialOptions.terrain,
+      terrainExaggeration: initialOptions.terrainExaggeration,
       zoom: initialCamera.zoom
     });
+    mapInstance.setPadding({
+      bottom: initialCamera.paddingBottom,
+      left: initialCamera.paddingLeft,
+      right: initialCamera.paddingRight,
+      top: initialCamera.paddingTop
+    });
     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);
-        }
-      }
+      stripStyleLayers({
+        administrativeBorders: initialOptions.administrativeBorders,
+        map: mapInstance,
+        showLabels: initialOptions.showLabels
+      });
       mapInstance.once("idle", () => {
         setMap(mapInstance);
+        onMapReadyRef.current?.(mapInstance);
         continueRender(loadingHandle);
       });
       mapInstance.triggerRepaint();
@@ -808,12 +2166,13 @@ var MapViewportRefForwardingFunction = ({
       mapRef.current = null;
     };
   }, [apiKey, continueRender, loadingHandle]);
-  useEffect3(() => {
+  useEffect9(() => {
     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;
+    const currentPadding = map.getPadding();
+    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 && Math.abs(map.getPitch() - pitch) < 0.0000001 && Math.abs((currentPadding.top ?? 0) - paddingTop) < 0.0000001 && Math.abs((currentPadding.right ?? 0) - paddingRight) < 0.0000001 && Math.abs((currentPadding.bottom ?? 0) - paddingBottom) < 0.0000001 && Math.abs((currentPadding.left ?? 0) - paddingLeft) < 0.0000001;
     if (cameraIsCurrent) {
       return;
     }
@@ -831,6 +2190,13 @@ var MapViewportRefForwardingFunction = ({
     map.jumpTo({
       bearing,
       center: [centerLongitude, centerLatitude],
+      padding: {
+        bottom: paddingBottom,
+        left: paddingLeft,
+        right: paddingRight,
+        top: paddingTop
+      },
+      pitch,
       zoom
     });
     setCameraRevision((revision) => revision + 1);
@@ -846,9 +2212,77 @@ var MapViewportRefForwardingFunction = ({
     continueRender,
     delayRender,
     map,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    pitch,
     zoom
   ]);
-  return /* @__PURE__ */ jsx4(Sequence4, {
+  useEffect9(() => {
+    if (!map || lastMapStyleRef.current === mapStyle && lastLayerVisibilityRef.current.showLabels === showLabels && lastLayerVisibilityRef.current.administrativeBorders === administrativeBorders) {
+      return;
+    }
+    const styleHandle = delayRender("Updating MapTiler style");
+    let hasFinished = false;
+    const finish = () => {
+      if (hasFinished) {
+        return;
+      }
+      hasFinished = true;
+      lastMapStyleRef.current = mapStyle;
+      lastLayerVisibilityRef.current = {
+        administrativeBorders,
+        showLabels
+      };
+      setStyleRevision((revision) => revision + 1);
+      continueRender(styleHandle);
+    };
+    const onStyleLoad = () => {
+      stripStyleLayers({ administrativeBorders, map, showLabels });
+      map.once("idle", finish);
+      map.triggerRepaint();
+    };
+    map.once("style.load", onStyleLoad);
+    map.setStyle(mapStyle ?? null);
+    map.triggerRepaint();
+    return () => {
+      map.off("style.load", onStyleLoad);
+      map.off("idle", finish);
+      finish();
+    };
+  }, [
+    administrativeBorders,
+    continueRender,
+    delayRender,
+    map,
+    mapStyle,
+    showLabels
+  ]);
+  useEffect9(() => {
+    if (map && language) {
+      map.setLanguage(language);
+      map.triggerRepaint();
+    }
+  }, [language, map]);
+  useEffect9(() => {
+    if (!map) {
+      return;
+    }
+    if (terrain) {
+      map.enableTerrain(terrainExaggeration);
+    } else {
+      map.disableTerrain();
+    }
+    map.triggerRepaint();
+  }, [map, terrain, terrainExaggeration]);
+  useEffect9(() => {
+    if (map && projection) {
+      map.setProjection(projection, { persist: true });
+      map.triggerRepaint();
+    }
+  }, [map, projection]);
+  return /* @__PURE__ */ jsx8(Sequence8, {
     layout: "none",
     from: from ?? 0,
     trimBefore,
@@ -858,7 +2292,7 @@ var MapViewportRefForwardingFunction = ({
     name: name ?? "<MapViewport>",
     showInTimeline: showInTimeline ?? true,
     controls,
-    children: /* @__PURE__ */ jsx4("div", {
+    children: /* @__PURE__ */ jsx8("div", {
       ref: viewportRef,
       style: {
         backgroundColor,
@@ -868,19 +2302,19 @@ var MapViewportRefForwardingFunction = ({
       },
       children: apiKey ? /* @__PURE__ */ jsxs3(Fragment, {
         children: [
-          /* @__PURE__ */ jsx4("div", {
+          /* @__PURE__ */ jsx8("div", {
             ref: mapContainerRef,
             style: {
               inset: 0,
               position: "absolute"
             }
           }),
-          /* @__PURE__ */ jsx4(MapTilerContext.Provider, {
+          /* @__PURE__ */ jsx8(MapTilerContext.Provider, {
             value: contextValue,
             children
           })
         ]
-      }) : /* @__PURE__ */ jsx4(MissingApiKey, {})
+      }) : /* @__PURE__ */ jsx8(MissingApiKey, {})
     })
   });
 };
@@ -893,8 +2327,16 @@ var MapViewport = Interactive4.withSchema({
   supportsEffects: false
 });
 export {
+  useMapTiler,
   MapViewport,
+  MapSource,
   MapRoute,
   MapRegion,
-  MapOverlay
+  MapPolyline,
+  MapPolygon,
+  MapPoint,
+  MapOverlay,
+  MapMarker,
+  MapLayer,
+  MapHeatmap
 };