@mapcomponents/react-maplibre 0.1.45 → 0.1.49

package/src/components/MlMeasureTool/MlMeasureTool.doc.de.md

@@ -0,0 +1,3 @@
+# Component Beschreibung
+
+Beschreibungstext

package/src/components/MlMeasureTool/MlMeasureTool.meta.json

@@ -0,0 +1,15 @@
+{
+  "name": "MlMeasureTool",
+  "title": "Measure tool",
+  "description": "",
+  "i18n": {
+    "de": {
+      "title": "Messwerkzeug",
+      "description": ""
+    }
+  },
+  "tags": [],
+  "category": "",
+  "type": "component",
+  "price": 0
+}

package/src/components/MlMeasureTool/MlMeasureTool.stories.js

@@ -0,0 +1,96 @@
+import React, { useRef, useState } from "react";
+
+import MlMeasureTool from "./MlMeasureTool";
+
+import mapContextDecorator from "../../decorators/MapContextDecorator";
+import StraightenOutlinedIcon from "@mui/icons-material/StraightenOutlined";
+import SquareFootOutlinedIcon from "@mui/icons-material/SquareFootOutlined";
+import Grid from "@mui/material/Grid";
+import Box from "@mui/material/Box";
+import { MenuItem, Select } from "@mui/material";
+
+const storyoptions = {
+  title: "MapComponents/MlMeasureTool",
+  component: MlMeasureTool,
+  argTypes: {},
+  decorators: mapContextDecorator,
+};
+export default storyoptions;
+
+const Template = (args) => {
+  const [unit, setUnit] = useState("kilometers");
+  const handleChange = (event) => {
+    setUnit(event.target.value);
+  };
+
+  return (
+    <div style={{ width: "200px", position: "absolute", zIndex: 105 }}>
+      <Select
+        name={"units"}
+        onChange={handleChange}
+        label={"Unit for measurement"}
+        defaultValue={"kilometers"}
+      >
+        <MenuItem value={"kilometers"}>Kilometers</MenuItem>
+        <MenuItem value={"miles"}>Miles</MenuItem>
+      </Select>
+      <Grid
+        container
+        style={{
+          textAlign: "left",
+          alignItems: "center",
+        }}
+      >
+        <SquareFootOutlinedIcon />
+        <h4 style={{ margin: "0px" }}>Measure Polygon</h4>
+      </Grid>
+
+      <Box m={2} style={{ textAlign: "left" }}>
+        Area: <MlMeasureTool measureType={"polygon"} unit={unit} />
+      </Box>
+    </div>
+  );
+};
+
+const LineTemplate = (args) => {
+  const [unit, setUnit] = useState("kilometers");
+  const handleChange = (event) => {
+    setUnit(event.target.value);
+  };
+
+  return (
+    <div style={{ width: "200px", position: "absolute", zIndex: 105 }}>
+      <Select
+        name={"units"}
+        onChange={handleChange}
+        label={"Unit for measurement"}
+        defaultValue={"kilometers"}
+      >
+        <MenuItem value={"kilometers"}> Kilometers</MenuItem>
+        <MenuItem value={"miles"}> Miles</MenuItem>
+      </Select>
+      <Grid
+        container
+        style={{
+          textAlign: "left",
+          alignItems: "center",
+        }}
+      >
+        <StraightenOutlinedIcon />
+        <h4 style={{ margin: "0px" }}>Measure Line</h4>
+      </Grid>
+
+      <Box m={2} style={{ textAlign: "left" }}>
+        Length: <MlMeasureTool measureType={"line"} unit={unit} />
+      </Box>
+    </div>
+  );
+};
+
+export const MeasureLine = LineTemplate.bind({});
+MeasureLine.parameters = {};
+MeasureLine.args = {};
+
+export const MeasurePolygon = Template.bind({});
+MeasurePolygon.parameters = {};
+MeasurePolygon.args = {};

package/src/components/MlMeasureTool/MlMeasureTool.tsx

@@ -0,0 +1,60 @@
+import React, { useEffect, useState } from "react";
+import MlFeatureEditor from "../MlFeatureEditor/MlFeatureEditor";
+import * as turf from "@turf/turf";
+
+interface MlMeasureToolProps {
+  /**
+   * String that specify if the Tool measures an area ("polygon") or length ("line")
+   */
+  measureType?: string;
+  /**
+   * String that dictates which unit of measurement is used
+   */
+  unit?: turf.Units;
+}
+
+//const unitSquareConvert = {
+//  kilometers: 1,
+//  miles: 1 / 2.58998811,
+//};
+function getUnitSquareMultiplier(measureType:string | undefined) {
+  return measureType === "miles" ? 1 / 2.58998811 : 1;
+}
+function getUnitLabel(measureType:string | undefined) {
+  return measureType === "miles" ? 'mi' : 'km';
+}
+
+const MlMeasureTool = (props: MlMeasureToolProps) => {
+  const [length, setLength] = useState(0);
+  const [currentFeatures, setCurrentFeatures] = useState([undefined]);
+
+  useEffect(() => {
+    if (currentFeatures[0]) {
+      setLength(
+        props.measureType === "polygon"
+          ? (turf.area(currentFeatures[0]) / 1000000) * getUnitSquareMultiplier(props.unit)
+          : turf.length(currentFeatures[0], { units: props.unit })
+      );
+    }
+  }, [props.unit, currentFeatures]);
+
+  return (
+    <>
+      <MlFeatureEditor
+        onChange={(features:any) => {
+          setCurrentFeatures(features);
+        }}
+        mode={props.measureType === "polygon" ? "custom_polygon" : "draw_line_string"}
+      />
+      {length.toFixed(2)} {getUnitLabel(props.unit)}
+      {props.measureType === "polygon" ? "²" : ""}
+    </>
+  );
+};
+
+MlMeasureTool.defaultProps = {
+  mapId: undefined,
+  measureType: "line",
+  unit: "kilometers",
+};
+export default MlMeasureTool;

package/src/components/MlVectorTileLayer/MlVectorTileLayer.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";
 
@@ -24,18 +24,20 @@ const MlVectorTileLayer = (props: MlVectorTileLayerProps) => {
   });
 
   const layerIdsRef = useRef({});
-  const layerId = useRef(
-    props.layerId || "MlVectorTileLayer-" + mapHook.componentId
-  );
+  const layerId = useRef(props.layerId || "MlVectorTileLayer-" + mapHook.componentId);
   const layerPaintConfsRef = useRef({});
   const layerLayoutConfsRef = useRef({});
   const initializedRef = useRef(false);
 
-  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();
+    }
+
     // Add the new layer to the openlayers instance once it is available
     mapHook.map.addSource(
       layerId.current,
@@ -72,12 +74,28 @@ const MlVectorTileLayer = (props: MlVectorTileLayerProps) => {
         mapHook.componentId
       );
       layerPaintConfsRef.current[key] = JSON.stringify(props.layers[key].paint);
-      layerLayoutConfsRef.current[key] = JSON.stringify(
-        props.layers[key].layout
+      layerLayoutConfsRef.current[key] = JSON.stringify(props.layers[key].layout);
+
+      // recreate layer if style has changed
+      mapHook.map.on(
+        "styledata",
+        () => {
+          if (initializedRef.current && !mapHook.map?.map.getSource(layerId.current)) {
+            console.log("Recreate Layer " + layerId.current);
+            createLayer();
+          }
+        },
+        mapHook.componentId
       );
     }
   }, [mapHook.map, props]);
 
+  useEffect(() => {
+    if (initializedRef.current) return;
+
+    createLayer();
+  }, [createLayer]);
+
   useEffect(() => {
     if (!mapHook.map || !initializedRef.current) return;
     // initialize the layer and add it to the MapLibre-gl instance or do something else with it

package/src/components/MlWmsLayer/MlWmsLayer.stories.js

@@ -4,7 +4,7 @@ import MlWmsLayer from "./MlWmsLayer";
 import TopToolbar from "../../ui_components/TopToolbar";
 import Button from "@mui/material/Button";
 
-import multiMapContextDecorator from "../../decorators/MultiMapContextDecorator";
+import mapContextDecorator from "../../decorators/MapContextDecorator";
 
 import "../../App.css";
 
@@ -15,7 +15,7 @@ const storyoptions = {
     url: {},
     layer: {},
   },
-  decorators: multiMapContextDecorator,
+  decorators: mapContextDecorator,
 };
 export default storyoptions;
 
@@ -41,7 +41,6 @@ const Template = (props) => {
 export const ExampleConfig = Template.bind({});
 ExampleConfig.parameters = {};
 ExampleConfig.args = {
-  mapId: "map_2",
   url: "https://www.wms.nrw.de/geobasis/wms_nw_uraufnahme",
   urlParameters: {
     layers: "nw_uraufnahme_rw",

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.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/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.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

@@ -60,7 +60,7 @@ function useLayer(props: useLayerProps): useLayerType {
     if (!mapHook.map) return;
 
     if (mapHook.map.map.getLayer(layerId.current)) {
-      mapHook.map.map.removeLayer(layerId.current);
+      mapHook.cleanup();
     }
     if (mapHook.map.map.getSource(layerId.current)) {
       mapHook.map.map.removeSource(layerId.current);
@@ -102,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;
@@ -164,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
         );