@mapcomponents/react-maplibre 0.1.44 → 0.1.48

package/public/catalogue/mc_meta.json

@@ -0,0 +1 @@
+{"MlCreatePdfButton":{"name":"MlCreatePdfButton","title":"Export PDF","description":"Creates a PDF file with the current map view.","i18n":{"de":{"title":"PDF Export","description":"Erzeugt eine PDF Datei aus der aktuellen Kartenansicht."}},"tags":["Map add-on"],"category":"add-ons","type":"component","price":5000},"MlFeatureEditor":{"name":"MlFeatureEditor","title":"Sketch tools","description":"Enables the editing of Point, Linestring and Polygon GeoJSON Files.","i18n":{"de":{"title":"Skizzen Werkzeug","description":"Erzeugen und Bearbeiten von Objekten."}},"tags":["Map add-on"],"category":"add-ons","type":"component","price":0},"MlFillExtrusionLayer":{"name":"MlFillExtrusionLayer","title":"Simple 3D buildings","description":"Draws a level, out of the building outline and the height, extrudes 3D Objects as buildings.","i18n":{"de":{"title":"3D Gebäude","description":"Zeichnet eine Ebene mit einfach, aus den Gebäudeumrissen und anhand der Höhen, extrudierten 3D Objekten als Gebäude."}},"tags":["Map add-on"],"category":"add-ons","type":"component","price":5000},"MlFollowGps":{"name":"MlFollowGps","title":"GPS tracker","description":"","i18n":{"de":{"title":"GPS-Tracker","description":""}},"tags":[],"category":"","type":"component","price":0},"MlGeoJsonLayer":{"name":"MlGeoJsonLayer","title":"GeoJSON layer","description":"","i18n":{"de":{"title":"GeoJSON Darstellung","description":""}},"tags":[],"category":"","type":"component","price":0},"MlGPXViewer":{"name":"MlGPXViewer","title":"GPX viewer","description":"","i18n":{"de":{"title":"GPX Darstellung","description":""}},"tags":["Map add-on"],"category":"add-ons","type":"component","price":5000},"MlLayerMagnify":{"name":"MlLayerMagnify","title":"Map magnifier","description":"Hides a part of a map that is superimposed on another MapLibre map.","i18n":{"de":{"title":"Kartenlupe","description":"Kartenlupe blendet einen Teil einer, von zwei übereinanderliegenden, MapLibre Karten aus."}},"tags":["Map add-on"],"category":"add-ons","type":"component","price":5000},"MlLayerSwipe":{"name":"MlLayerSwipe","title":"Map curtain","description":"Map curtain hides an area of the top one of two overlaying MapLibre maps.","i18n":{"de":{"title":"Kartenvorhang","description":"Kartenvorhangs blendet einen Teil einer, von zwei übereinanderliegenden, MapLibre Karten aus."}},"tags":["Map add-on"],"category":"add-ons","type":"component","price":5000},"MlMeasureTool":{"name":"MlMeasureTool","title":"Measure tool","description":"","i18n":{"de":{"title":"Messwerkzeug","description":""}},"tags":[],"category":"","type":"component","price":0},"MlNavigationCompass":{"name":"MlNavigationCompass","title":"Compass","description":"","i18n":{"de":{"title":"Kompass","description":""}},"tags":[],"category":"","type":"component","price":0},"MlNavigationTools":{"name":"MlNavigationTools","title":"Navigation tools","description":"","i18n":{"de":{"title":"Navigationswerkzeuge","description":""}},"tags":[],"category":"","type":"component","price":0},"MlScaleReference":{"name":"MlScaleReference","title":"Reference scale","description":"","i18n":{"de":{"title":"Maßstabsreferenz","description":""}},"tags":[],"category":"","type":"component","price":0},"MlSpatialElevationProfile":{"name":"MlSpatialElevationProfile","title":"3D height profile","description":"Draws a level, out of the building outline and the height, extrudes 3D Objects as buildings.","i18n":{"de":{"title":"3D Höhenprofil","description":"Zeichnet eine Ebene mit einfach, aus den Gebäudeumrissen und anhand der Höhen, extrudierten 3D Objekten als Gebäude."}},"tags":["Map add-on"],"category":"add-ons","type":"component","price":5000},"MlThreeJsLayer":{"name":"MlThreeJsLayer","title":"3D Model","description":"Layer Component, that makes it possible to show 3D Models on the map.","i18n":{"de":{"title":"3D Modelle","description":"Layer Component, das es ermöglicht 3D Modelle auf der Karte darzustellen."}},"tags":["Map layer"],"category":"layer","type":"component","price":5000},"MlTransitionGeoJsonLayer":{"name":"MlTransitionGeoJsonLayer","title":"GeoJSON layer","description":"","i18n":{"de":{"title":"GeoJSON Ebene","description":""}},"tags":[],"category":"","type":"component","price":0},"MlVectorTileLayer":{"name":"MlVectorTileLayer","title":"Vector tile layer","description":"Adds a vector tile layer to the map","i18n":{"de":{"title":"Vector Tiles","description":"Baustein: Vektorenkacheln/Vector Tiles (der Anwendung/Karte hinzufügen)"}},"tags":["Map layer"],"category":"layer","type":"component","price":5000},"MlWmsLoader":{"name":"MlWmsLoader","title":"WMS loader","description":"","i18n":{"de":{"title":"WMS Feature Info","description":""}},"tags":[],"category":"","type":"component","price":0}}

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

@@ -14,16 +14,16 @@ interface MlFeatureEditorProps {
   /**
    * Id of the target MapLibre instance in mapContext
    */
-  mapId: string;
+  mapId?: string;
   /**
    * 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;
+  insertBeforeLayer?: string;
   /**
    * Input GeoJson data at initialization
    */
-  geojson: any;
+  geojson?: any;
   /**
    * Callback function that is called each time the GeoJson data within has changed within MlFeatureEditor.
    * First parameter is the new GeoJson feature.

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,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",