@remotion/maptiler 4.0.533 → 4.0.535

package/dist/esm/index.mjs

@@ -1590,7 +1590,13 @@ var MapPolygon = (props) => {
 };
 // src/MapRegion.tsx
 import { length as getLineLength2, lineSliceAlong as lineSliceAlong2, lineString as lineString2 } from "@turf/turf";
-import { useContext as useContext9, useEffect as useEffect7, useMemo as useMemo3, useState as useState2 } from "react";
+import {
+  useContext as useContext9,
+  useEffect as useEffect7,
+  useLayoutEffect,
+  useMemo as useMemo3,
+  useState as useState2
+} from "react";
 import {
   Interactive as Interactive2,
   Freeze as Freeze7,
@@ -1667,7 +1673,13 @@ var MapRegionDrawing = ({
   const { map } = useContext9(MapTilerContext);
   const { continueRender, delayRender } = useDelayRender6();
   const [isReady, setIsReady] = useState2(false);
-  const [loadingHandle] = useState2(() => delayRender(`Loading ${feature.properties.name} geometry`));
+  useLayoutEffect(() => {
+    if (isReady) {
+      return;
+    }
+    const handle = delayRender(`Loading ${feature.properties.name} geometry`);
+    return () => continueRender(handle);
+  }, [continueRender, delayRender, feature.properties.name, isReady]);
   const outline = useMemo3(() => lineString2(feature.geometry.coordinates[0]), [feature]);
   const outlineLength = useMemo3(() => getLineLength2(outline), [outline]);
   const fillSourceId = `${id}-fill`;
@@ -1678,7 +1690,7 @@ var MapRegionDrawing = ({
     outlineSourceId,
     outlineGlowLayerId
   ]);
-  useEffect7(() => {
+  useLayoutEffect(() => {
     if (!map) {
       return;
     }
@@ -1742,11 +1754,12 @@ var MapRegionDrawing = ({
     map.setPaintProperty(outlineSourceId, "line-color", strokeColor);
     map.setPaintProperty(outlineSourceId, "line-width", strokeWidth);
     applyPremountVisibility();
-    map.once("idle", () => {
-      setIsReady(true);
-      continueRender(loadingHandle);
-    });
+    const onIdle = () => setIsReady(true);
+    map.once("idle", onIdle);
     map.triggerRepaint();
+    return () => {
+      map.off("idle", onIdle);
+    };
   }, [
     applyPremountVisibility,
     continueRender,
@@ -1754,7 +1767,6 @@ var MapRegionDrawing = ({
     fillColor,
     fillSourceId,
     glow,
-    loadingHandle,
     map,
     outline,
     outlineGlowLayerId,
@@ -1762,15 +1774,20 @@ var MapRegionDrawing = ({
     strokeColor,
     strokeWidth
   ]);
-  useEffect7(() => {
+  useLayoutEffect(() => {
     if (!isReady || !map) {
       return;
     }
     const frameHandle = delayRender(`Drawing ${feature.properties.name}`);
     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));
+    const onIdle = () => continueRender(frameHandle);
+    map.once("idle", onIdle);
     map.triggerRepaint();
+    return () => {
+      map.off("idle", onIdle);
+      continueRender(frameHandle);
+    };
   }, [
     continueRender,
     delayRender,
@@ -1924,7 +1941,13 @@ var MapRegion = Interactive2.withSchema({
 });
 // src/MapRoute.tsx
 import { length as getLineLength3, lineSliceAlong as lineSliceAlong3, lineString as lineString3 } from "@turf/turf";
-import { useContext as useContext10, useEffect as useEffect8, useMemo as useMemo4, useState as useState3 } from "react";
+import {
+  useContext as useContext10,
+  useEffect as useEffect8,
+  useLayoutEffect as useLayoutEffect2,
+  useMemo as useMemo4,
+  useState as useState3
+} from "react";
 import {
   Interactive as Interactive3,
   Freeze as Freeze8,
@@ -1984,7 +2007,13 @@ var MapRouteDrawing = ({
   const { map } = useContext10(MapTilerContext);
   const { continueRender, delayRender } = useDelayRender7();
   const [isReady, setIsReady] = useState3(false);
-  const [loadingHandle] = useState3(() => delayRender(`Loading ${feature.properties.name} route`));
+  useLayoutEffect2(() => {
+    if (isReady) {
+      return;
+    }
+    const handle = delayRender(`Loading ${feature.properties.name} route`);
+    return () => continueRender(handle);
+  }, [continueRender, delayRender, feature.properties.name, isReady]);
   const route = useMemo4(() => lineString3(feature.geometry.coordinates), [feature]);
   const routeLength = useMemo4(() => getLineLength3(route), [route]);
   const sourceId = `${id}-route`;
@@ -1993,7 +2022,7 @@ var MapRouteDrawing = ({
     sourceId,
     glowLayerId
   ]);
-  useEffect8(() => {
+  useLayoutEffect2(() => {
     if (!map) {
       return;
     }
@@ -2037,31 +2066,36 @@ var MapRouteDrawing = ({
     map.setPaintProperty(sourceId, "line-color", strokeColor);
     map.setPaintProperty(sourceId, "line-width", strokeWidth);
     applyPremountVisibility();
-    map.once("idle", () => {
-      setIsReady(true);
-      continueRender(loadingHandle);
-    });
+    const onIdle = () => setIsReady(true);
+    map.once("idle", onIdle);
     map.triggerRepaint();
+    return () => {
+      map.off("idle", onIdle);
+    };
   }, [
     applyPremountVisibility,
     continueRender,
     glow,
     glowLayerId,
-    loadingHandle,
     map,
     route,
     sourceId,
     strokeColor,
     strokeWidth
   ]);
-  useEffect8(() => {
+  useLayoutEffect2(() => {
     if (!isReady || !map) {
       return;
     }
     const frameHandle = delayRender(`Drawing ${feature.properties.name} route`);
     map.getSource(sourceId).setData(lineSliceAlong3(route, 0, Math.max(0.001, routeLength * Math.min(1, Math.max(0, progress)))));
-    map.once("idle", () => continueRender(frameHandle));
+    const onIdle = () => continueRender(frameHandle);
+    map.once("idle", onIdle);
     map.triggerRepaint();
+    return () => {
+      map.off("idle", onIdle);
+      continueRender(frameHandle);
+    };
   }, [
     continueRender,
     delayRender,
@@ -2325,7 +2359,7 @@ var MapSource = ({
 // src/MapViewport.tsx
 import { MapStyle, Map as MapTilerMap } from "@maptiler/sdk";
 import"@maptiler/sdk/style.css";
-import { useEffect as useEffect10, useMemo as useMemo5, useRef as useRef8, useState as useState4 } from "react";
+import { useLayoutEffect as useLayoutEffect3, useMemo as useMemo5, useRef as useRef8, useState as useState4 } from "react";
 import {
   Interactive as Interactive4,
   useDelayRender as useDelayRender9
@@ -2524,19 +2558,20 @@ var MapViewportContent = ({
   const onMapReadyRef = useRef8(onMapReady);
   onMapReadyRef.current = onMapReady;
   const { continueRender, delayRender } = useDelayRender9();
-  const [map, setMap] = useState4(null);
+  const [loadedMap, setLoadedMap] = useState4(null);
+  const map = loadedMap?.map ?? null;
   const [cameraRevision, setCameraRevision] = useState4(0);
   const [styleRevision, setStyleRevision] = useState4(0);
-  const [loadingHandle] = useState4(() => delayRender("Loading MapTiler map"));
   const contextValue = useMemo5(() => ({ cameraRevision, map, styleRevision }), [cameraRevision, map, styleRevision]);
-  useEffect10(() => {
+  useLayoutEffect3(() => {
     if (!apiKey) {
-      continueRender(loadingHandle);
       return;
     }
     if (!mapContainerRef.current || mapRef.current) {
       return;
     }
+    const loadingHandle = delayRender("Loading MapTiler map");
+    let cancelled = false;
     const initialCamera = initialCameraRef.current;
     const initialOptions = initialMapOptionsRef.current;
     const mapInstance = new MapTilerMap({
@@ -2578,18 +2613,27 @@ var MapViewportContent = ({
         showLabels: initialOptions.showLabels
       });
       mapInstance.once("idle", () => {
-        setMap(mapInstance);
+        if (cancelled) {
+          return;
+        }
+        setLoadedMap({ map: mapInstance, handle: loadingHandle });
         onMapReadyRef.current?.(mapInstance);
-        continueRender(loadingHandle);
       });
       mapInstance.triggerRepaint();
     });
     return () => {
+      cancelled = true;
       mapInstance.remove();
       mapRef.current = null;
+      continueRender(loadingHandle);
     };
-  }, [apiKey, continueRender, loadingHandle]);
-  useEffect10(() => {
+  }, [apiKey, continueRender, delayRender]);
+  useLayoutEffect3(() => {
+    if (loadedMap) {
+      continueRender(loadedMap.handle);
+    }
+  }, [continueRender, loadedMap]);
+  useLayoutEffect3(() => {
     if (!map) {
       return;
     }
@@ -2642,7 +2686,7 @@ var MapViewportContent = ({
     pitch,
     zoom
   ]);
-  useEffect10(() => {
+  useLayoutEffect3(() => {
     if (!map || lastMapStyleRef.current === mapStyle && lastLayerVisibilityRef.current.showLabels === showLabels && lastLayerVisibilityRef.current.administrativeBorders === administrativeBorders) {
       return;
     }
@@ -2682,13 +2726,13 @@ var MapViewportContent = ({
     mapStyle,
     showLabels
   ]);
-  useEffect10(() => {
+  useLayoutEffect3(() => {
     if (map && language) {
       map.setLanguage(language);
       map.triggerRepaint();
     }
   }, [language, map]);
-  useEffect10(() => {
+  useLayoutEffect3(() => {
     if (!map) {
       return;
     }
@@ -2699,7 +2743,7 @@ var MapViewportContent = ({
     }
     map.triggerRepaint();
   }, [map, terrain, terrainExaggeration]);
-  useEffect10(() => {
+  useLayoutEffect3(() => {
     if (map && projection) {
       map.setProjection(projection, { persist: true });
       map.triggerRepaint();
@@ -2737,16 +2781,16 @@ var MapViewport = Interactive4.withSchema({
   wrapInSequence: true
 });
 export {
-  useMapTiler,
-  MapViewport,
-  MapSource,
-  MapRoute,
-  MapRegion,
-  MapPolyline,
-  MapPolygon,
-  MapPoint,
-  MapOverlay,
-  MapMarker,
+  MapHeatmap,
   MapLayer,
-  MapHeatmap
+  MapMarker,
+  MapOverlay,
+  MapPoint,
+  MapPolygon,
+  MapPolyline,
+  MapRegion,
+  MapRoute,
+  MapSource,
+  MapViewport,
+  useMapTiler
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/maptiler",
-	"version": "4.0.533",
+	"version": "4.0.535",
 	"description": "MapTiler components for Remotion",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
@@ -25,7 +25,7 @@
 	"dependencies": {
 		"@maptiler/sdk": "4.0.2",
 		"@turf/turf": "7.3.2",
-		"remotion": "4.0.533"
+		"remotion": "4.0.535"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",
@@ -42,7 +42,7 @@
 	"devDependencies": {
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
-		"@remotion/eslint-config-internal": "4.0.533",
+		"@remotion/eslint-config-internal": "4.0.535",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},