@mapcomponents/react-maplibre 0.1.40 → 0.1.43

package/src/components/MlWmsLoader/MlWmsLoader.tsx

@@ -14,11 +14,11 @@ import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
 import ListItemText from "@mui/material/ListItemText";
 import IconButton from "@mui/material/IconButton";
-import {LngLat} from "maplibre-gl";
+import { LngLat } from "maplibre-gl";
 import MapLibreGlWrapper from "../MapLibreMap/lib/MapLibreGlWrapper";
 
 var originShift = (2 * Math.PI * 6378137) / 2.0;
-const lngLatToMeters = function (lnglat:LngLat, accuracy = { enable: true, decimal: 1 }) {
+const lngLatToMeters = function (lnglat: LngLat, accuracy = { enable: true, decimal: 1 }) {
   var lng = lnglat.lng;
   var lat = lnglat.lat;
   var x = (lng * originShift) / 180.0;
@@ -54,7 +54,7 @@ interface MlWmsLoaderProps {
   layerUrlParameters: object;
   lngLat: LngLat;
   idPrefix: string;
-};
+}
 
 /**
  * Loads a WMS getCapabilities xml document and adds a MlWmsLayer component for each layer that is
@@ -71,16 +71,23 @@ const MlWmsLoader = (props: MlWmsLoaderProps) => {
     url: undefined,
     urlParameters: props.urlParameters,
   });
-  let layerType : { visible: boolean, queryable: boolean, Name: string, Title: string, LatLonBoundingBox: Array<number>,
-    EX_GeographicBoundingBox: Array<number>, Abstract: any}
+  let layerType: {
+    visible: boolean;
+    queryable: boolean;
+    Name: string;
+    Title: string;
+    LatLonBoundingBox: Array<number>;
+    EX_GeographicBoundingBox: Array<number>;
+    Abstract: any;
+  };
 
   const initializedRef = useRef(false);
   const mapRef = useRef<MapLibreGlWrapper>();
   const componentId = useRef((props.idPrefix ? props.idPrefix : "MlWmsLoader-") + uuidv4());
   const [layers, setLayers] = useState<Array<typeof layerType>>([]);
 
-  const [featureInfoLngLat, setFeatureInfoLngLat] = useState(undefined);
-  const [featureInfoContent, setFeatureInfoContent] = useState<string|undefined>(undefined);
+  const [featureInfoLngLat, setFeatureInfoLngLat] = useState<{lng:number,lat:number} | undefined>();
+  const [featureInfoContent, setFeatureInfoContent] = useState<string | undefined>(undefined);
 
   useEffect(() => {
     let _componentId = componentId.current;
@@ -108,7 +115,7 @@ const MlWmsLoader = (props: MlWmsLoaderProps) => {
 
   const getFeatureInfo = useCallback(
     (ev) => {
-      if(!mapRef.current) return;
+      if (!mapRef.current) return;
       setFeatureInfoLngLat(undefined);
       setFeatureInfoContent(undefined);
       let _bounds = mapRef.current.map.getBounds();
@@ -126,10 +133,14 @@ const MlWmsLoader = (props: MlWmsLoaderProps) => {
             : "text/plain",
         FEATURE_COUNT: "10",
         LAYERS: layers
-          .map((layer: typeof layerType) => (layer.visible && layer.queryable ? layer.Name : undefined))
+          .map((layer: typeof layerType) =>
+            layer.visible && layer.queryable ? layer.Name : undefined
+          )
           .filter((n) => n),
         QUERY_LAYERS: layers
-          .map((layer: typeof layerType) => (layer.visible && layer.queryable ? layer.Name : undefined))
+          .map((layer: typeof layerType) =>
+            layer.visible && layer.queryable ? layer.Name : undefined
+          )
           .filter((n) => n),
         WIDTH: mapRef.current?.map._container.clientWidth,
         HEIGHT: mapRef.current?.map._container.clientHeight,
@@ -143,7 +154,7 @@ const MlWmsLoader = (props: MlWmsLoaderProps) => {
         buffer: "50",
       };
 
-      let _gfiUrl : string | undefined = getFeatureInfoUrl;
+      let _gfiUrl: string | undefined = getFeatureInfoUrl;
       let _gfiUrlParts;
       if (_gfiUrl?.indexOf?.("?") !== -1) {
         _gfiUrlParts = props.url.split("?");
@@ -156,7 +167,8 @@ const MlWmsLoader = (props: MlWmsLoaderProps) => {
         ..._getFeatureInfoUrlParams,
       };
       // create URLSearchParams object to assemble the URL Parameters
-      let urlParams = new URLSearchParams(urlParamsObj.toString());
+      // "as any" can be removed once the URLSearchParams ts spec is fixed
+      let urlParams = new URLSearchParams(urlParamsObj as any);
 
       fetch(props.url + "?" + urlParams.toString())
         .then((res) => {
@@ -236,7 +248,7 @@ const MlWmsLoader = (props: MlWmsLoaderProps) => {
       {error && <p>{error}</p>}
       <h3 key="title">{capabilities?.Service?.Title}</h3>
       {console.log(componentId.current)}
-      {capabilities?.Capability?.Layer?.Layer.map((idx: number) => (
+      {capabilities?.Capability?.Layer?.Layer.map((layer: any, idx: number) => (
         <MlLayer
           layerId={"Order-" + componentId.current + "-" + idx}
           key={componentId.current + "-" + idx}

package/src/hooks/useLayer.ts

@@ -60,6 +60,11 @@ function useLayer(props: useLayerProps): useLayerType {
     if (initializedRef.current || !mapHook.map) return;
     initializedRef.current = true;
 
+    if (mapHook.map.map.getLayer(layerId.current)) {
+      // remove (cleanup) & reinitialize the layer if type has changed
+      cleanup();
+    }
+
     mapHook.map.addLayer(
       {
         ...props.options,
@@ -104,14 +109,6 @@ function useLayer(props: useLayerProps): useLayerType {
     if (!mapHook.map) return;
 
     if (
-      initializedRef.current &&
-      legalLayerTypes.indexOf(props.options.type) !== -1 &&
-      layerTypeRef.current &&
-      props.options.type !== layerTypeRef.current
-    ) {
-      // remove (cleanup) & reinitialize the layer if type has changed
-      cleanup();
-    } else if (
       initializedRef.current &&
       (legalLayerTypes.indexOf(props.options.type) === -1 ||
         (legalLayerTypes.indexOf(props.options.type) !== -1 &&
@@ -124,10 +121,9 @@ function useLayer(props: useLayerProps): useLayerType {
   }, [mapHook.map, props.options, createLayer]);
 
   useEffect(() => {
-    if (!initializedRef.current || !mapHook.map?.map?.getSource(layerId.current))
-      return;
+    if (!initializedRef.current || !mapHook.map?.map?.getSource(layerId.current)) return;
 
-      //@ts-ignore setData only exists on GeoJsonSource
+    //@ts-ignore setData only exists on GeoJsonSource
     mapHook.map.map.getSource(layerId.current)?.setData?.(props.geojson);
   }, [props.geojson, mapHook.map, props.options.type]);
 

package/src/hooks/useMap.ts

@@ -42,11 +42,13 @@ function useMap(props: { mapId?: string; waitForLayer?: string }): useMapType {
       mapRef.current = undefined;
     }
     initializedRef.current = false;
-    setMapIsReady(false);
   };
 
   useEffect(() => {
-    return cleanup;
+    return () => {
+      cleanup();
+      setMapIsReady(false);
+    }
   }, []);
 
   useEffect(() => {

package/docs-build/0.93d0ce3d.iframe.bundle.js.map

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

package/docs-build/1.2b1ae3fa.iframe.bundle.js.map

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

package/docs-build/16.2c8135a1.iframe.bundle.js.map

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

package/docs-build/17.9a16865a.iframe.bundle.js.map

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

package/docs-build/18.4c47f37e.iframe.bundle.js.map

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

package/docs-build/19.cdf25e28.iframe.bundle.js.map

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

package/docs-build/2.4518b817.iframe.bundle.js.map

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

package/docs-build/20.4c43e27c.iframe.bundle.js.map

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

package/docs-build/21.19c21085.iframe.bundle.js.map

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

package/docs-build/3.5dd9e88b.iframe.bundle.js.map

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