@mapcomponents/react-maplibre 0.1.38 → 0.1.41

package/src/components/MapLibreMap/lib/MapLibreGlWrapper.ts

@@ -1,4 +1,4 @@
-import { Map, IControl, MapOptions as MapOptionsType } from "maplibre-gl";
+import { Map, IControl, MapOptions as MapOptionsType } from "!maplibre-gl";
 
 type EventArgArray = [string, string | Function, Function?];
 type LayerState = {
@@ -604,6 +604,8 @@ class MapLibreGlWrapper {
       }
 
       self.map = new Map(props.mapOptions);
+      //@ts-ignore
+      window._map = self.map;
 
       self.addNativeMaplibreFunctionsAndProps();
       self.wrapper.refreshViewport();

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

@@ -105,7 +105,8 @@ function useLayer(props: useLayerProps): useLayerType {
 
     if (
       initializedRef.current &&
-      legalLayerTypes.indexOf(props.options.type) !== -1 &&
+      ((props.options.type && legalLayerTypes.indexOf(props.options.type) !== -1) ||
+        !props.options.type) &&
       layerTypeRef.current &&
       props.options.type !== layerTypeRef.current
     ) {
@@ -124,10 +125,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/tsconfig.json

@@ -17,6 +17,10 @@
     "suppressImplicitAnyIndexErrors": true,
     "allowSyntheticDefaultImports": true,
     "allowJs": true,
+    "baseUrl": ".",
+    "paths": {
+      "!maplibre-gl": ["node_modules/maplibre-gl"] // This mapping is relative to "baseUrl"
+    }
   },
   "include": ["src", "src/custom.d.tsx"],
   "exclude": ["node_modules", "lib"],

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":""}