@mapcomponents/react-maplibre 0.1.48 → 0.1.52

package/src/components/MlNavigationTools/MlNavigationTools.tsx

@@ -8,13 +8,29 @@ import MlNavigationCompass from "../MlNavigationCompass/MlNavigationCompass";
 import MlFollowGps from "../MlFollowGps/MlFollowGps";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import useMap from "../../hooks/useMap";
+import MlCenterPosition from "../MlCenterPosition/MlCenterPosition";
 
 interface MlNavigationToolsProps {
+  /**
+   * Id of the target MapLibre instance in mapContext
+   */
   mapId?: string;
+  /**
+   * The layerId of an existing layer this layer should be rendered visually beneath
+   * https://maplibre.org/maplibre-gl-js-docs/api/map/#map#addlayer - see "beforeId" property
+   */
   insertBeforeLayer?: string;
+  /**
+   * Show follow GPS button
+   */
+  showFollowGpsButton?: boolean;
+  /**
+   * Show center on current position button
+   */
+  showCenterLocationButton?: boolean;
 }
 
- /**
+/**
  * @component
  */
 const MlNavigationTools = (props: MlNavigationToolsProps) => {
@@ -45,21 +61,22 @@ const MlNavigationTools = (props: MlNavigationToolsProps) => {
   useEffect(() => {
     if (!mapHook.map) return;
 
-    mapHook.map.on("pitchend", () => {
-      if (!mapHook.map) return;
+    mapHook.map.on(
+      "pitchend",
+      () => {
+        if (!mapHook.map) return;
 
-      setPitch(mapHook.map.map.getPitch());
-    },mapHook.componentId);
+        setPitch(mapHook.map.map.getPitch());
+      },
+      mapHook.componentId
+    );
     setPitch(mapHook.map.map.getPitch());
   }, [mapHook.map, props.mapId]);
 
   const zoomIn = () => {
     if (!mapHook.map) return;
 
-    if (
-      mapHook.map.map.transform._zoom + 0.5 <=
-      mapHook.map.map.transform._maxZoom
-    ) {
+    if (mapHook.map.map.transform._zoom + 0.5 <= mapHook.map.map.transform._maxZoom) {
       mapHook.map.map.easeTo({ zoom: mapHook.map.map.transform._zoom + 0.5 });
     }
   };
@@ -67,10 +84,7 @@ const MlNavigationTools = (props: MlNavigationToolsProps) => {
   const zoomOut = () => {
     if (!mapHook.map) return;
 
-    if (
-      mapHook.map.map.transform._zoom - 0.5 >=
-      mapHook.map.map.transform._minZoom
-    ) {
+    if (mapHook.map.map.transform._zoom - 0.5 >= mapHook.map.map.transform._minZoom) {
       mapHook.map.map.easeTo({ zoom: mapHook.map.map.transform._zoom - 0.5 });
     }
   };
@@ -108,10 +122,18 @@ const MlNavigationTools = (props: MlNavigationToolsProps) => {
           boxShadow: "0px 0px 18px rgba(0,0,0,.5)",
         }}
       />
-      <Button sx={{ ...buttonStyle, fontSize:mediaIsMobile?'1.4em':'1em', fontWeight: 600 }} onClick={adjustPitch}>
+      <Button
+        sx={{ ...buttonStyle, fontSize: mediaIsMobile ? "1.4em" : "1em", fontWeight: 600 }}
+        onClick={adjustPitch}
+      >
         {pitch ? "2D" : "3D"}
       </Button>
+      {props.showFollowGpsButton &&
       <MlFollowGps style={{ ...(({ color, ...rest }) => rest)(buttonStyle) }} />
+      }
+      {props.showCenterLocationButton &&
+      <MlCenterPosition style={{ ...(({ color, ...rest }) => rest)(buttonStyle) }} />
+      }
       <ButtonGroup
         orientation="vertical"
         sx={{
@@ -122,18 +144,20 @@ const MlNavigationTools = (props: MlNavigationToolsProps) => {
         }}
       >
         <Button sx={{ ...buttonStyle, color: "#ececec" }} onClick={zoomIn}>
-          <ControlPointIcon
-            sx={{ fontSize: mediaIsMobile ? "1.5em" : "1.2em" }}
-          />
+          <ControlPointIcon sx={{ fontSize: mediaIsMobile ? "1.5em" : "1.2em" }} />
         </Button>
         <Button sx={{ ...buttonStyle, color: "#ececec" }} onClick={zoomOut}>
-          <RemoveCircleOutlineIcon
-            sx={{ fontSize: mediaIsMobile ? "1.5em" : "1.2em" }}
-          />
+          <RemoveCircleOutlineIcon sx={{ fontSize: mediaIsMobile ? "1.5em" : "1.2em" }} />
         </Button>
       </ButtonGroup>
     </div>
   );
 };
 
+MlNavigationTools.defaultProps = {
+  mapId: undefined,
+  showFollowGpsButton: true,
+  showCenterLocationButton: false,
+};
+
 export default MlNavigationTools;

package/src/components/MlTransitionGeoJsonLayer/MlTransitionGeoJsonLayer.tsx

@@ -7,6 +7,7 @@ import useMap from "../../hooks/useMap";
 import { _transitionToGeojson } from "./util/transitionFunctions";
 import MlGeoJsonLayer from "../MlGeoJsonLayer/MlGeoJsonLayer";
 import { Feature, FeatureCollection } from "@turf/turf";
+import { CircleLayerSpecification, FillLayerSpecification, LineLayerSpecification, MapLayerMouseEvent } from "maplibre-gl";
 
 const msPerStep = 50;
 
@@ -15,57 +16,57 @@ interface MlTransitionGeoJsonLayerProps {
    * Id of the target MapLibre instance in mapContext
    */
   mapId: string;
+  /**
+   * GeoJSON data that is supposed to be rendered by this component.
+   */
+  geojson: Feature | FeatureCollection | undefined;
   /**
    * Type of the layer that will be added to the MapLibre instance.
    * Possible values: "line", "circle", "fill"
    */
-  type: string;
+  type?: "fill" | "line" | "circle";
   /**
-   * Layout property object, that is passed to the addLayer call.
+   * Paint property object, that is passed to the addLayer call.
    * Possible props depend on the layer type.
    * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#line
    * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
    * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
    */
-  layout: any;
+  paint?: CircleLayerSpecification['paint'] | FillLayerSpecification['paint'] | LineLayerSpecification['paint'];
   /**
-   * Paint property object, that is passed to the addLayer call.
+   * Layout property object, that is passed to the addLayer call.
    * Possible props depend on the layer type.
    * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#line
    * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
    * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
    */
-  paint: any;
-  /**
-   * Javascript object with optional properties "fill", "line", "circle" to override implicit layer type default paint properties.
-   */
-  defaultPaintOverrides: any;
+  layout?: CircleLayerSpecification['layout'] | FillLayerSpecification['layout'] | LineLayerSpecification['layout'];
   /**
    * Javascript object that is spread into the addLayer commands first parameter.
    */
-  options: any;
+  options?: CircleLayerSpecification | FillLayerSpecification | LineLayerSpecification;
   /**
-   * GeoJSON data that is supposed to be rendered by this component.
+   * Javascript object with optional properties "fill", "line", "circle" to override implicit layer type default paint properties.
    */
-  geojson: Feature | FeatureCollection;
+  defaultPaintOverrides?: { circle?: CircleLayerSpecification['paint'], fill?: FillLayerSpecification['paint'], line?: LineLayerSpecification['paint'] };
   /**
    * Id of an existing layer in the mapLibre instance to help specify the layer order
    * This layer will be visually beneath the layer with the "insertBeforeLayer" id.
    */
   insertBeforeLayer: string;
   /**
-   * Click event handler that is executed whenever a geometry rendered by this component is clicked.
+   * Hover event handler that is executed whenever a geometry rendered by this component is hovered.
    */
-  onClick: Function;
+  onHover?: MapLayerMouseEvent;
   /**
-   * Hover event handler that is executed whenever a geometry rendered by this component is hovered.
+   * Click event handler that is executed whenever a geometry rendered by this component is clicked.
    */
-  onHover: Function;
+  onClick?: MapLayerMouseEvent;
   /**
    * Leave event handler that is executed whenever a geometry rendered by this component is
    * left/unhovered.
    */
-  onLeave: Function;
+  onLeave?: MapLayerMouseEvent;
   /**
    * Creates transition animation whenever the geojson prop changes.
    * Only works with layer type "line" and LineString GeoJSON data.

package/src/components/MlWmsLoader/MlWmsLoader.stories.js

@@ -43,5 +43,5 @@ ExampleConfig.args = {
    * https://www.wms.nrw.de/wms/kitas
    * https://www.wms.nrw.de/geobasis/wms_nw_vdop
    */
-  url: "https://www.wms.nrw.de/wms/kitas",
+  url: "https://www.wms.nrw.de/geobasis/wms_nw_vdop",
 };

package/src/hooks/useLayer.test.js

@@ -0,0 +1,205 @@
+import React, { useContext, useState } from "react";
+import { mount, configure } from "enzyme";
+import MapContext, { MapComponentsProvider } from "../contexts/MapContext";
+import MapLibreMap from "../components/MapLibreMap/MapLibreMap";
+import { waitFor } from "@testing-library/react";
+import { mockMapLibreMethods } from "../setupTests";
+
+import useLayer from "./useLayer";
+
+const UseLayerTestComponent = (props) => {
+  // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
+  useLayer({
+    mapId: props.mapId,
+    layerId: props.layerId || "TestComponent",
+    geojson: props.geojson,
+    options: {
+      paint: props.paint,
+      layout: props.layout || {},
+      type: props.type,
+      ...props.options,
+    },
+    insertBeforeLayer: props.insertBeforeLayer,
+    onHover: props.onHover,
+    onClick: props.onClick,
+    onLeave: props.onLeave,
+  });
+
+  return <></>;
+};
+
+const TestComponent = (props) => {
+  const [includeComponent, setIncludeComponent] = useState(true);
+  const [testType, setTestType] = useState('line');
+
+  return (
+    <>
+      <button
+        className="change_testType"
+        onClick={() => {
+          setTestType('circle');
+        }}
+      >
+        change type
+      </button>
+      <button
+        className="toggle_includeComponent"
+        onClick={() => {
+          setIncludeComponent(!includeComponent);
+        }}
+      >
+        toggle
+      </button>
+      {includeComponent && <UseLayerTestComponent {...props} type={testType} />}
+      <MapLibreMap />
+    </>
+  );
+};
+
+describe("useLayer hook", () => {
+  it("should register 1 event listener 'hover' to the maplibre instance", async () => {
+    var testAttributes = {
+      onHover: () => {},
+    };
+
+    const wrapper = mount(
+      <MapComponentsProvider>
+        <TestComponent {...testAttributes} />
+      </MapComponentsProvider>
+    );
+
+    // MapLibreGlWrapper now subscribes to 4 events events on its own
+    // useLayer always subscribes to 'styledata' to watch whether its representation within the maplibre instance has been removed
+    await waitFor(() => expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(6));
+  });
+  it("should deregister 1 event listener 'hover' to the maplibre instance", async () => {
+    var testAttributes = {
+      onHover: () => {},
+    };
+
+    const wrapper = mount(
+      <MapComponentsProvider>
+        <TestComponent {...testAttributes} />
+      </MapComponentsProvider>
+    );
+
+    wrapper.find(".toggle_includeComponent").simulate("click");
+
+    // useLayer always subscribes to 'styledata' to watch whether its representation within the maplibre instance has been removed
+    await waitFor(() => expect(mockMapLibreMethods.off).toHaveBeenCalledTimes(2));
+  });
+  it("should register 1 event listener 'leave' to the maplibre instance", async () => {
+    var testAttributes = {
+      onLeave: () => {},
+    };
+
+    const wrapper = mount(
+      <MapComponentsProvider>
+        <TestComponent {...testAttributes} />
+      </MapComponentsProvider>
+    );
+
+    // MapLibreGlWrapper now subscribes to 4 events events on its own
+    // useLayer always subscribes to 'styledata' to watch whether its representation within the maplibre instance has been removed
+    await waitFor(() => expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(6));
+  });
+  it("should deregister 1 event listener 'leave' to the maplibre instance", async () => {
+    var testAttributes = {
+      onLeave: () => {},
+    };
+
+    const wrapper = mount(
+      <MapComponentsProvider>
+        <TestComponent {...testAttributes} />
+      </MapComponentsProvider>
+    );
+
+    wrapper.find(".toggle_includeComponent").simulate("click");
+
+    // useLayer always subscribes to 'styledata' to watch whether its representation within the maplibre instance has been removed
+    await waitFor(() => expect(mockMapLibreMethods.off).toHaveBeenCalledTimes(2));
+  });
+
+
+  it("should register 1 event listener 'click' to the maplibre instance", async () => {
+    var testAttributes = {
+      onClick: () => {},
+    };
+
+    const wrapper = mount(
+      <MapComponentsProvider>
+        <TestComponent {...testAttributes} />
+      </MapComponentsProvider>
+    );
+
+    // MapLibreGlWrapper now subscribes to 4 events events on its own
+    // useLayer always subscribes to 'styledata' to watch whether its representation within the maplibre instance has been removed
+    await waitFor(() => expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(6));
+  });
+  it("should deregister 1 event listener 'click' to the maplibre instance", async () => {
+    var testAttributes = {
+      onClick: () => {},
+    };
+
+    const wrapper = mount(
+      <MapComponentsProvider>
+        <TestComponent {...testAttributes} />
+      </MapComponentsProvider>
+    );
+
+    wrapper.find(".toggle_includeComponent").simulate("click");
+
+    // useLayer always subscribes to 'styledata' to watch whether its representation within the maplibre instance has been removed
+    await waitFor(() => expect(mockMapLibreMethods.off).toHaveBeenCalledTimes(2));
+  });
+
+  // if props.type is changed during runtime the hook needs to remove existing additions to the maplibre instance and reinitialize its representation in the maplibre instance
+  it("should deregister 1 event listener 'hover' to the maplibre instance if type is changed during component runtime", async () => {
+    var testAttributes = {
+      onHover: () => {},
+    };
+
+    const wrapper = mount(
+      <MapComponentsProvider>
+        <TestComponent {...testAttributes} />
+      </MapComponentsProvider>
+    );
+
+    wrapper.find(".change_testType").simulate("click");
+
+    // useLayer always subscribes to 'styledata' to watch whether its representation within the maplibre instance has been removed
+    await waitFor(() => expect(mockMapLibreMethods.off).toHaveBeenCalledTimes(2));
+  });
+  it("should deregister 1 event listener 'hover' to the maplibre instance if type is changed during component runtime", async () => {
+    var testAttributes = {
+      onHover: () => {},
+    };
+
+    const wrapper = mount(
+      <MapComponentsProvider>
+        <TestComponent {...testAttributes} />
+      </MapComponentsProvider>
+    );
+
+    wrapper.find(".change_testType").simulate("click");
+
+    // useLayer always subscribes to 'styledata' to watch whether its representation within the maplibre instance has been removed
+    await waitFor(() => expect(mockMapLibreMethods.off).toHaveBeenCalledTimes(2));
+  });
+  it("should deregister 1 event listener 'click' to the maplibre instance if type is changed during component runtime", async () => {
+    var testAttributes = {
+      onClick: () => {},
+    };
+
+    const wrapper = mount(
+      <MapComponentsProvider>
+        <TestComponent {...testAttributes} />
+      </MapComponentsProvider>
+    );
+
+    wrapper.find(".change_testType").simulate("click");
+
+    // useLayer always subscribes to 'styledata' to watch whether its representation within the maplibre instance has been removed
+    await waitFor(() => expect(mockMapLibreMethods.off).toHaveBeenCalledTimes(2));
+  });
+});

package/src/hooks/useLayer.ts

@@ -6,6 +6,9 @@ import { LayerSpecification } from "maplibre-gl";
 
 import MapLibreGlWrapper from "../components/MapLibreMap/lib/MapLibreGlWrapper";
 
+import { MapLayerMouseEvent } from "maplibre-gl";
+import { GeoJSONObject } from "@turf/turf";
+
 type useLayerType = {
   map: MapLibreGlWrapper | undefined;
   layer: LayerSpecification;
@@ -20,11 +23,11 @@ interface useLayerProps {
   idPrefix?: string;
   insertBeforeLayer?: string;
   insertBeforeFirstSymbolLayer?: boolean;
-  geojson?: object;
-  options: LayerSpecification;
-  onHover?: Function;
-  onClick?: Function;
-  onLeave?: Function;
+  geojson?: GeoJSONObject;
+  options: Partial<LayerSpecification>;
+  onHover?: MapLayerMouseEvent;
+  onClick?: MapLayerMouseEvent;
+  onLeave?: MapLayerMouseEvent;
 }
 
 const legalLayerTypes = [
@@ -116,7 +119,7 @@ function useLayer(props: useLayerProps): useLayerType {
 
     layerPaintConfRef.current = JSON.stringify(props.options?.paint);
     layerLayoutConfRef.current = JSON.stringify(props.options?.layout);
-    layerTypeRef.current = props.options.type;
+    layerTypeRef.current = props.options.type as LayerSpecification['type'];
   }, [props, mapHook.map]);
 
   useEffect(() => {
@@ -124,8 +127,8 @@ function useLayer(props: useLayerProps): useLayerType {
 
     if (
       initializedRef.current &&
-      (legalLayerTypes.indexOf(props.options.type) === -1 ||
-        (legalLayerTypes.indexOf(props.options.type) !== -1 &&
+      (legalLayerTypes.indexOf(props.options.type as LayerSpecification['type']) === -1 ||
+        (legalLayerTypes.indexOf(props.options.type as LayerSpecification['type']) !== -1 &&
           props.options.type === layerTypeRef.current))
     ) {
       return;

package/tsconfig.json

@@ -1,15 +1,33 @@
 {
   "compilerOptions": {
+    "checkJs": false,
+    "esModuleInterop": true,
+    "importHelpers": false,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": false,
+    "types": [
+      "node",
+      "jest",
+      "geojson"
+    ],
     "outDir": "build/esm",
     "module": "esnext",
     "target": "es5",
-    "lib": ["es6", "dom", "es2016", "es2017"],
+    "lib": [
+      "es6",
+      "dom",
+      "es2016",
+      "es2017"
+    ],
     "jsx": "react",
     "declaration": true,
+    "declarationDir": "./dist",
     "moduleResolution": "node",
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "esModuleInterop": true,
     "noImplicitReturns": true,
     "noImplicitThis": true,
     "noImplicitAny": true,
@@ -19,13 +37,23 @@
     "allowJs": true,
     "baseUrl": ".",
     "paths": {
-      "!maplibre-gl": ["node_modules/maplibre-gl"] // This mapping is relative to "baseUrl"
+      "!maplibre-gl": [
+        "node_modules/maplibre-gl"
+      ] // This mapping is relative to "baseUrl"
     }
   },
-  "include": ["src", "src/custom.d.tsx"],
-  "exclude": ["node_modules", "lib"],
+  "include": [
+    "src",
+    "src/custom.d.tsx"
+  ],
+  "exclude": [
+    "node_modules",
+    "lib"
+  ],
   "typedocOptions": {
-    "entryPoints": ["src/index.ts"],
+    "entryPoints": [
+      "src/index.ts"
+    ],
     "out": "docs",
   }
-}
+}