@mapcomponents/react-maplibre 0.1.44 → 0.1.48

package/src/components/MlWmsLayer/MlWmsLayer.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from "react";
+import React, { useRef, useEffect, useCallback } from "react";
 import useMap from "../../hooks/useMap";
 
 import PropTypes from "prop-types";
@@ -54,7 +54,7 @@ interface MlWmsLayerProps {
  *
  * @component
  */
-const MlWmsLayer = (props:MlWmsLayerProps) => {
+const MlWmsLayer = (props: MlWmsLayerProps) => {
   const mapHook = useMap({
     mapId: props.mapId,
     waitForLayer: props.insertBeforeLayer,
@@ -63,11 +63,15 @@ const MlWmsLayer = (props:MlWmsLayerProps) => {
   const initializedRef = useRef(false);
   const layerId = useRef(props.layerId || "MlWmsLayer-" + mapHook.componentId);
 
-  useEffect(() => {
-    if (!mapHook.map || initializedRef.current) return;
+  const createLayer = useCallback(() => {
+    if (!mapHook.map) return;
 
     initializedRef.current = true;
 
+    if (mapHook.map.map.getLayer(layerId.current)) {
+      mapHook.cleanup();
+    }
+
     let _propsUrlParams;
     let _wmsUrl = props.url;
     if (props.url.indexOf("?") !== -1) {
@@ -83,8 +87,7 @@ const MlWmsLayer = (props:MlWmsLayerProps) => {
     };
     let urlParams = new URLSearchParams(urlParamsObj);
     let urlParamsStr =
-      decodeURIComponent(urlParams.toString()) +
-      "".replace(/%2F/g, "/").replace(/%3A/g, ":");
+      decodeURIComponent(urlParams.toString()) + "".replace(/%2F/g, "/").replace(/%3A/g, ":");
 
     mapHook.map.addSource(
       layerId.current,
@@ -109,10 +112,27 @@ const MlWmsLayer = (props:MlWmsLayerProps) => {
       mapHook.componentId
     );
 
+    // recreate layer if map style.json has changed
+    mapHook.map.on(
+      "styledata",
+      () => {
+        if (initializedRef.current && !mapHook.map?.map.getLayer(layerId.current)) {
+          console.log("Recreate Layer " + layerId.current);
+          createLayer();
+        }
+      },
+      mapHook.componentId
+    );
     if (!props.visible) {
       mapHook.map.map.setLayoutProperty(layerId.current, "visibility", "none");
     }
-  }, [mapHook, props]);
+  }, [mapHook.map, props]);
+
+  useEffect(() => {
+    if (initializedRef.current) return;
+
+    createLayer();
+  }, [createLayer]);
 
   useEffect(() => {
     if (!mapHook.map || !initializedRef.current) return;

package/src/components/MlWmsLoader/MlWmsLoader.tsx

@@ -307,7 +307,7 @@ MlWmsLoader.defaultProps = {
   urlParameters: {
     SERVICE: "WMS",
     VERSION: "1.3.0",
-    REQUEST: "getCapabilities",
+    REQUEST: "GetCapabilities",
   },
   wmsUrlParameters: {
     TRANSPARENT: "TRUE",

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,13 @@ function useLayer(props: useLayerProps): useLayerType {
   }, [props.geojson, mapHook.map, props.options.type]);
 
   useEffect(() => {
-    if (!mapHook.map || !mapHook.map?.map?.getLayer?.(layerId.current) || !initializedRef.current || props.options.type !== layerTypeRef.current)return;
+    if (
+      !mapHook.map ||
+      !mapHook.map?.map?.getLayer?.(layerId.current) ||
+      !initializedRef.current ||
+      props.options.type !== layerTypeRef.current
+    )
+      return;
 
     var key;
 
@@ -156,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/hooks/useWms.js

@@ -84,7 +84,7 @@ useWms.defaultProps = {
   urlParameters: {
     SERVICE: "WMS",
     VERSION: "1.3.0",
-    REQUEST: "getCapabilities",
+    REQUEST: "GetCapabilities",
   },
 };
 

package/src/index.ts

@@ -6,6 +6,7 @@ export { default as MlFillExtrusionLayer } from "./components/MlFillExtrusionLay
 export { default as MlFollowGps } from "./components/MlFollowGps/MlFollowGps";
 export { default as MlGeoJsonLayer } from "./components/MlGeoJsonLayer/MlGeoJsonLayer";
 export { default as MlImageMarkerLayer } from "./components/MlImageMarkerLayer/MlImageMarkerLayer";
+export { default as MlMeasureTool } from "./components/MlMeasureTool/MlMeasureTool";
 export { default as MlNavigationTools } from "./components/MlNavigationTools/MlNavigationTools";
 export { default as MlNavigationCompass } from "./components/MlNavigationCompass/MlNavigationCompass";
 export { default as MlLayer } from "./components/MlLayer/MlLayer";
@@ -32,7 +33,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":""}