@mapcomponents/react-maplibre 0.1.12 → 0.1.16

package/src/components/MlGPXViewer/MlGPXViewer.js

@@ -1,21 +1,22 @@
-import React, { useContext, useRef, useEffect, useState } from "react";
+import React, {useContext, useRef, useEffect, useState} from "react";
 import PropTypes from "prop-types";
-import { MapContext } from "@mapcomponents/react-core";
-import { bbox } from "@turf/turf";
+import {MapContext} from "@mapcomponents/react-core";
+import {bbox} from "@turf/turf";
 import Divider from "@mui/material/Divider";
 import Typography from "@mui/material/Typography";
 import Drawer from "@mui/material/Drawer";
 import IconButton from "@mui/material/IconButton";
 import InfoIcon from "@mui/icons-material/Info";
 import FileCopy from "@mui/icons-material/FileCopy";
-import { Popup } from "maplibre-gl";
+import {Popup} from "maplibre-gl";
 import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
 import ListItemText from "@mui/material/ListItemText";
 import GeoJsonContext from "./util/GeoJsonContext";
 import toGeoJSON from "./gpxConverter";
+import useMediaQuery from "@mui/material/useMediaQuery";
 
-import { v4 as uuidv4 } from "uuid";
+import {v4 as uuidv4} from "uuid";
 
 /**
  * MlGPXViewer returns a dropzone and a button to load a GPX Track into the map.
@@ -38,6 +39,7 @@ const MlGPXViewer = (props) => {
   const [zIndex, setZIndex] = useState(0);
   const [metaData, setMetaData] = useState([]);
   const fileupload = useRef(null);
+  const mediaIsMobile = useMediaQuery("(max-width:900px)");
 
   const popup = useRef(
     new Popup({
@@ -255,42 +257,42 @@ const MlGPXViewer = (props) => {
   };
   return (
     <>
-      <IconButton
-        onClick={manualUpload}
-        style={{
-          position: "absolute",
-          right: "5px",
-          bottom: "75px",
-          backgroundColor: "rgba(255,255,255,1)",
-
-          zIndex: 1000,
-        }}
-        size="large"
-      >
-        <input
-          ref={fileupload}
-          onChange={fileUploadOnChange}
-          type="file"
-          id="input"
-          multiple
-          style={{ display: "none" }}
-        ></input>
-        <FileCopy />
-      </IconButton>
-      <IconButton
-        onClick={toogleDrawer}
-        style={{
-          position: "absolute",
-          right: "5px",
-          bottom: "25px",
-          backgroundColor: "rgba(255,255,255,1)",
-
-          zIndex: 1000,
-        }}
-        size="large"
-      >
-        <InfoIcon />
-      </IconButton>
+      <div style={{
+        position: "fixed",
+        right: "5px",
+        bottom: mediaIsMobile ? "40px" : "25px",
+        display: "flex",
+        flexDirection: "column",
+        gap: "5px",
+        zIndex: 1000,
+      }}>
+        <IconButton
+          onClick={manualUpload}
+          style={{
+            backgroundColor: "rgba(255,255,255,1)",
+          }}
+          size="large"
+        >
+          <input
+            ref={fileupload}
+            onChange={fileUploadOnChange}
+            type="file"
+            id="input"
+            multiple
+            style={{display: "none"}}
+          ></input>
+          <FileCopy/>
+        </IconButton>
+        <IconButton
+          onClick={toogleDrawer}
+          style={{
+            backgroundColor: "rgba(255,255,255,1)",
+          }}
+          size="large"
+        >
+          <InfoIcon/>
+        </IconButton>
+      </div>
       <Drawer variant="persistent" anchor="left" open={open}>
         <Typography
           variant="h6"
@@ -302,11 +304,11 @@ const MlGPXViewer = (props) => {
         >
           Informationen zur Route
         </Typography>
-        <Divider />
+        <Divider/>
         <List>
           {metaData.map((item) => (
             <ListItem key={`item--${item.id}`}>
-              <ListItemText primary={item.value} />
+              <ListItemText primary={item.value}/>
             </ListItem>
           ))}
         </List>

package/src/components/MlGPXViewer/gpxConverter.js

@@ -1,3 +1,16 @@
+/**
+ * https://github.com/mapbox/togeojson
+ *
+ * Copyright (c) 2016 Mapbox All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+ *
+ * 1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+ *
+ * 2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
 var toGeoJSON = (function () {
   var removeSpace = /\s*/g,
     trimSpace = /^\s*|\s*$/g,
@@ -145,15 +158,11 @@ var toGeoJSON = (function () {
         styleByHash[hash] = styles[k];
       }
       for (var l = 0; l < styleMaps.length; l++) {
-        styleIndex["#" + attr(styleMaps[l], "id")] = okhash(
-          xml2str(styleMaps[l])
-        ).toString(16);
+        styleIndex["#" + attr(styleMaps[l], "id")] = okhash(xml2str(styleMaps[l])).toString(16);
         var pairs = get(styleMaps[l], "Pair");
         var pairsMap = {};
         for (var m = 0; m < pairs.length; m++) {
-          pairsMap[nodeVal(get1(pairs[m], "key"))] = nodeVal(
-            get1(pairs[m], "styleUrl")
-          );
+          pairsMap[nodeVal(get1(pairs[m], "key"))] = nodeVal(get1(pairs[m], "styleUrl"));
         }
         styleMapIndex["#" + attr(styleMaps[l], "id")] = pairsMap;
       }
@@ -183,8 +192,7 @@ var toGeoJSON = (function () {
           coords = [],
           times = [];
         if (elems.length === 0) elems = get(root, "gx:coord");
-        for (var i = 0; i < elems.length; i++)
-          coords.push(gxCoord(nodeVal(elems[i])));
+        for (var i = 0; i < elems.length; i++) coords.push(gxCoord(nodeVal(elems[i])));
         var timeElems = get(root, "when");
         for (var j = 0; j < timeElems.length; j++) times.push(nodeVal(timeElems[j]));
         return {
@@ -322,26 +330,19 @@ var toGeoJSON = (function () {
             outline = nodeVal(get1(polyStyle, "outline"));
           if (pcolor) properties.fill = pcolor;
           if (!isNaN(popacity)) properties["fill-opacity"] = popacity;
-          if (fill)
-            properties["fill-opacity"] =
-              fill === "1" ? properties["fill-opacity"] || 1 : 0;
+          if (fill) properties["fill-opacity"] = fill === "1" ? properties["fill-opacity"] || 1 : 0;
           if (outline)
-            properties["stroke-opacity"] =
-              outline === "1" ? properties["stroke-opacity"] || 1 : 0;
+            properties["stroke-opacity"] = outline === "1" ? properties["stroke-opacity"] || 1 : 0;
         }
         if (extendedData) {
           var datas = get(extendedData, "Data"),
             simpleDatas = get(extendedData, "SimpleData");
 
           for (i = 0; i < datas.length; i++) {
-            properties[datas[i].getAttribute("name")] = nodeVal(
-              get1(datas[i], "value")
-            );
+            properties[datas[i].getAttribute("name")] = nodeVal(get1(datas[i], "value"));
           }
           for (i = 0; i < simpleDatas.length; i++) {
-            properties[simpleDatas[i].getAttribute("name")] = nodeVal(
-              simpleDatas[i]
-            );
+            properties[simpleDatas[i].getAttribute("name")] = nodeVal(simpleDatas[i]);
           }
         }
         if (visibility) {
@@ -444,8 +445,7 @@ var toGeoJSON = (function () {
         if (track.length === 0) return;
         var properties = getProperties(node);
         extend(properties, getLineStyle(get1(node, "extensions")));
-        if (times.length)
-          properties.coordTimes = track.length === 1 ? times[0] : times;
+        if (times.length) properties.coordTimes = track.length === 1 ? times[0] : times;
         if (heartRates.length)
           properties.heartRates = track.length === 1 ? heartRates[0] : heartRates;
         return {
@@ -501,14 +501,7 @@ var toGeoJSON = (function () {
         return style;
       }
       function getProperties(node) {
-        var prop = getMulti(node, [
-            "name",
-            "cmt",
-            "desc",
-            "type",
-            "time",
-            "keywords",
-          ]),
+        var prop = getMulti(node, ["name", "cmt", "desc", "type", "time", "keywords"]),
           links = get(node, "link");
         if (links.length) prop.links = [];
         for (var i = 0, link; i < links.length; i++) {

package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.js

@@ -4,6 +4,7 @@ import PropTypes from "prop-types";
 import { v4 as uuidv4 } from "uuid";
 import * as turf from "@turf/turf";
 import { MapContext } from "@mapcomponents/react-core";
+import useMapState from "../../hooks/useMapState";
 
 import { _transitionToGeojson } from "./util/transitionFunctions";
 
@@ -17,6 +18,14 @@ const msPerStep = 50;
 const MlGeoJsonLayer = (props) => {
   // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
   const mapContext = useContext(MapContext);
+  const mapState = useMapState({
+    mapId: props.mapId,
+    watch: {
+      viewport: false,
+      layers: true,
+      sources: false,
+    },
+  });
   const oldGeojsonRef = useRef(null);
   const mapRef = useRef(null);
   const initializedRef = useRef(false);
@@ -34,11 +43,10 @@ const MlGeoJsonLayer = (props) => {
     let _componentId = componentId.current;
     return () => {
       // This is the cleanup function, it is called when this react component is removed from react-dom
-      if(transitionTimeoutRef.current){
-        clearTimeout(transitionTimeoutRef.current)
+      if (transitionTimeoutRef.current) {
+        clearTimeout(transitionTimeoutRef.current);
       }
       if (mapRef.current) {
-
         mapRef.current.cleanup(_componentId);
 
         mapRef.current = null;
@@ -48,11 +56,17 @@ const MlGeoJsonLayer = (props) => {
 
   useEffect(() => {
     if (!mapRef.current || !initializedRef.current) 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
+
+    for (var key in props.layout) {
+      mapContext.getMap(props.mapId).setLayoutProperty(layerId.current, key, props.layout[key]);
+    }
+  }, [props.layout, mapContext, props.mapId]);
+
+  useEffect(() => {
+    if (!mapRef.current || !initializedRef.current) return;
 
     for (var key in props.paint) {
-      mapContext.getMap(props.mapId).setPaintProperty(componentId.current, key, props.paint[key]);
+      mapContext.getMap(props.mapId).setPaintProperty(layerId.current, key, props.paint[key]);
     }
   }, [props.paint, mapContext, props.mapId]);
 
@@ -109,6 +123,19 @@ const MlGeoJsonLayer = (props) => {
     // initialize the layer and add it to the MapLibre-gl instance or do something else with it
 
     if (props.geojson) {
+      //check if insertBeforeLayer exists
+      if (props.insertBeforeLayer) {
+        let layerFound = false;
+
+        mapState?.layers?.forEach((layer) => {
+          if (layer.id === props.insertBeforeLayer) {
+            layerFound = true;
+          }
+        });
+        if (!layerFound) {
+          return;
+        }
+      }
       initializedRef.current = true;
       let geojson = props.geojson;
 
@@ -136,6 +163,7 @@ const MlGeoJsonLayer = (props) => {
             "line-color": "rgb(100,200,100)",
             "line-width": 10,
           },
+          layout: props.layout || {},
         },
         props.insertBeforeLayer,
         componentId.current
@@ -162,7 +190,7 @@ const MlGeoJsonLayer = (props) => {
         oldGeojsonRef.current = props.geojson;
       }
     }
-  }, [mapContext.mapIds, mapContext, props, transitionToGeojson]);
+  }, [mapContext.mapIds, mapContext, props, transitionToGeojson, mapState.layers]);
 
   return <></>;
 };
@@ -178,8 +206,16 @@ MlGeoJsonLayer.propTypes = {
    */
   type: PropTypes.string,
   /**
-   * Paint object, that is passed to the addLayer call.
-   * Possible propsdepend on the layer type.
+   * Layout property object, that is passed to the addLayer call.
+   * Possible props depend on the layer type.
+   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#line
+   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
+   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
+   */
+  layout: PropTypes.object,
+  /**
+   * Paint property object, that is passed to the addLayer call.
+   * Possible props depend on the layer type.
    * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#line
    * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
    * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill

package/src/components/MlImageMarkerLayer/MlImageMarkerLayer.js

@@ -1,36 +1,18 @@
-import React, { useRef, useCallback, useEffect, useContext } from "react";
+import React, { useRef, useCallback, useEffect } from "react";
 
-import { v4 as uuidv4 } from "uuid";
-import { MapContext } from "@mapcomponents/react-core";
+import useMap from "../../hooks/useMap";
 
 const MlImageMarkerLayer = (props) => {
-  // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
-  const mapRef = useRef(null);
-  const componentId = useRef(
-    (props.idPrefix ? props.idPrefix : "MlOsmLayer-") + uuidv4()
-  );
-  const mapContext = useContext(MapContext);
+  const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
+
   const layerInitializedRef = useRef(false);
-  const idSuffixRef = useRef(props.idSuffix || new Date().getTime());
   const imageIdRef = useRef(props.imageId || "img_" + new Date().getTime());
-  const layerId = useRef((props.layerId || "MlImageMarkerLayer-") + idSuffixRef.current);
-
-  useEffect(() => {
-    let _componentId = componentId.current;
-    return () => {
-      // This is the cleanup function, it is called when this react component is removed from react-dom
-      if (mapRef.current) {
-        mapRef.current.cleanup(_componentId);
-
-        mapRef.current = null;
-      }
-    };
-  }, []);
+  const layerId = useRef(props.layerId || "MlImageMarkerLayer-" + mapHook.componentId);
 
   useEffect(() => {
     if (
-      !mapRef.current ||
-      (mapRef.current && !mapContext.getMap(props.mapId).getLayer(layerId.current)) ||
+      !mapHook.mapIsReady ||
+      (mapHook.map && !mapHook.map.getLayer(layerId.current)) ||
       !props.options
     )
       return;
@@ -40,19 +22,15 @@ const MlImageMarkerLayer = (props) => {
 
     if (props.options.layout) {
       for (key in props.options.layout) {
-        mapContext
-          .getMap(props.mapId)
-          .setLayoutProperty(layerId.current, key, props.options.layout[key]);
+        mapHook.map.setLayoutProperty(layerId.current, key, props.options.layout[key]);
       }
     }
     if (props.options.paint) {
       for (key in props.options.paint) {
-        mapContext
-          .getMap(props.mapId)
-          .setPaintProperty(layerId.current, key, props.options.paint[key]);
+        mapHook.map.setPaintProperty(layerId.current, key, props.options.paint[key]);
       }
     }
-  }, [props.options, layerId.current, mapContext, props.mapId]);
+  }, [props.options, layerId.current, props.mapId]);
 
   const addLayer = useCallback(() => {
     let tmpOptions = {
@@ -61,49 +39,35 @@ const MlImageMarkerLayer = (props) => {
       ...props.options,
     };
     tmpOptions.layout["icon-image"] = imageIdRef.current;
-    mapRef.current.addLayer(
-      tmpOptions,
-      props.insertBeforeLayer,
-      componentId.current
-    );
-  }, [props]);
+    mapHook.map.addLayer(tmpOptions, props.insertBeforeLayer, mapHook.componentId);
+  }, [props, mapHook.mapIsReady, mapHook.map]);
 
   useEffect(() => {
-    if (
-      !props.options ||
-      !mapContext.mapExists(props.mapId) ||
-      layerInitializedRef.current
-    )
-      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
-    mapRef.current = mapContext.getMap(props.mapId);
+    if (!props.options || !mapHook.mapIsReady || layerInitializedRef.current) return;
 
     layerInitializedRef.current = true;
 
     if (props.imgSrc) {
-      mapRef.current.loadImage(props.imgSrc, function (error, image) {
+      mapHook.map.loadImage(props.imgSrc, function (error, image) {
         if (error) throw error;
-        mapRef.current.addImage(imageIdRef.current, image, componentId.current);
+        mapHook.map.addImage(imageIdRef.current, image, mapHook.componentId);
       });
     }
+
     addLayer();
-  }, [mapContext.mapIds, mapContext, props, addLayer]);
+  }, [mapHook.mapIsReady, mapHook.map, addLayer, props]);
 
   useEffect(() => {
     if (
-      !mapRef.current ||
-      (mapRef.current && !mapContext.getMap(props.mapId).getLayer(layerId.current)) ||
+      !mapHook.mapIsReady ||
+      (mapHook.map && !mapHook.map.getLayer(layerId.current)) ||
       !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
 
-    mapRef.current.getSource(layerId.current).setData(props.options.source.data);
-  }, [props.options.source.data, mapContext, props]);
+    mapHook.map.getSource(layerId.current).setData(props.options.source.data);
+  }, [props.options.source.data, props]);
 
   return <></>;
 };

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

@@ -1,20 +1,19 @@
 import { layerRemovalTest, sourceRemovalTest } from "../../util";
+import { uuid_regex } from "../../setupTests";
 
 import MlImageMarkerLayer from "./MlImageMarkerLayer";
 
-const testComponent = (
-  <MlImageMarkerLayer options={{ source: {} }} imgSrc="testImage" />
-);
+const testComponent = <MlImageMarkerLayer options={{ source: {} }} imgSrc="testImage" />;
 
 layerRemovalTest(
   "<MlImageMarkerLayer />",
   testComponent,
-  /^.*\"MlImageMarkerLayer\-[0-9]*\".*$/,
-  "MlImageMarkerLayer-{unix-timestamp}"
+  new RegExp('^.*"MlImageMarkerLayer-' + uuid_regex + '".*$'),
+  "MlImageMarkerLayer-{uuid}"
 );
 sourceRemovalTest(
   "<MlImageMarkerLayer />",
   testComponent,
-  /^.*\"MlImageMarkerLayer\-[0-9]*\".*$/,
-  "MlImageMarkerLayer-{unix-timestamp}"
+  new RegExp('^.*"MlImageMarkerLayer-' + uuid_regex + '".*$'),
+  "MlImageMarkerLayer-{uuid}"
 );

package/src/components/MlLayer/MlLayer.js

@@ -2,17 +2,25 @@ import React, { useRef, useEffect, useContext } from "react";
 
 import { v4 as uuidv4 } from "uuid";
 import { MapContext } from "@mapcomponents/react-core";
+import useMapState from "../../hooks/useMapState";
 
 const MlLayer = (props) => {
   // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
   const mapContext = useContext(MapContext);
+
+  const mapState = useMapState({
+    mapId: props.mapId,
+    watch: {
+      viewport: false,
+      layers: true,
+      sources: false,
+    },
+  });
   const layerInitializedRef = useRef(false);
   const mapRef = useRef(null);
-  const componentId = useRef(
-    (props.layerId ? props.layerId : "MlLayer-") + uuidv4()
-  );
+  const componentId = useRef((props.layerId ? props.layerId : "MlLayer-") + uuidv4());
   const idSuffixRef = useRef(props.idSuffix || new Date().getTime());
-  const layerId = (props.layerId || "MlLayer-") + idSuffixRef.current;
+  const layerId = useRef(props.layerId || componentId.current);
   const layerPaintConfRef = useRef(undefined);
   const layerLayoutConfRef = useRef(undefined);
 
@@ -60,12 +68,26 @@ const MlLayer = (props) => {
     // 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
 
+    //check if insertBeforeLayer exists
+    if (props.insertBeforeLayer) {
+      let layerFound = false;
+
+      mapState?.layers?.forEach((layer) => {
+        if (layer.id === props.insertBeforeLayer) {
+          layerFound = true;
+        }
+      });
+      if (!layerFound) {
+        return;
+      }
+    }
+
     mapRef.current = mapContext.getMap(props.mapId);
     if (mapRef.current) {
       layerInitializedRef.current = true;
       mapRef.current.addLayer(
         {
-          id: layerId,
+          id: layerId.current,
           type: "background",
           paint: {
             "background-color": "rgba(0,0,0,0)",
@@ -78,7 +100,7 @@ const MlLayer = (props) => {
       layerPaintConfRef.current = JSON.stringify(props.options?.paint);
       layerLayoutConfRef.current = JSON.stringify(props.options?.layout);
     }
-  }, [mapContext.mapIds, mapContext, props, layerId]);
+  }, [mapContext.mapIds, mapContext, props, mapState.layers]);
 
   return <></>;
 };

package/src/components/MlLayer/MlLayer.test.js

@@ -5,6 +5,8 @@ import { MapContext, MapComponentsProvider } from "@mapcomponents/react-core";
 import MapLibreMap from "./../MapLibreMap/MapLibreMap";
 import MlLayer from "./MlLayer";
 
+import { uuid_regex } from "../../setupTests";
+
 const MlLayerTestComponent = (props) => {
   const [layerVisible, setLayerVisible] = useState(true);
   const [refreshTrigger, setRefreshTrigger] = useState(0);
@@ -59,57 +61,57 @@ const createWrapper = () =>
   );
 
 describe("<MlLayer>", () => {
-  it("should add a Layer with the id 'MlLayer-{unix-timestamp}' to the MapLibre instance", async () => {
+  it("should add a Layer with the id 'MlLayer-{uuid}' to the MapLibre instance", async () => {
     const wrapper = createWrapper();
 
     wrapper.find(".trigger_refresh").simulate("click");
 
     expect(
-      /^.*\"MlLayer\-[0-9]*\".*$/.test(wrapper.find(".layers_json").text())
+      new RegExp('^.*"MlLayer-' + uuid_regex + '".*$').test(wrapper.find(".layers_json").text())
     ).toEqual(true);
   });
 
-  it("should remove a Layer with the id 'MlLayer-{unix-timestamp}' from the MapLibre instance", async () => {
+  it("should remove a Layer with the id 'MlLayer-{uuid}' from the MapLibre instance", async () => {
     const wrapper = createWrapper();
 
     wrapper.find(".trigger_refresh").simulate("click");
 
     expect(
-      /^.*\"MlLayer\-[0-9]*\".*$/.test(wrapper.find(".layers_json").text())
+      new RegExp('^.*"MlLayer-' + uuid_regex + '".*$').test(wrapper.find(".layers_json").text())
     ).toEqual(true);
 
     wrapper.find(".toggle_layer_visible").simulate("click");
     wrapper.find(".trigger_refresh").simulate("click");
 
     expect(
-      /^.*\"MlLayer\-[0-9]*\".*$/.test(wrapper.find(".layers_json").text())
+      new RegExp('^.*"MlLayer-' + uuid_regex + '".*$').test(wrapper.find(".layers_json").text())
     ).toEqual(false);
   });
 
-  it("should add a Source with the id 'MlLayer-{unix-timestamp}' to the MapLibre instance", async () => {
+  it("should add a Source with the id 'MlLayer-{uuid}' to the MapLibre instance", async () => {
     const wrapper = createWrapper();
 
     wrapper.find(".trigger_refresh").simulate("click");
 
     expect(
-      /^.*\"MlLayer\-[0-9]*\".*$/.test(wrapper.find(".sources_json").text())
+      new RegExp('^.*"MlLayer-' + uuid_regex + '".*$').test(wrapper.find(".sources_json").text())
     ).toEqual(true);
   });
 
-  it("should remove a Source with the id 'MlLayer-{unix-timestamp}' from the MapLibre instance", async () => {
+  it("should remove a Source with the id 'MlLayer-{uuid}' from the MapLibre instance", async () => {
     const wrapper = createWrapper();
 
     wrapper.find(".trigger_refresh").simulate("click");
 
     expect(
-      /^.*\"MlLayer\-[0-9]*\".*$/.test(wrapper.find(".sources_json").text())
+      new RegExp('^.*"MlLayer-' + uuid_regex + '".*$').test(wrapper.find(".sources_json").text())
     ).toEqual(true);
 
     wrapper.find(".toggle_layer_visible").simulate("click");
     wrapper.find(".trigger_refresh").simulate("click");
 
     expect(
-      /^.*\"MlLayer\-[0-9]*\".*$/.test(wrapper.find(".sources_json").text())
+      new RegExp('^.*"MlLayer-' + uuid_regex + '".*$').test(wrapper.find(".sources_json").text())
     ).toEqual(false);
   });
 });

package/src/components/MlLayerMagnify/MlLayerMagnify.js

@@ -29,7 +29,7 @@ const MlLayerMagnify = (props) => {
     if (!props.map1Id || !props.map2Id) {
       return false;
     }
-    if (!mapContext.mapExists(props.map1Id) || !mapContext.mapExists(props.map2Id)) {
+    if (!mapContext.getMap(props.map1Id) || !mapContext.getMap(props.map2Id)) {
       return false;
     }
 
@@ -100,8 +100,8 @@ const MlLayerMagnify = (props) => {
 
     syncMoveInitializedRef.current = true;
     syncCleanupFunctionRef.current = syncMove(
-      mapContext.getMap(props.map1Id),
-      mapContext.getMap(props.map2Id)
+      mapContext.getMap(props.map1Id).map,
+      mapContext.getMap(props.map2Id).map
     );
 
     if (