@mapcomponents/react-maplibre 0.1.45 → 0.1.49

package/dist/setupTests.d.ts

@@ -0,0 +1,12 @@
+export var uuid_regex: string;
+export namespace mockMapLibreMethods {
+    const on: any;
+    const off: any;
+    const addControl: any;
+    const removeControl: any;
+    const hasControl: any;
+    function getCanvas(): HTMLCanvasElement;
+    function getContainer(): {
+        style: {};
+    };
+}

package/dist/stories/components/Readme.d.ts

@@ -0,0 +1,2 @@
+export default Readme;
+declare function Readme(): JSX.Element;

package/dist/ui_components/ImageLoader.d.ts

@@ -0,0 +1,2 @@
+export default ImageLoader;
+declare function ImageLoader(props: any): JSX.Element;

package/dist/ui_components/Legend.d.ts

@@ -0,0 +1 @@
+export default function Legend(props: any): JSX.Element;

package/dist/ui_components/LoadingOverlay.d.ts

@@ -0,0 +1,2 @@
+export default LoadingOverlay;
+declare function LoadingOverlay(): JSX.Element;

package/dist/ui_components/LoadingOverlayContext.d.ts

@@ -0,0 +1,11 @@
+export const LoadingOverlayContext: React.Context<{}>;
+export function LoadingOverlayProvider({ children }: {
+    children: any;
+}): JSX.Element;
+export namespace LoadingOverlayProvider {
+    namespace propTypes {
+        const children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+    }
+}
+import React from "react";
+import PropTypes from "prop-types";

package/dist/ui_components/Sidebar.d.ts

@@ -0,0 +1 @@
+export default function Sidebar(props: any): JSX.Element;

package/dist/ui_components/Tooltip.d.ts

@@ -0,0 +1 @@
+export default function Legend(props: any): JSX.Element;

package/dist/ui_components/TopToolbar.d.ts

@@ -0,0 +1 @@
+export default function TopToolbar(props: any): JSX.Element;

package/dist/util/index.d.ts

@@ -0,0 +1,3 @@
+import layerRemovalTest from "./layerRemovalTest";
+import sourceRemovalTest from "./sourceRemovalTest";
+export { layerRemovalTest, sourceRemovalTest };

package/dist/util/layerRemovalTest.d.ts

@@ -0,0 +1,2 @@
+export default layerRemovalTest;
+declare function layerRemovalTest(ComponentName: any, Component: any, regexLayerNameTest: any, humanReadableLayerName: any, beforeWrapperInit: any, afterWrapperInit: any, createWrapperFunction: any): void;

package/dist/util/sourceRemovalTest.d.ts

@@ -0,0 +1,2 @@
+export default sourceRemovalTest;
+declare function sourceRemovalTest(ComponentName: any, Component: any, regexLayerNameTest: any, humanReadableLayerName: any, beforeWrapperInit: any, afterWrapperInit: any): void;

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@mapcomponents/react-maplibre",
-  "version": "0.1.45",
+  "version": "0.1.49",
   "main": "index.js",
   "license": "MIT",
   "module": "dist/index.esm.js",
   "source": "src/index.ts",
+  "types": "dist/index.d.ts",
   "scripts": {
     "build": "rollup -c",
     "start": "start-storybook -p 6006 -s public",

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

@@ -16,7 +16,7 @@ type MapLibreMapProps = {
    * See https://maplibre.org/maplibre-gl-js-docs/api/map/ for a formal documentation of al
    * available properties.
    */
-  options?: MapOptionsType;
+  options?: Partial<MapOptionsType>;
   /**
    * css style definition passed to the map container DOM element
    */
@@ -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.stories.js

@@ -15,11 +15,10 @@ export default storyoptions;
 const Template = (args) => {
   return (
     <MlFeatureEditor
-      debug={true}
+      {...args}
       onChange={(features) => {
         console.log(features);
       }}
-      {...args}
     />
   );
 };

package/src/components/MlFeatureEditor/MlFeatureEditor.test.js

@@ -82,7 +82,7 @@ describe("<MlFeatureEditor>", () => {
     );
 
     // MapLibreGlWrapper now subscribes to "data", "move" events on its own
-    await waitFor(() => expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(6));
+    await waitFor(() => expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(7));
   });
 
   it("should deregister 2 event listeners to the maplibre instance", async () => {
@@ -93,11 +93,11 @@ describe("<MlFeatureEditor>", () => {
     );
 
     // MapLibreGlWrapper now subscribes to "data", "move" events on its own
-    expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(6);
+    expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(7);
 
     wrapper.find(".toggle_layer_visible").simulate("click");
 
-    expect(mockMapLibreMethods.off).toHaveBeenCalledTimes(2);
+    expect(mockMapLibreMethods.off).toHaveBeenCalledTimes(3);
   });
 
   it("should add MapBox-Gl-draw instance using map.addControl to the maplibre instance", async () => {

package/src/components/MlFeatureEditor/MlFeatureEditor.tsx

@@ -9,26 +9,25 @@ import CustomDirectSelectMode from "./custom-direct-select-mode.js";
 
 import useMap from "../../hooks/useMap";
 
-
 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.
    */
-  onChange?: Function
+  onChange?: Function;
   /**
    * Feature editor mode:
    * - "custom_select" edit features
@@ -36,40 +35,30 @@ interface MlFeatureEditorProps {
    * - "draw_point" draw Point
    * - "draw_line_string" draw LineString
    */
-  mode?:string
+  mode?: string;
 }
 
 /**
  * GeoJson Feature editor that allows to create or manipulate GeoJson data
  */
-const MlFeatureEditor = (props:MlFeatureEditorProps) => {
+const MlFeatureEditor = (props: MlFeatureEditorProps) => {
   const draw = useRef<MapboxDraw>();
   const mapHook = useMap({
     mapId: props.mapId,
     waitForLayer: props.insertBeforeLayer,
   });
-  const onChangeRef = useRef(props.onChange);
 
   const drawToolsInitialized = useRef(false);
   const [drawToolsReady, setDrawToolsReady] = useState(false);
 
-  const [mouseUpTrigger, setMouseUpTrigger] = useState(0);
 
-  const modeChangeHandler = (e:any) => {
+  const modeChangeHandler = (e: any) => {
     console.log("MlFeatureEditor mode change to " + e.mode);
     //setDrawMode(e.mode);
   };
 
-  const mouseUpHandler = () => {
-    setMouseUpTrigger(Math.random());
-  };
-
   useEffect(() => {
-    if (
-      mapHook.map &&
-      !drawToolsInitialized.current
-    ) {
-      
+    if (mapHook.map && !drawToolsInitialized.current) {
       drawToolsInitialized.current = true;
 
       if (
@@ -96,34 +85,47 @@ const MlFeatureEditor = (props:MlFeatureEditorProps) => {
         ),
       });
 
-      mapHook.map.on("draw.modechange", modeChangeHandler, mapHook.componentId);
-
       mapHook.map.addControl(draw.current, "top-left", mapHook.componentId);
 
-      mapHook.map.on("mouseup", mouseUpHandler, mapHook.componentId);
+
+      mapHook.map.on("draw.modechange", modeChangeHandler, mapHook.componentId);
 
       setDrawToolsReady(true);
     }
-  }, [mapHook.map,  props, drawToolsInitialized]);
+  }, [mapHook.map, props, drawToolsInitialized]);
 
   useEffect(() => {
-    if (
-      draw.current &&
-      props.geojson?.geometry
-    ) {
-      draw.current.set({ type: "FeatureCollection", features: [props.geojson] });
+    if (!mapHook.map || !drawToolsReady) return;
+
+    const changeHandler = () => {
+      if (draw.current) {
+        // update drawnFeatures state object
+        if (typeof props.onChange === "function") {
+          let currentFeatureCollection = draw.current.getAll?.();
+          props.onChange(currentFeatureCollection?.features);
+        }
+      }
+    };
+
+    mapHook.map.on("mouseup", changeHandler);
+
+    mapHook.map.on("touchend", changeHandler);
+
+    return () => {
+      if (!mapHook.map) return;
+
+      mapHook.map.map.off("mouseup", changeHandler);
+
+      mapHook.map.map.off("touchend", changeHandler);
     }
-  }, [props.geojson, drawToolsReady]);
+
+  }, [drawToolsReady, mapHook.map])
 
   useEffect(() => {
-    if (draw.current && mouseUpTrigger) {
-      // update drawnFeatures state object
-      let currentFeatureCollection = draw.current.getAll();
-      if (typeof onChangeRef.current === "function") {
-        onChangeRef.current(currentFeatureCollection.features);
-      }
+    if (draw.current && props.geojson?.geometry) {
+      draw.current.set({ type: "FeatureCollection", features: [props.geojson] });
     }
-  }, [mouseUpTrigger]);
+  }, [props.geojson, drawToolsReady]);
 
   useEffect(() => {
     if (props.mode && draw.current) {
@@ -132,7 +134,7 @@ const MlFeatureEditor = (props:MlFeatureEditorProps) => {
     }
   }, [props.mode]);
 
-  return (<></>);
-}
+  return <></>;
+};
 
 export default MlFeatureEditor;

package/src/components/MlFeatureEditor/lib/utils.js

@@ -39,8 +39,7 @@ const drawUtils = {
   getDrawInstance: (map) => {
     for (var i = map._controls.length - 1; i >= 0; i--) {
       if (
-        map._controls[i].options &&
-        map._controls[i].options.defaultMode === "custom_select"
+        map._controls[i]?.modes?.SIMPLE_SELECT === "simple_select"
       ) {
         return map._controls[i];
       }

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