@remotion/maptiler 4.0.535 → 4.0.537

package/dist/esm/index.mjs

@@ -57,7 +57,7 @@ var useMapPremounting = (getLayerIds) => {
   hiddenRef.current = hidden;
   layerIdsRef.current = getLayerIds;
   const applyPremountVisibility = useCallback(() => {
-    if (!map) {
+    if (!map || !map.style) {
       return;
     }
     for (const id of layerIdsRef.current()) {
@@ -306,7 +306,7 @@ var MapLayerContent = ({ beforeId, layer: passedLayer }) => {
   const previousLayerRef = useRef3(null);
   const { continueRender, delayRender } = useDelayRender2();
   useEffect3(() => {
-    if (!map) {
+    if (!map || !map.style) {
       return;
     }
     const loadingHandle = delayRender(`Drawing MapTiler layer ${layer.id}`);
@@ -369,6 +369,9 @@ var MapLayerContent = ({ beforeId, layer: passedLayer }) => {
       return;
     }
     return () => {
+      if (!map.style) {
+        return;
+      }
       if (map.getLayer(layer.id)) {
         map.removeLayer(layer.id);
         map.triggerRepaint();
@@ -1672,7 +1675,8 @@ var MapRegionDrawing = ({
 }) => {
   const { map } = useContext9(MapTilerContext);
   const { continueRender, delayRender } = useDelayRender6();
-  const [isReady, setIsReady] = useState2(false);
+  const [readyMap, setReadyMap] = useState2(null);
+  const isReady = map !== null && readyMap === map;
   useLayoutEffect(() => {
     if (isReady) {
       return;
@@ -1691,7 +1695,7 @@ var MapRegionDrawing = ({
     outlineGlowLayerId
   ]);
   useLayoutEffect(() => {
-    if (!map) {
+    if (!map || !map.style) {
       return;
     }
     if (!map.getSource(fillSourceId)) {
@@ -1754,7 +1758,7 @@ var MapRegionDrawing = ({
     map.setPaintProperty(outlineSourceId, "line-color", strokeColor);
     map.setPaintProperty(outlineSourceId, "line-width", strokeWidth);
     applyPremountVisibility();
-    const onIdle = () => setIsReady(true);
+    const onIdle = () => setReadyMap(map);
     map.once("idle", onIdle);
     map.triggerRepaint();
     return () => {
@@ -1775,7 +1779,7 @@ var MapRegionDrawing = ({
     strokeWidth
   ]);
   useLayoutEffect(() => {
-    if (!isReady || !map) {
+    if (!isReady || !map || !map.style) {
       return;
     }
     const frameHandle = delayRender(`Drawing ${feature.properties.name}`);
@@ -1806,6 +1810,9 @@ var MapRegionDrawing = ({
       return;
     }
     return () => {
+      if (!map.style) {
+        return;
+      }
       if (map.getLayer(outlineSourceId)) {
         map.removeLayer(outlineSourceId);
       }
@@ -2006,7 +2013,8 @@ var MapRouteDrawing = ({
 }) => {
   const { map } = useContext10(MapTilerContext);
   const { continueRender, delayRender } = useDelayRender7();
-  const [isReady, setIsReady] = useState3(false);
+  const [readyMap, setReadyMap] = useState3(null);
+  const isReady = map !== null && readyMap === map;
   useLayoutEffect2(() => {
     if (isReady) {
       return;
@@ -2023,7 +2031,7 @@ var MapRouteDrawing = ({
     glowLayerId
   ]);
   useLayoutEffect2(() => {
-    if (!map) {
+    if (!map || !map.style) {
       return;
     }
     if (!map.getSource(sourceId)) {
@@ -2066,7 +2074,7 @@ var MapRouteDrawing = ({
     map.setPaintProperty(sourceId, "line-color", strokeColor);
     map.setPaintProperty(sourceId, "line-width", strokeWidth);
     applyPremountVisibility();
-    const onIdle = () => setIsReady(true);
+    const onIdle = () => setReadyMap(map);
     map.once("idle", onIdle);
     map.triggerRepaint();
     return () => {
@@ -2084,7 +2092,7 @@ var MapRouteDrawing = ({
     strokeWidth
   ]);
   useLayoutEffect2(() => {
-    if (!isReady || !map) {
+    if (!isReady || !map || !map.style) {
       return;
     }
     const frameHandle = delayRender(`Drawing ${feature.properties.name} route`);
@@ -2112,6 +2120,9 @@ var MapRouteDrawing = ({
       return;
     }
     return () => {
+      if (!map.style) {
+        return;
+      }
       if (map.getLayer(sourceId)) {
         map.removeLayer(sourceId);
       }
@@ -2248,7 +2259,7 @@ var MapSourceContent = ({ children, id, source }) => {
   const { continueRender, delayRender } = useDelayRender8();
   sourceRef.current = source;
   useEffect9(() => {
-    if (!map) {
+    if (!map || !map.style) {
       return;
     }
     const loadingHandle = delayRender(`Loading MapTiler source ${id}`);
@@ -2268,6 +2279,9 @@ var MapSourceContent = ({ children, id, source }) => {
     return () => {
       map.off("idle", finish);
       finish();
+      if (!map.style) {
+        return;
+      }
       for (const layer of map.getStyle().layers ?? []) {
         if ("source" in layer && layer.source === id && map.getLayer(layer.id)) {
           map.removeLayer(layer.id);
@@ -2280,7 +2294,7 @@ var MapSourceContent = ({ children, id, source }) => {
     };
   }, [continueRender, delayRender, id, map, styleRevision]);
   useEffect9(() => {
-    if (!map || source.type !== "geojson") {
+    if (!map || !map.style || source.type !== "geojson") {
       return;
     }
     const existingSource = map.getSource(id);
@@ -2357,7 +2371,11 @@ var MapSource = ({
   });
 };
 // src/MapViewport.tsx
-import { MapStyle, Map as MapTilerMap } from "@maptiler/sdk";
+import {
+  config as maptilerConfig,
+  MapStyle,
+  Map as MapTilerMap
+} from "@maptiler/sdk";
 import"@maptiler/sdk/style.css";
 import { useLayoutEffect as useLayoutEffect3, useMemo as useMemo5, useRef as useRef8, useState as useState4 } from "react";
 import {
@@ -2559,7 +2577,7 @@ var MapViewportContent = ({
   onMapReadyRef.current = onMapReady;
   const { continueRender, delayRender } = useDelayRender9();
   const [loadedMap, setLoadedMap] = useState4(null);
-  const map = loadedMap?.map ?? null;
+  const map = loadedMap?.map.style ? loadedMap.map : null;
   const [cameraRevision, setCameraRevision] = useState4(0);
   const [styleRevision, setStyleRevision] = useState4(0);
   const contextValue = useMemo5(() => ({ cameraRevision, map, styleRevision }), [cameraRevision, map, styleRevision]);
@@ -2574,6 +2592,12 @@ var MapViewportContent = ({
     let cancelled = false;
     const initialCamera = initialCameraRef.current;
     const initialOptions = initialMapOptionsRef.current;
+    lastMapStyleRef.current = initialOptions.mapStyle;
+    lastLayerVisibilityRef.current = {
+      administrativeBorders: initialOptions.administrativeBorders,
+      showLabels: initialOptions.showLabels
+    };
+    maptilerConfig.telemetry = false;
     const mapInstance = new MapTilerMap({
       fullscreenControl: false,
       geolocateControl: false,
@@ -2607,6 +2631,9 @@ var MapViewportContent = ({
     });
     mapRef.current = mapInstance;
     mapInstance.on("load", () => {
+      if (cancelled) {
+        return;
+      }
       stripStyleLayers({
         administrativeBorders: initialOptions.administrativeBorders,
         map: mapInstance,
@@ -2623,6 +2650,7 @@ var MapViewportContent = ({
     });
     return () => {
       cancelled = true;
+      setLoadedMap(null);
       mapInstance.remove();
       mapRef.current = null;
       continueRender(loadingHandle);
@@ -2634,7 +2662,7 @@ var MapViewportContent = ({
     }
   }, [continueRender, loadedMap]);
   useLayoutEffect3(() => {
-    if (!map) {
+    if (!map || !map.style) {
       return;
     }
     const currentCenter = map.getCenter();
@@ -2687,7 +2715,7 @@ var MapViewportContent = ({
     zoom
   ]);
   useLayoutEffect3(() => {
-    if (!map || lastMapStyleRef.current === mapStyle && lastLayerVisibilityRef.current.showLabels === showLabels && lastLayerVisibilityRef.current.administrativeBorders === administrativeBorders) {
+    if (!map || !map.style || lastMapStyleRef.current === mapStyle && lastLayerVisibilityRef.current.showLabels === showLabels && lastLayerVisibilityRef.current.administrativeBorders === administrativeBorders) {
       return;
     }
     const styleHandle = delayRender("Updating MapTiler style");
@@ -2727,13 +2755,13 @@ var MapViewportContent = ({
     showLabels
   ]);
   useLayoutEffect3(() => {
-    if (map && language) {
+    if (map?.style && language) {
       map.setLanguage(language);
       map.triggerRepaint();
     }
   }, [language, map]);
   useLayoutEffect3(() => {
-    if (!map) {
+    if (!map || !map.style) {
       return;
     }
     if (terrain) {
@@ -2744,7 +2772,7 @@ var MapViewportContent = ({
     map.triggerRepaint();
   }, [map, terrain, terrainExaggeration]);
   useLayoutEffect3(() => {
-    if (map && projection) {
+    if (map?.style && projection) {
       map.setProjection(projection, { persist: true });
       map.triggerRepaint();
     }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/maptiler",
-	"version": "4.0.535",
+	"version": "4.0.537",
 	"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.535"
+		"remotion": "4.0.537"
 	},
 	"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.535",
+		"@remotion/eslint-config-internal": "4.0.537",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},