@mapcomponents/react-maplibre 0.1.43 → 0.1.46

package/src/hooks/useLayer.ts

@@ -57,13 +57,15 @@ function useLayer(props: useLayerProps): useLayerType {
   );
 
   const createLayer = useCallback(() => {
-    if (initializedRef.current || !mapHook.map) return;
-    initializedRef.current = true;
+    if (!mapHook.map) return;
 
     if (mapHook.map.map.getLayer(layerId.current)) {
-      // remove (cleanup) & reinitialize the layer if type has changed
-      cleanup();
+      mapHook.cleanup();
+    }
+    if (mapHook.map.map.getSource(layerId.current)) {
+      mapHook.map.map.removeSource(layerId.current);
     }
+    initializedRef.current = true;
 
     mapHook.map.addLayer(
       {
@@ -100,6 +102,18 @@ function useLayer(props: useLayerProps): useLayerType {
       mapHook.map.on("mouseleave", layerId.current, props.onLeave, mapHook.componentId);
     }
 
+    // recreate layer if style has changed
+    mapHook.map.on(
+      "styledata",
+      () => {
+        if (initializedRef.current && !mapHook.map?.map.getLayer(layerId.current)) {
+          console.log("Recreate Layer");
+          createLayer();
+        }
+      },
+      mapHook.componentId
+    );
+
     layerPaintConfRef.current = JSON.stringify(props.options?.paint);
     layerLayoutConfRef.current = JSON.stringify(props.options?.layout);
     layerTypeRef.current = props.options.type;
@@ -128,7 +142,12 @@ function useLayer(props: useLayerProps): useLayerType {
   }, [props.geojson, mapHook.map, props.options.type]);
 
   useEffect(() => {
-    if (!mapHook.map || !mapHook.map?.map?.getLayer?.(layerId.current) || !initializedRef.current)
+    if (
+      !mapHook.map ||
+      !mapHook.map?.map?.getLayer?.(layerId.current) ||
+      !initializedRef.current ||
+      props.options.type !== layerTypeRef.current
+    )
       return;
 
     var key;
@@ -157,14 +176,10 @@ function useLayer(props: useLayerProps): useLayerType {
     }
   }, [props.options, mapHook.map]);
 
-  const cleanup = () => {
-    initializedRef.current = false;
-    mapHook.cleanup();
-  };
-
   useEffect(() => {
     return () => {
-      cleanup();
+      initializedRef.current = false;
+      mapHook.cleanup();
     };
   }, []);
 

package/src/index.ts

@@ -32,7 +32,7 @@ export { default as useMapState } from "./hooks/useMapState";
 export { default as useMap } from "./hooks/useMap";
 export { default as useWms } from "./hooks/useWms.js";
 
-export { MapComponentsProvider } from './contexts/MapContext';
-export { default as MapContext } from './contexts/MapContext';
-export { default as SimpleDataProvider } from './contexts/SimpleDataProvider';
-export { default as SimpleDataContext } from './contexts/SimpleDataContext';
+export { MapComponentsProvider } from "./contexts/MapContext";
+export { default as MapContext } from "./contexts/MapContext";
+export { default as SimpleDataProvider } from "./contexts/SimpleDataProvider";
+export { default as SimpleDataContext } from "./contexts/SimpleDataContext";

package/src/util/layerRemovalTest.js

@@ -75,6 +75,11 @@ const layerRemovalTest = (
 
         wrapper.find(".trigger_refresh").simulate("click");
 
+        // debug helper
+        //console.log('layer removal test')
+        //console.log(wrapper.find(".layers_json").text());
+        //console.log(regexLayerNameTest.toString());
+        //console.log(regexLayerNameTest.test(wrapper.find(".layers_json").text()));
         expect(regexLayerNameTest.test(wrapper.find(".layers_json").text())).toEqual(
           true
         );

package/docs-build/0.b1b9b035.iframe.bundle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"0.b1b9b035.iframe.bundle.js","sources":["webpack:///0.b1b9b035.iframe.bundle.js"],"mappings":"AAAA","sourceRoot":""}

package/docs-build/1.c50fb367.iframe.bundle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"1.c50fb367.iframe.bundle.js","sources":["webpack:///1.c50fb367.iframe.bundle.js"],"mappings":"AAAA;;;;;;;;AAixHA","sourceRoot":""}

package/docs-build/17.2e544968.iframe.bundle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"17.2e544968.iframe.bundle.js","sources":["webpack:///17.2e544968.iframe.bundle.js"],"mappings":"AAAA","sourceRoot":""}

package/docs-build/18.42087006.iframe.bundle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"18.42087006.iframe.bundle.js","sources":["webpack:///18.42087006.iframe.bundle.js"],"mappings":"AAAA;;;;;;;;;;;;;;;AA6pOA","sourceRoot":""}

package/docs-build/19.7e782442.iframe.bundle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"19.7e782442.iframe.bundle.js","sources":["webpack:///19.7e782442.iframe.bundle.js"],"mappings":"AAAA;;;;;;;;;;;;AA6JA","sourceRoot":""}

package/docs-build/2.e58dc625.iframe.bundle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"2.e58dc625.iframe.bundle.js","sources":["webpack:///2.e58dc625.iframe.bundle.js"],"mappings":"AAAA","sourceRoot":""}

package/docs-build/20.f009289a.iframe.bundle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"20.f009289a.iframe.bundle.js","sources":["webpack:///20.f009289a.iframe.bundle.js"],"mappings":"AAAA","sourceRoot":""}

package/docs-build/21.1cdc9040.iframe.bundle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"21.1cdc9040.iframe.bundle.js","sources":["webpack:///21.1cdc9040.iframe.bundle.js"],"mappings":"AAAA;;AAQA","sourceRoot":""}

package/docs-build/22.c9e6b2d7.iframe.bundle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"22.c9e6b2d7.iframe.bundle.js","sources":["webpack:///22.c9e6b2d7.iframe.bundle.js"],"mappings":"AAAA;;;;;;AAWA;;;;;;;;;;;;;;AAoBA","sourceRoot":""}

package/docs-build/3.a8172b89.iframe.bundle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"3.a8172b89.iframe.bundle.js","sources":["webpack:///3.a8172b89.iframe.bundle.js"],"mappings":"AAAA","sourceRoot":""}