@mapcomponents/react-maplibre 0.1.45 → 0.1.46

package/src/components/MapLibreMap/MapLibreMap.stories.js

@@ -1,7 +1,11 @@
-import React from "react";
+import React, { useState } from "react";
 
 import MapLibreMap from "./MapLibreMap";
 import { MapComponentsProvider } from "../../contexts/MapContext";
+import MlGeoJsonLayer from "../MlGeoJsonLayer/MlGeoJsonLayer";
+import { Button } from "@mui/material";
+import TopToolbar from "../../ui_components/TopToolbar";
+import sample_geojson_1 from "../MlGeoJsonLayer/assets/sample_1.json";
 
 const storyoptions = {
   title: "Core/MapLibreMap",
@@ -16,30 +20,81 @@ const storyoptions = {
 };
 export default storyoptions;
 
-const Template = (args) => (
-  <MapComponentsProvider>
-    <MapLibreMap
-      options={args.options}
-      style={{
-        position: "absolute",
-        height: "100vh",
-        width: "100vw",
-        top: 0,
-        right: 0,
-        left: 0,
-        bottom: 0,
-        zIndex: 100,
-      }}
-    />
-  </MapComponentsProvider>
-);
+const Template = (args) => {
+  return (
+    <MapComponentsProvider>
+      <MapLibreMap
+        options={args.options}
+        style={{
+          position: "absolute",
+          height: "100vh",
+          width: "100vw",
+          top: 0,
+          right: 0,
+          left: 0,
+          bottom: 0,
+          zIndex: 100,
+        }}
+      />
+    </MapComponentsProvider>
+  );
+};
 
 export const ExampleConfig = Template.bind({});
 ExampleConfig.args = {
   options: {
     style: "https://wms.wheregroup.com/tileserver/style/osm-bright.json",
     center: [8.607, 53.1409349],
-    zoom: 14
+    zoom: 14,
+  },
+};
+
+const StyleChangeTemplate = (args) => {
+  const [activeStyle, setActiveStyle] = useState(
+    "https://wms.wheregroup.com/tileserver/style/osm-fiord-color.json"
+  );
+
+  return (
+    <MapComponentsProvider>
+      <TopToolbar>
+        <Button
+          onClick={() =>
+            setActiveStyle("https://wms.wheregroup.com/tileserver/style/osm-bright.json")
+          }
+        >
+          OSM-Bright
+        </Button>
+        <Button
+          onClick={() =>
+            setActiveStyle("https://wms.wheregroup.com/tileserver/style/osm-fiord-color.json")
+          }
+        >
+          OSM-Fiord-Color
+        </Button>
+      </TopToolbar>
+      <MapLibreMap
+        options={{ ...args.options, style: activeStyle }}
+        style={{
+          position: "absolute",
+          height: "100vh",
+          width: "100vw",
+          top: 0,
+          right: 0,
+          left: 0,
+          bottom: 0,
+          zIndex: 100,
+        }}
+      />
+      <MlGeoJsonLayer type="line" geojson={sample_geojson_1} />
+    </MapComponentsProvider>
+  );
+};
+
+export const StyleChangeConfig = StyleChangeTemplate.bind({});
+StyleChangeConfig.args = {
+  options: {
+    zoom: 14.5,
+    center: [7.0851268, 50.73884],
   },
 };
-ExampleConfig.parameters = {};
+StyleChangeConfig.parameters = {};

package/src/components/MapLibreMap/MapLibreMap.tsx

@@ -40,7 +40,7 @@ const defaultProps: MapLibreMapProps = {
           id: "background",
           type: "background",
           paint: {
-            "background-color": "rgba(80,0,0,0)",
+            "background-color": "rgba(0,0,0,0)",
           },
         },
       ],
@@ -66,6 +66,7 @@ const MapLibreMap: FC<MapLibreMapProps> = (props: MapLibreMapProps) => {
 
   const mapIdRef = useRef(props.mapId);
   const initializedRef = useRef(false);
+  const currentStyle = useRef(props.options?.style);
 
   useEffect(() => {
     let mapId = mapIdRef.current;
@@ -101,6 +102,15 @@ const MapLibreMap: FC<MapLibreMapProps> = (props: MapLibreMapProps) => {
     }
   }, [props.options, props.mapId]);
 
+  useEffect(() => {
+    if (map.current?.map && props?.options?.style && currentStyle.current !== props.options.style) {
+      console.log("set style");
+      currentStyle.current = props.options.style;
+      map.current.map.setStyle(props.options.style);
+    }
+    // @ts-ignore: props.options is either passed or populated with default values
+  }, [props.options.style])
+
   return <div ref={mapContainer as RefObject<HTMLDivElement>} className="mapContainer" style={props.style} />;
 };
 

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

@@ -213,7 +213,7 @@ class MapLibreGlWrapper {
        */
       buildLayerObjects: () => {
         // @ts-ignore
-        return self.style._order
+        return self.map.style._order
           .map((layerId: string) => {
             return self.wrapper.buildLayerObject(
               self.map.style._layers[layerId]
@@ -487,7 +487,7 @@ class MapLibreGlWrapper {
       this[item] = (...props: any[]) => {
         if (
           self.map &&
-          this.map.style &&
+          self.map.style &&
           typeof self.map.style[item] === "function"
         ) {
           self.map.style[item](...props);

package/src/components/MlImageMarkerLayer/MlImageMarkerLayer.test.js

@@ -3,7 +3,7 @@ import { uuid_regex } from "../../setupTests";
 
 import MlImageMarkerLayer from "./MlImageMarkerLayer";
 
-const testComponent = <MlImageMarkerLayer options={{ source: {} }} imgSrc="testImage" />;
+const testComponent = <MlImageMarkerLayer options={{ source: {} }} />;
 
 layerRemovalTest(
   "<MlImageMarkerLayer />",

package/src/components/MlImageMarkerLayer/MlImageMarkerLayer.tsx

@@ -1,7 +1,7 @@
 import React, { useRef, useCallback, useEffect } from "react";
 
 import { GeoJSONSource } from "maplibre-gl";
-import useMap from "../../hooks/useMap";
+import useMap, { useMapType } from "../../hooks/useMap";
 
 interface MlImageMarkerLayerProps {
   /**
@@ -37,12 +37,12 @@ const MlImageMarkerLayer = (props: MlImageMarkerLayerProps) => {
     waitForLayer: props.insertBeforeLayer,
   });
 
-  const layerInitializedRef = useRef(false);
+  const initializedRef = useRef(false);
+  const recreationInProgress = useRef(false);
   const imageIdRef = useRef(props.imageId || "img_" + new Date().getTime());
-  const layerId = useRef(
-    props.layerId || "MlImageMarkerLayer-" + mapHook.componentId
-  );
+  const layerId = useRef(props.layerId || "MlImageMarkerLayer-" + mapHook.componentId);
 
+  // effect to sync Layer paint & layout properties
   useEffect(() => {
     if (
       !mapHook.map ||
@@ -50,32 +50,53 @@ const MlImageMarkerLayer = (props: MlImageMarkerLayerProps) => {
       !props.options
     )
       return;
-    // the MapLibre-gl instance (mapContext.map) is accessible here
-    // initialize the layer and add it to the MapLibre-gl instance or do something else with it
+
     var key;
 
     if (props.options.layout) {
       for (key in props.options.layout) {
-        mapHook.map.map.setLayoutProperty(
-          layerId.current,
-          key,
-          props.options.layout[key]
-        );
+        mapHook.map.map.setLayoutProperty(layerId.current, key, props.options.layout[key]);
       }
     }
     if (props.options.paint) {
       for (key in props.options.paint) {
-        mapHook.map.map.setPaintProperty(
-          layerId.current,
-          key,
-          props.options.paint[key]
-        );
+        mapHook.map.map.setPaintProperty(layerId.current, key, props.options.paint[key]);
       }
     }
   }, [props.options, layerId.current, props.mapId]);
 
-  const addLayer = useCallback(() => {
-    if(!mapHook.map)return;
+  const createImage = (mapHook: useMapType, props: MlImageMarkerLayerProps, callback: Function) => {
+    if (!mapHook.map) {
+      initializedRef.current = false;
+
+      return;
+    }
+
+    if (props.imgSrc && !mapHook.map.map.hasImage(imageIdRef.current)) {
+      mapHook.map.map.loadImage(props.imgSrc, function (error, image) {
+        if (error) throw error;
+
+        if (!mapHook.map || mapHook.map.map.hasImage(imageIdRef.current)) return;
+
+        mapHook.map.addImage(imageIdRef.current, image, mapHook.componentId);
+
+        if (typeof callback === "function") {
+          callback();
+        }
+      });
+    } else {
+      if (typeof callback === "function") {
+        callback();
+      }
+    }
+  };
+
+  const createLayer = (
+    mapHook: useMapType,
+    props: MlImageMarkerLayerProps,
+    createMapLibreElements: Function
+  ) => {
+    if (!props.options || !mapHook.map || mapHook.map?.map.getLayer(layerId.current)) return;
 
     let tmpOptions = {
       id: layerId.current,
@@ -83,31 +104,55 @@ const MlImageMarkerLayer = (props: MlImageMarkerLayerProps) => {
       ...props.options,
     };
     tmpOptions.layout["icon-image"] = imageIdRef.current;
-    mapHook.map.addLayer(
-      tmpOptions,
-      props.insertBeforeLayer,
+    mapHook.map.addLayer(tmpOptions, props.insertBeforeLayer, mapHook.componentId);
+
+    // recreate layer if map style.json has changed
+    mapHook.map.on(
+      "styledata",
+      () => {
+        if (
+          initializedRef.current &&
+          !mapHook.map?.map.getLayer(layerId.current) &&
+          !recreationInProgress.current
+        ) {
+          initializedRef.current = false;
+          recreationInProgress.current = true;
+          console.log("Recreate Layer " + layerId.current);
+          createMapLibreElements();
+        }
+      },
       mapHook.componentId
     );
-  }, [props, mapHook.map]);
 
-  useEffect(() => {
-    if (!props.options || !mapHook.map || layerInitializedRef.current)
+    if (recreationInProgress.current) {
+      recreationInProgress.current = false;
+    }
+  };
+
+  const createMapLibreElements = useCallback(() => {
+    if (!mapHook.map || initializedRef.current || mapHook.map?.map.getLayer(layerId.current))
       return;
 
-    layerInitializedRef.current = true;
+    initializedRef.current = true;
 
-    if (props.imgSrc) {
-      mapHook.map.map.loadImage(props.imgSrc, function (error, image) {
-        if (error) throw error;
-        
-        if(!mapHook.map)return;
+    if (recreationInProgress.current) {
+      mapHook.cleanup();
+    }
 
-        mapHook.map.addImage(imageIdRef.current, image, mapHook.componentId);
+    if (props.imgSrc) {
+      createImage(mapHook, props, () => {
+        createLayer(mapHook, props, createMapLibreElements);
       });
+    } else {
+      createLayer(mapHook, props, createMapLibreElements);
     }
+  }, [props, mapHook]);
 
-    addLayer();
-  }, [mapHook.map, addLayer, props]);
+  useEffect(() => {
+    if (initializedRef.current) return;
+
+    createMapLibreElements();
+  }, [createMapLibreElements]);
 
   useEffect(() => {
     if (
@@ -118,9 +163,9 @@ const MlImageMarkerLayer = (props: MlImageMarkerLayerProps) => {
       return;
     }
 
-    (mapHook.map.map
-      .getSource(layerId.current) as GeoJSONSource)
-      .setData(props.options.source.data);
+    (mapHook.map.map.getSource(layerId.current) as GeoJSONSource).setData(
+      props.options.source.data
+    );
   }, [props.options.source.data, props]);
 
   return <></>;

package/src/components/MlLayerSwitcher/MlLayerSwitcher.js

@@ -1,6 +1,6 @@
 import "./MlLayerSwitcher.css";
 //External
-import { useEffect, useContext, useState } from "react";
+import React, { useEffect, useContext, useState } from "react";
 import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
 import { Card, CardContent, Typography, Box } from "@mui/material";

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,67 @@
+import React 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";
+
+const storyoptions = {
+  title: "MapComponents/MlMeasureTool",
+  component: MlMeasureTool,
+  argTypes: {
+  },
+  decorators: mapContextDecorator,
+};
+export default storyoptions;
+
+const Template = (args) => (
+  <div style={{ width: "200px", position: "absolute", zIndex:105 }}>
+    <Grid
+      container
+      style={{
+        textAlign: "left",
+        alignItems: "center",
+      }}
+    >
+      <SquareFootOutlinedIcon />
+
+      <h4 style={{ margin: "0px" }}>Measure Polygon</h4>
+    </Grid>
+
+    <Box m={2} style={{ textAlign: "left" }}>
+      <MlMeasureTool measureType={"polygon"} />
+    </Box>
+  </div>
+)
+
+const LineTemplate = (args) => (
+  <div style={{ width: "200px", position: "absolute", zIndex:105, }}>
+    <Grid
+      container
+      style={{
+        textAlign: "left",
+        alignItems: "center",
+      }}
+    >
+      <StraightenOutlinedIcon />
+
+      <h4 style={{ margin: "0px" }}>Measure Line</h4>
+    </Grid>
+
+    <Box m={2} style={{ textAlign: "left" }}>
+      <MlMeasureTool measureType={"line"} />
+    </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,33 @@
+import React, { 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;
+}
+
+const MlMeasureTool = (props: MlMeasureToolProps) => {
+  const [length, setLength] = useState(0)
+
+  return (
+    <>
+      <MlFeatureEditor
+        onChange={(features) => {
+          console.log(features);
+          if(features[0]) {
+            setLength(props.measureType === "polygon" ? turf.area(features[0]) / 1000000 : turf.length(features[0]));
+          }}}
+        mode = {props.measureType === "polygon" ? "custom_polygon" : "draw_line_string"}
+      />
+      {props.measureType === "polygon" ? "Area" : "Length"}: {length.toFixed(2)} {props.measureType === "polygon" ? "km²" : "km"}
+  </>);
+};
+
+MlMeasureTool.defaultProps = {
+  mapId: undefined,
+  measureType: "line",
+};
+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;