@mapcomponents/react-maplibre 0.1.34 → 0.1.37

package/src/components/MlWmsLayer/{MlWmsLayer.js → MlWmsLayer.tsx}

@@ -27,13 +27,24 @@ const defaultProps = {
   },
 };
 
+interface MlWmsLayerProps {
+  urlParameters?: any;
+  url: string;
+  visible?: boolean;
+  attribution?: string;
+  mapId?: string;
+  sourceOptions?: any;
+  layerOptions?: any;
+  insertBeforeLayer?: string;
+  layerId?: string;
+}
 /**
  * Adds a WMS raster source & layer to the maplibre-gl instance
  *
  * @param {object} props
  * @param {object} props.urlParameters URL query parameters that will be added to the WMS URL. A layers property (string) is mandatory. Any value defined on this attribute will extend the default object
  * @param {string} props.url WMS URL
- * @param {bool} props.visible Sets layer "visibility" property to "visible" if true or "none" if false
+ * @param {bool}   props.visible Sets layer "visibility" property to "visible" if true or "none" if false
  * @param {string} props.attribution MapLibre attribution shown in the bottom right of the map, if this layer is visible
  * @param {string} props.mapId Id of the target MapLibre instance in mapContext
  * @param {object} props.sourceOptions Object that is passed to the MapLibre.addSource call as config option parameter
@@ -43,8 +54,11 @@ const defaultProps = {
  *
  * @component
  */
-const MlWmsLayer = (props) => {
-  const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
+const MlWmsLayer = (props:MlWmsLayerProps) => {
+  const mapHook = useMap({
+    mapId: props.mapId,
+    waitForLayer: props.insertBeforeLayer,
+  });
 
   const initializedRef = useRef(false);
   const layerId = useRef(props.layerId || "MlWmsLayer-" + mapHook.componentId);
@@ -69,7 +83,8 @@ const MlWmsLayer = (props) => {
     };
     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,
@@ -95,7 +110,7 @@ const MlWmsLayer = (props) => {
     );
 
     if (!props.visible) {
-      mapHook.map.setLayoutProperty(layerId.current, "visibility", "none");
+      mapHook.map.map.setLayoutProperty(layerId.current, "visibility", "none");
     }
   }, [mapHook, props]);
 
@@ -104,9 +119,9 @@ const MlWmsLayer = (props) => {
 
     // toggle layer visibility by changing the layout object's visibility property
     if (props.visible) {
-      mapHook.map.setLayoutProperty(layerId.current, "visibility", "visible");
+      mapHook.map.map.setLayoutProperty(layerId.current, "visibility", "visible");
     } else {
-      mapHook.map.setLayoutProperty(layerId.current, "visibility", "none");
+      mapHook.map.map.setLayoutProperty(layerId.current, "visibility", "none");
     }
   }, [props.visible, mapHook.map]);
 

package/src/components/MlWmsLoader/{MlWmsLoader.js → MlWmsLoader.tsx}

@@ -1,6 +1,6 @@
 import React, { useRef, useEffect, useContext, useCallback, useState } from "react";
-import PropTypes from "prop-types";
 
+// @ts-ignore
 import { MapContext } from "@mapcomponents/react-core";
 import { v4 as uuidv4 } from "uuid";
 
@@ -15,9 +15,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 MapLibreGlWrapper from "../MapLibreMap/lib/MapLibreGlWrapper";
 
 var originShift = (2 * Math.PI * 6378137) / 2.0;
-const lngLatToMeters = function (lnglat, validate, 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;
@@ -29,6 +31,32 @@ const lngLatToMeters = function (lnglat, validate, accuracy = { enable: true, de
   }
   return [x, y];
 };
+
+interface MlWmsLoaderProps {
+  /**
+   * WMS URL
+   */
+  url: string;
+  /**
+   * Id of the target MapLibre instance in mapContext
+   */
+  mapId: string;
+  /**
+   * URL parameters that will be used in the getCapabilities request
+   */
+  urlParameters: object;
+  /**
+   * URL parameters that will be added when requesting WMS capabilities
+   */
+  wmsUrlParameters: object;
+  /**
+   * URL parameters that will be added when requesting tiles
+   */
+  layerUrlParameters: object;
+  lngLat: LngLat;
+  idPrefix: string;
+};
+
 /**
  * Loads a WMS getCapabilities xml document and adds a MlWmsLayer component for each layer that is
  * offered by the WMS.
@@ -37,21 +65,23 @@ const lngLatToMeters = function (lnglat, validate, accuracy = { enable: true, de
  *
  * @component
  */
-const MlWmsLoader = (props) => {
+const MlWmsLoader = (props: MlWmsLoaderProps) => {
   // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
-  const mapContext = useContext(MapContext);
-  const { capabilities, error, setUrl, getFeatureInfoUrl, wmsUrl } = useWms({
+  const mapContext: MapContextType = useContext(MapContext);
+  const { capabilities, error, setUrl, getFeatureInfoUrl, wmsUrl }: any = useWms({
     url: undefined,
     urlParameters: props.urlParameters,
   });
+  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(undefined);
+  const mapRef = useRef<MapLibreGlWrapper>();
   const componentId = useRef((props.idPrefix ? props.idPrefix : "MlWmsLoader-") + uuidv4());
-  const [layers, setLayers] = useState([]);
+  const [layers, setLayers] = useState<Array<typeof layerType>>([]);
 
   const [featureInfoLngLat, setFeatureInfoLngLat] = useState(undefined);
-  const [featureInfoContent, setFeatureInfoContent] = useState(undefined);
+  const [featureInfoContent, setFeatureInfoContent] = useState<string|undefined>(undefined);
 
   useEffect(() => {
     let _componentId = componentId.current;
@@ -79,9 +109,10 @@ const MlWmsLoader = (props) => {
 
   const getFeatureInfo = useCallback(
     (ev) => {
+      if(!mapRef.current) return;
       setFeatureInfoLngLat(undefined);
       setFeatureInfoContent(undefined);
-      let _bounds = mapRef.current.getBounds();
+      let _bounds = mapRef.current.map.getBounds();
       let _sw = lngLatToMeters(_bounds._sw);
       let _ne = lngLatToMeters(_bounds._ne);
       let bbox = [_sw[0], _sw[1], _ne[0], _ne[1]];
@@ -96,13 +127,13 @@ const MlWmsLoader = (props) => {
             : "text/plain",
         FEATURE_COUNT: "10",
         LAYERS: layers
-          .map((layer, idx) => (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, idx) => (layer.visible && layer.queryable ? layer.Name : undefined))
+          .map((layer: typeof layerType) => (layer.visible && layer.queryable ? layer.Name : undefined))
           .filter((n) => n),
-        WIDTH: mapRef.current._container.clientWidth,
-        HEIGHT: mapRef.current._container.clientHeight,
+        WIDTH: mapRef.current?.map._container.clientWidth,
+        HEIGHT: mapRef.current?.map._container.clientHeight,
         srs: "EPSG:3857",
         CRS: "EPSG:3857",
         version: "1.3.0",
@@ -113,7 +144,7 @@ const MlWmsLoader = (props) => {
         buffer: "50",
       };
 
-      let _gfiUrl = getFeatureInfoUrl;
+      let _gfiUrl : string | undefined = getFeatureInfoUrl;
       let _gfiUrlParts;
       if (_gfiUrl?.indexOf?.("?") !== -1) {
         _gfiUrlParts = props.url.split("?");
@@ -126,7 +157,7 @@ const MlWmsLoader = (props) => {
         ..._getFeatureInfoUrlParams,
       };
       // create URLSearchParams object to assemble the URL Parameters
-      let urlParams = new URLSearchParams(urlParamsObj);
+      let urlParams = new URLSearchParams(urlParamsObj.toString());
 
       fetch(props.url + "?" + urlParams.toString())
         .then((res) => {
@@ -151,9 +182,9 @@ const MlWmsLoader = (props) => {
 
     mapRef.current.on("click", _getFeatureInfo, componentId.current);
     return () => {
-      mapRef.current?.off?.("click", _getFeatureInfo);
+      mapRef.current?.map.off?.("click", _getFeatureInfo);
     };
-  }, [getFeatureInfoUrl]);
+  }, [getFeatureInfo]);
 
   useEffect(() => {
     if (!capabilities?.Service) return;
@@ -167,9 +198,9 @@ const MlWmsLoader = (props) => {
         "MlWmsLoader (" + capabilities.Service.Title + "): WGS 84/Pseudo-Mercator supported"
       );
 
-      let _LatLonBoundingBox;
+      let _LatLonBoundingBox: Array<number> = [];
       setLayers(
-        capabilities?.Capability?.Layer?.Layer.map((layer, idx) => {
+        capabilities?.Capability?.Layer?.Layer.map((layer: typeof layerType, idx: number) => {
           if (idx === 0) {
             _LatLonBoundingBox = layer.LatLonBoundingBox;
             if (!_LatLonBoundingBox) {
@@ -182,8 +213,8 @@ const MlWmsLoader = (props) => {
       );
 
       // zoom to extent of first layer
-      if (mapRef.current && _LatLonBoundingBox?.length > 3) {
-        mapRef.current.fitBounds([
+      if (mapRef.current && _LatLonBoundingBox.length > 3) {
+        mapRef.current.map.fitBounds([
           [_LatLonBoundingBox[0], _LatLonBoundingBox[1]],
           [_LatLonBoundingBox[2], _LatLonBoundingBox[3]],
         ]);
@@ -206,7 +237,7 @@ const MlWmsLoader = (props) => {
       {error && <p>{error}</p>}
       <h3 key="title">{capabilities?.Service?.Title}</h3>
       {console.log(componentId.current)}
-      {capabilities?.Capability?.Layer?.Layer.map((layer, idx) => (
+      {capabilities?.Capability?.Layer?.Layer.map((idx: number) => (
         <MlLayer
           layerId={"Order-" + componentId.current + "-" + idx}
           key={componentId.current + "-" + idx}
@@ -219,7 +250,7 @@ const MlWmsLoader = (props) => {
       ))}
       <List dense key="layers">
         {wmsUrl &&
-          layers?.map?.((layer, idx) => {
+          layers?.map?.((layer: typeof layerType, idx) => {
             return layer?.Name ? (
               <ListItem
                 key={layer.Name + idx}
@@ -228,7 +259,7 @@ const MlWmsLoader = (props) => {
                     edge="end"
                     aria-label="toggle visibility"
                     onClick={() => {
-                      let _layers = [...layers];
+                      let _layers: Array<typeof layerType> = [...layers];
                       _layers[idx].visible = !_layers[idx].visible;
                       setLayers([..._layers]);
                     }}
@@ -272,27 +303,4 @@ MlWmsLoader.defaultProps = {
   },
 };
 
-MlWmsLoader.propTypes = {
-  /**
-   * WMS URL
-   */
-  url: PropTypes.string.isRequired,
-  /**
-   * Id of the target MapLibre instance in mapContext
-   */
-  mapId: PropTypes.string,
-  /**
-   * URL parameters that will be used in the getCapabilities request
-   */
-  urlParameters: PropTypes.object,
-  /**
-   * URL parameters that will be added when requesting WMS capabilities
-   */
-  wmsUrlParameters: PropTypes.object,
-  /**
-   * URL parameters that will be added when requesting tiles
-   */
-  layerUrlParameters: PropTypes.object,
-};
-
 export default MlWmsLoader;

package/src/custom.d.tsx

@@ -0,0 +1,26 @@
+
+declare module "*.svg" {
+  const content: any;
+  export default content;
+  export { content as ReactComponent };
+}
+declare module "*.js" {
+  const content: any;
+  export default content;
+}
+
+//declare module '@mapcomponents/react-core';
+type MapContextType= {
+  mapIds: [string?];
+  mapExists: Function;
+  maps: [];
+  map: any,
+  getMap: Function;
+  setMap: Function;
+};
+
+interface GeoJSON {
+  type: string,
+  features?: any
+  geometry?: any
+}

package/src/hooks/useLayer.ts

@@ -0,0 +1,221 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+
+import useMap, { useMapType } from "./useMap";
+
+import { LayerSpecification } from "maplibre-gl";
+
+import MapLibreGlWrapper from "../components/MapLibreMap/lib/MapLibreGlWrapper";
+
+type useLayerType = {
+  map: MapLibreGlWrapper | undefined;
+  layer: LayerSpecification;
+  layerId: string;
+  componentId: string;
+  mapHook: useMapType;
+};
+
+interface useLayerProps {
+  mapId?: string;
+  layerId?: string;
+  idPrefix?: string;
+  insertBeforeLayer?: string;
+  insertBeforeFirstSymbolLayer?: boolean;
+  geojson?: object;
+  options: LayerSpecification;
+  onHover?: Function;
+  onClick?: Function;
+  onLeave?: Function;
+}
+
+const legalLayerTypes = [
+  "fill",
+  "line",
+  "symbol",
+  "circle",
+  "heatmap",
+  "fill-extrusion",
+  "raster",
+  "hillshade",
+  "background",
+];
+
+function useLayer(props: useLayerProps): useLayerType {
+  const mapHook = useMap({
+    mapId: props.mapId,
+    waitForLayer: props.insertBeforeLayer,
+  });
+
+  const layerTypeRef = useRef<string>("");
+  const layerPaintConfRef = useRef<string>("");
+  const layerLayoutConfRef = useRef<string>("");
+
+  const [layer, setLayer] = useState<any>();
+
+  const initializedRef = useRef<boolean>(false);
+  const layerId = useRef(
+    props.layerId ||
+      (props.idPrefix ? props.idPrefix : "Layer-") + mapHook.componentId
+  );
+
+  const createLayer = useCallback(() => {
+    if (initializedRef.current || !mapHook.map) return;
+    initializedRef.current = true;
+
+    mapHook.map.addLayer(
+      {
+        ...props.options,
+        ...(props.geojson
+          ? {
+              source: {
+                type: "geojson",
+                data: props.geojson,
+              },
+            }
+          : {}),
+        id: layerId.current,
+      },
+      props.insertBeforeLayer
+        ? props.insertBeforeLayer
+        : props.insertBeforeFirstSymbolLayer
+        ? mapHook.map.firstSymbolLayer
+        : undefined,
+      mapHook.componentId
+    );
+
+    setLayer(mapHook.map.map.getLayer(layerId.current));
+
+    if (typeof props.onHover !== "undefined") {
+      mapHook.map.on(
+        "mousemove",
+        layerId.current,
+        props.onHover,
+        mapHook.componentId
+      );
+    }
+
+    if (typeof props.onClick !== "undefined") {
+      mapHook.map.on(
+        "click",
+        layerId.current,
+        props.onClick,
+        mapHook.componentId
+      );
+    }
+
+    if (typeof props.onLeave !== "undefined") {
+      mapHook.map.on(
+        "mouseleave",
+        layerId.current,
+        props.onLeave,
+        mapHook.componentId
+      );
+    }
+
+    layerPaintConfRef.current = JSON.stringify(props.options?.paint);
+    layerLayoutConfRef.current = JSON.stringify(props.options?.layout);
+    layerTypeRef.current = props.options.type;
+  }, [props, mapHook.map]);
+
+  useEffect(() => {
+    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 &&
+          props.options.type === layerTypeRef.current))
+    ) {
+      return;
+    }
+
+    createLayer();
+  }, [mapHook.map, props.options, createLayer]);
+
+  useEffect(() => {
+    if (
+      !initializedRef.current ||
+      !mapHook?.map?.map.getSource(layerId.current)
+    )
+      return;
+
+    // @ts-ignore
+    mapHook.map.map.getSource(layerId.current).setData(props.geojson);
+  }, [props.geojson, mapHook.map, props.options.type]);
+
+  useEffect(() => {
+    if (
+      !mapHook.map ||
+      !mapHook.map?.map?.getLayer?.(layerId.current) ||
+      !initializedRef.current
+    )
+      return;
+
+    var key;
+
+    let layoutString = JSON.stringify(props.options.layout);
+    if (props.options.layout && layoutString !== layerLayoutConfRef.current) {
+      let oldLayout = JSON.parse(layerLayoutConfRef.current);
+
+      for (key in props.options.layout) {
+        if (
+          props.options.layout?.[key] &&
+          props.options.layout[key] !== oldLayout[key]
+        ) {
+          mapHook.map.map.setLayoutProperty(
+            layerId.current,
+            key,
+            props.options.layout[key]
+          );
+        }
+      }
+      layerLayoutConfRef.current = layoutString;
+    }
+
+    let paintString = JSON.stringify(props.options.paint);
+    if (paintString !== layerPaintConfRef.current) {
+      let oldPaint = JSON.parse(layerPaintConfRef.current);
+      for (key in props.options.paint) {
+        if (
+          props.options.paint?.[key] &&
+          props.options.paint[key] !== oldPaint[key]
+        ) {
+          mapHook.map.map.setPaintProperty(
+            layerId.current,
+            key,
+            props.options.paint[key]
+          );
+        }
+      }
+      layerPaintConfRef.current = paintString;
+    }
+  }, [props.options, mapHook.map]);
+
+  const cleanup = () => {
+    initializedRef.current = false;
+    mapHook.cleanup();
+  };
+
+  useEffect(() => {
+    return () => {
+      cleanup();
+    };
+  }, []);
+
+  return {
+    map: mapHook.map,
+    layer: layer,
+    layerId: layerId.current,
+    componentId: mapHook.componentId,
+    mapHook: mapHook,
+  };
+}
+
+export default useLayer;

package/src/hooks/{useMap.js → useMap.ts}

@@ -1,11 +1,30 @@
-import React, { useContext, useState, useEffect, useRef } from "react";
+import {
+  useContext,
+  useState,
+  useEffect,
+  useRef,
+  MutableRefObject,
+} from "react";
 import { v4 as uuidv4 } from "uuid";
+// @ts-ignore
 import { MapContext } from "@mapcomponents/react-core";
 import useMapState from "./useMapState";
+import MapLibreGlWrapper, {
+  LayerState,
+} from "../components/MapLibreMap/lib/MapLibreGlWrapper";
 
-function useMap(props) {
+type useMapType = {
+  map: MapLibreGlWrapper | undefined;
+  mapIsReady: boolean;
+  componentId: string;
+  layers: (LayerState | undefined)[];
+  cleanup: Function
+};
+
+function useMap(props: { mapId?: string; waitForLayer?: string }): useMapType {
   // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
-  const mapContext = useContext(MapContext);
+  const mapContext: MapContextType = useContext(MapContext);
+  const [map, setMap] = useState();
 
   const mapState = useMapState({
     mapId: props.mapId,
@@ -20,23 +39,24 @@ function useMap(props) {
   });
 
   const initializedRef = useRef(false);
-  const mapRef = useRef(undefined);
+  const mapRef: MutableRefObject<MapLibreGlWrapper | undefined> =
+    useRef(undefined);
 
   const componentId = useRef(uuidv4());
 
   const [mapIsReady, setMapIsReady] = useState(false);
 
-  useEffect(() => {
-    let _componentId = componentId.current;
+  const cleanup = () => {
+    if (mapRef.current) {
+      mapRef.current.cleanup(componentId.current);
+      mapRef.current = undefined;
+    }
+    initializedRef.current = false;
+    setMapIsReady(false);
+  };
 
-    return () => {
-      if (mapRef.current) {
-        mapRef.current.cleanup(_componentId);
-        mapRef.current = undefined;
-      }
-      initializedRef.current = false;
-      setMapIsReady(false);
-    };
+  useEffect(() => {
+    return cleanup;
   }, []);
 
   useEffect(() => {
@@ -47,7 +67,7 @@ function useMap(props) {
     if (props.waitForLayer) {
       let layerFound = false;
 
-      mapState?.layers?.forEach((layer) => {
+      mapState?.layers?.forEach((layer: any) => {
         if (layer.id === props.waitForLayer) {
           layerFound = true;
         }
@@ -60,15 +80,26 @@ function useMap(props) {
     // initialize the layer and add it to the MapLibre-gl instance or do something else with it
     initializedRef.current = true;
     mapRef.current = mapContext.getMap(props.mapId);
+    // @ts-ignore
+    setMap(mapRef.current);
     setMapIsReady(true);
-  }, [mapContext.mapIds, mapState.layers, mapContext, props.waitForLayer, props.mapId]);
+  }, [
+    mapContext.mapIds,
+    mapState.layers,
+    mapContext,
+    props.waitForLayer,
+    props.mapId,
+  ]);
 
   return {
-    map: mapRef.current,
+    map: map,
     mapIsReady,
     componentId: componentId.current,
     layers: mapState.layers,
+    cleanup
   };
 }
 
 export default useMap;
+
+export type {useMapType};