@mapcomponents/react-maplibre 0.1.24 → 0.1.28

package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.js

@@ -1,15 +1,11 @@
 import React, { useRef, useEffect, useCallback } from "react";
 import PropTypes from "prop-types";
 
-import * as turf from "@turf/turf";
-
 import useMap from "../../hooks/useMap";
 
-import { _transitionToGeojson } from "./util/transitionFunctions";
 import getDefaultPaintPropsByType from "./util/getDefaultPaintPropsByType";
 import getDefaulLayerTypeByGeometry from "./util/getDefaultLayerTypeByGeometry";
 
-const msPerStep = 50;
 const legalLayerTypes = ["circle", "fill", "line"];
 
 /**
@@ -24,23 +20,6 @@ const MlGeoJsonLayer = (props) => {
   const layerId = useRef(props.layerId || "MlGeoJsonLayer-" + mapHook.componentId);
   const layerTypeRef = useRef(undefined);
 
-  // transition effect variables
-  const oldGeojsonRef = useRef(null);
-  const transitionInProgressRef = useRef(false);
-  const transitionTimeoutRef = useRef(undefined);
-  const currentTransitionStepRef = useRef(false);
-  const transitionGeojsonDataRef = useRef([]);
-  const transitionGeojsonCommonDataRef = useRef([]);
-
-  useEffect(() => {
-    return () => {
-      // This is the cleanup function, it is called when this react component is removed from react-dom
-      if (transitionTimeoutRef.current) {
-        clearTimeout(transitionTimeoutRef.current);
-      }
-    };
-  }, []);
-
   useEffect(() => {
     if (!mapHook.map || !initializedRef.current) return;
 
@@ -60,64 +39,15 @@ const MlGeoJsonLayer = (props) => {
     }
   }, [props.paint, mapHook.map, props.mapId, props.defaultPaintOverrides]);
 
-  const transitionToGeojson = useCallback(
-    (newGeojson) => {
-      _transitionToGeojson(
-        newGeojson,
-        props,
-        transitionGeojsonCommonDataRef,
-        transitionGeojsonDataRef,
-        transitionInProgressRef,
-        oldGeojsonRef,
-        msPerStep,
-        currentTransitionStepRef,
-        mapHook.map,
-        layerId.current,
-        transitionTimeoutRef
-      );
-    },
-    [props, mapHook.map]
-  );
-
   useEffect(() => {
     if (!mapHook?.map?.getSource(layerId.current) || !initializedRef.current) return;
 
-    if (
-      typeof props.transitionTime !== "undefined" &&
-      props.type === "line" &&
-      oldGeojsonRef.current
-    ) {
-      transitionInProgressRef.current = false;
-      currentTransitionStepRef.current = false;
-      transitionGeojsonDataRef.current = [];
-      transitionGeojsonCommonDataRef.current = [];
-      transitionToGeojson(props.geojson);
-    } else {
-      mapHook.map.getSource(layerId.current).setData(props.geojson);
-    }
-    oldGeojsonRef.current = props.geojson;
-  }, [
-    props.geojson,
-    props.mapId,
-    mapHook.map,
-    props.type,
-    transitionToGeojson,
-    props.transitionTime,
-  ]);
+    mapHook.map.getSource(layerId.current).setData(props.geojson);
+  }, [props.geojson, mapHook.map, props.type]);
 
   const createLayer = useCallback(() => {
     let geojson = props.geojson;
 
-    if (
-      props.type === "line" &&
-      typeof props.transitionTime !== "undefined" &&
-      props.transitionTime &&
-      typeof props.geojson.geometry !== "undefined"
-    ) {
-      var tmpChunks = turf.lineChunk(props.geojson, 0.01);
-      geojson = tmpChunks.features[0];
-    }
-
     layerTypeRef.current = props.type || getDefaulLayerTypeByGeometry(props.geojson);
 
     mapHook.map.addLayer(
@@ -149,19 +79,10 @@ const MlGeoJsonLayer = (props) => {
     if (typeof props.onLeave !== "undefined") {
       mapHook.map.on("mouseleave", layerId.current, props.onLeave, mapHook.componentId);
     }
-
-    if (
-      props.type === "line" &&
-      typeof props.transitionTime !== "undefined" &&
-      typeof props.geojson.geometry !== "undefined"
-    ) {
-      transitionToGeojson(props.geojson);
-      oldGeojsonRef.current = props.geojson;
-    }
-  }, [mapHook.map, props, transitionToGeojson]);
+  }, [mapHook, props]);
 
   useEffect(() => {
-    if (!mapHook.mapIsReady || !props.geojson) return;
+    if (!mapHook.map || !props.geojson) return;
 
     if (
       initializedRef.current &&
@@ -169,6 +90,7 @@ const MlGeoJsonLayer = (props) => {
       layerTypeRef.current &&
       props.type !== layerTypeRef.current
     ) {
+      // remove (cleanup) & reinitialize the layer if type has changed
       mapHook.map.cleanup(mapHook.componentId);
     } else if (
       initializedRef.current &&
@@ -178,11 +100,10 @@ const MlGeoJsonLayer = (props) => {
       return;
     }
 
-    // initialize the layer and add it to the MapLibre-gl instance or do something else with it
     initializedRef.current = true;
 
     createLayer();
-  }, [mapHook.mapIsReady, createLayer, props]);
+  }, [mapHook, createLayer, props]);
 
   return <></>;
 };
@@ -247,11 +168,6 @@ MlGeoJsonLayer.propTypes = {
    * left/unhovered.
    */
   onLeave: PropTypes.func,
-  /**
-   * Creates transition animation whenever the geojson prop changes.
-   * Only works with layer type "line" and LineString GeoJSON data.
-   */
-  transitionTime: PropTypes.number,
 };
 
 export default MlGeoJsonLayer;

package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.stories.js

@@ -1,12 +1,10 @@
-import React, { useState, useContext, useRef, useEffect } from "react";
+import React from "react";
 
 import MlGeoJsonLayer from "./MlGeoJsonLayer";
 
 import mapContextDecorator from "../../decorators/MapContextDecorator";
-import { MapContext } from "@mapcomponents/react-core";
 
 import sample_geojson_1 from "./assets/sample_1.json";
-import sample_geojson_2 from "./assets/sample_2.json";
 import sample_polygon_geojson_1 from "./assets/sample_polygon_1.json";
 
 console.log(sample_polygon_geojson_1);
@@ -28,31 +26,15 @@ const Template = (props) => {
     </>
   );
 };
-const LinestringTransitionTemplate = (props) => {
-  const mapContext = useContext(MapContext);
-  const [geojson, setGeojson] = useState(sample_geojson_1);
-  const initializedRef = useRef(false);
-
-  useEffect(() => {
-    if (!mapContext.getMap() || initializedRef.current) return;
-
-    initializedRef.current = true;
-    mapContext.getMap().setCenter({ lng: 7.137609868988648, lat: 50.74746799549129 });
-    mapContext.getMap().setZoom(9.5);
-
-    setTimeout(() => {
-      setGeojson(sample_geojson_2);
-    }, 4000);
-  }, [geojson, mapContext]);
-
+const LinestringTemplate = (props) => {
   return (
     <>
-      <MlGeoJsonLayer type="line" geojson={geojson} transitionTime={2000} />
+      <MlGeoJsonLayer type="line" geojson={sample_geojson_1} />
     </>
   );
 };
 
-export const Linestring = LinestringTransitionTemplate.bind({});
+export const Linestring = LinestringTemplate.bind({});
 Linestring.parameters = {};
 Linestring.args = {};
 

package/src/components/MlGeoJsonLayer/util/getDefaultPaintPropsByType.js

@@ -12,7 +12,7 @@ const getDefaultPaintPropsByType = (type, defaultPaintOverrides) => {
         return defaultPaintOverrides.line;
       }
       return {
-        "line-color": "rgb(100,200,100)",
+        "line-color": "rgb(203,211,2)",
         "line-width": 5,
       };
     case "circle":
@@ -21,7 +21,7 @@ const getDefaultPaintPropsByType = (type, defaultPaintOverrides) => {
         return defaultPaintOverrides.circle;
       }
       return {
-        "circle-color": "#44aaaa",
+        "circle-color": "rgba(10,240,256)",
         "circle-stroke-color": "#fff",
         "circle-stroke-width": 2,
       };

package/src/components/MlNavigationCompass/MlNavigationCompass.js

@@ -1,15 +1,13 @@
-import React, { useState, useRef, useEffect, useContext } from "react";
+import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 
-import { MapContext } from "@mapcomponents/react-core";
-import { v4 as uuidv4 } from "uuid";
-
 import { ReactComponent as RotateRightIcon } from "./assets/rotate_right.svg";
 import { ReactComponent as RotateLeftIcon } from "./assets/rotate_left.svg";
 import { ReactComponent as NeedleIcon } from "./assets/needle.svg";
 
 import styled from "@emotion/styled";
 import { css } from "@emotion/css";
+import useMap from "../../hooks/useMap";
 
 const NeedleButton = styled.div`
   width: 40%;
@@ -88,43 +86,23 @@ const RotateButton = styled.div`
  * @component
  */
 const MlNavigationCompass = (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 initializedRef = useRef(false);
-  const mapRef = useRef(undefined);
-  const componentId = useRef((props.idPrefix ? props.idPrefix : "MlNavigationCompass-") + uuidv4());
-
+  const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
   const [bearing, setBearing] = useState(0);
 
   useEffect(() => {
-    let _componentId = componentId.current;
-
-    return () => {
-      // This is the cleanup function, it is called when this react component is removed from react-dom
+    if (!mapHook.map) return;
 
-      if (mapRef.current) {
-        mapRef.current.cleanup(_componentId);
-        mapRef.current = undefined;
-      }
-      initializedRef.current = false;
+    let _updateBearing = () => {
+      setBearing(Math.round(mapHook.map.getBearing()));
     };
-  }, []);
 
-  useEffect(() => {
-    if (!mapContext.mapExists(props.mapId) || initializedRef.current) return;
-    initializedRef.current = true;
-    mapRef.current = mapContext.getMap(props.mapId);
+    mapHook.map.on("rotate", _updateBearing, mapHook.componentId);
+    _updateBearing();
 
-    mapRef.current.on(
-      "rotate",
-      function () {
-        setBearing(Math.round(mapRef.current.getBearing()));
-      },
-      componentId.current
-    );
-    setBearing(Math.round(mapRef.current.getBearing()));
-  }, [mapContext.mapIds, mapContext, props.mapId]);
+    return () => {
+      mapHook.map.off("rotate", _updateBearing);
+    };
+  }, [mapHook.map, props.mapId]);
 
   return (
     <>
@@ -154,7 +132,7 @@ const MlNavigationCompass = (props) => {
           <RotateButton className={css({ ...props.rotateRightStyle })}>
             <RotateRightIcon
               onClick={() => {
-                let bearing = Math.round(mapRef.current?.getBearing());
+                let bearing = Math.round(mapHook.map?.getBearing());
                 let rest = Math.round(bearing % 90);
                 if (bearing > 0) {
                   rest = 90 - rest;
@@ -162,14 +140,14 @@ const MlNavigationCompass = (props) => {
                 if (rest === 0) {
                   rest = 90;
                 }
-                mapRef.current?.setBearing(Math.round(bearing + Math.abs(rest)));
+                mapHook.map?.setBearing(Math.round(bearing + Math.abs(rest)));
               }}
             ></RotateRightIcon>
           </RotateButton>
           <NeedleButton
             className={css({ ...props.needleStyle })}
             onClick={() => {
-              mapRef.current?.setBearing(0);
+              mapHook.map?.setBearing(0);
             }}
           >
             <NeedleContainer
@@ -183,7 +161,7 @@ const MlNavigationCompass = (props) => {
           <RotateButton className={css({ ...props.rotateLeftStyle })}>
             <RotateLeftIcon
               onClick={() => {
-                let bearing = Math.round(mapRef.current?.getBearing());
+                let bearing = Math.round(mapHook.map?.getBearing());
                 let rest = Math.round(bearing % 90);
                 if (bearing < 0) {
                   rest = 90 + rest;
@@ -191,7 +169,7 @@ const MlNavigationCompass = (props) => {
                 if (rest === 0) {
                   rest = 90;
                 }
-                mapRef.current?.setBearing(Math.round(bearing - Math.abs(rest)));
+                mapHook.map?.setBearing(Math.round(bearing - Math.abs(rest)));
               }}
             ></RotateLeftIcon>
           </RotateButton>

package/src/components/MlNavigationCompass/MlNavigationCompass.test.js

@@ -48,7 +48,7 @@ describe("<MlNavigationCompass>", () => {
     );
 
     // MapLibreGlWrapper now subscribes to "data", "move" events on its own
-    await waitFor(() => expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(4));
+    await waitFor(() => expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(5));
   });
 
   it("should deregister 1 event listener to the maplibre instance", async () => {
@@ -59,10 +59,10 @@ describe("<MlNavigationCompass>", () => {
     );
 
     // MapLibreGlWrapper now subscribes to "data", "move" events on its own
-    expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(4);
+    expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(5);
 
     wrapper.find(".toggle_layer_visible").simulate("click");
 
-    expect(mockMapLibreMethods.off).toHaveBeenCalledTimes(1);
+    expect(mockMapLibreMethods.off).toHaveBeenCalledTimes(2);
   });
 });

package/src/components/MlNavigationTools/MlNavigationTools.js

@@ -1,25 +1,17 @@
-import React from "react";
-
-import {MapContext} from "@mapcomponents/react-core";
-import {useEffect, useRef, useContext, useState} from "react";
+import React, { useEffect, useState } from "react";
 import Button from "@mui/material/Button";
 import ButtonGroup from "@mui/material/ButtonGroup";
 import ControlPointIcon from "@mui/icons-material/ControlPoint";
 import RemoveCircleOutlineIcon from "@mui/icons-material/RemoveCircleOutline";
-//import ZoomOutIcon from "@mui/icons-material/ZoomOut";
-//import ZoomInIcon from "@mui/icons-material/ZoomIn";
 import GpsFixedIcon from "@mui/icons-material/GpsFixed";
-import {v4 as uuidv4} from "uuid";
 
 import MlNavigationCompass from "../MlNavigationCompass/MlNavigationCompass";
 import MlFollowGps from "../MlFollowGps/MlFollowGps";
 import useMediaQuery from "@mui/material/useMediaQuery";
+import useMap from "../../hooks/useMap";
 
 const MlNavigationTools = (props) => {
-  const mapContext = useContext(MapContext);
-  const initializedRef = useRef(false);
-  const mapRef = useRef(undefined);
-  const componentId = useRef((props.idPrefix ? props.idPrefix : "MlComponentTemplate-") + uuidv4());
+  const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
 
   const [pitch, setPitch] = useState(0);
   const [locationAccessDenied, setLocationAccessDenied] = useState(false);
@@ -38,67 +30,42 @@ const MlNavigationTools = (props) => {
     ":hover": {
       backgroundColor: "#515151",
     },
-    color: "#ececec"
+    color: "#ececec",
   };
 
   useEffect(() => {
-    let _componentId = componentId.current;
-
-    return () => {
-      // This is the cleanup function, it is called when this react component is removed from react-dom
-      // try to remove anything this component has added to the MapLibre-gl instance
-      // e.g.: remove the layer
-      // mapContext.getMap(props.mapId).removeLayer(layerRef.current);
-      // check for the existence of map.style before calling getLayer or getSource
-
-      if (mapRef.current) {
-        mapRef.current.cleanup(_componentId);
-        mapRef.current = undefined;
-      }
-      initializedRef.current = false;
-    };
-  }, []);
+    if (!mapHook.map) return;
 
-  useEffect(() => {
-    if (!mapContext.mapExists(props.mapId) || initializedRef.current) return;
-    // the MapLibre-gl instance (mapContext.getMap(props.mapId)) is accessible here
-    // initialize the layer and add it to the MapLibre-gl instance or do something else with it
-    initializedRef.current = true;
-    mapRef.current = mapContext.getMap(props.mapId);
-    mapRef.current.on(
-      "pitchend",
-      () => {
-        setPitch(mapRef.current.getPitch());
-      },
-      componentId.current
-    );
-    setPitch(mapRef.current.getPitch());
-  }, [mapContext.mapIds, mapContext, props.mapId]);
+    mapHook.map.on("pitchend", () => {
+      setPitch(mapHook.map.getPitch());
+    });
+    setPitch(mapHook.map.getPitch());
+  }, [mapHook.map, props.mapId]);
 
   const zoomIn = () => {
-    if (!mapRef.current) return;
+    if (!mapHook.map) return;
 
-    if (mapRef.current.transform._zoom + 0.5 <= mapRef.current.transform._maxZoom) {
-      mapRef.current.easeTo({zoom: mapRef.current.transform._zoom + 0.5});
+    if (mapHook.map.transform._zoom + 0.5 <= mapHook.map.transform._maxZoom) {
+      mapHook.map.easeTo({ zoom: mapHook.map.transform._zoom + 0.5 });
     }
   };
 
   const zoomOut = () => {
-    if (!mapRef.current) return;
+    if (!mapHook.map) return;
 
-    if (mapRef.current.transform._zoom - 0.5 >= mapRef.current.transform._minZoom) {
-      mapRef.current.easeTo({zoom: mapRef.current.transform._zoom - 0.5});
+    if (mapHook.map.transform._zoom - 0.5 >= mapHook.map.transform._minZoom) {
+      mapHook.map.easeTo({ zoom: mapHook.map.transform._zoom - 0.5 });
     }
   };
 
   const adjustPitch = () => {
-    if (!mapRef.current) return;
+    if (!mapHook.map) return;
 
     let targetPitch = 60;
-    if (mapRef.current.getPitch() !== 0) {
+    if (mapHook.map.getPitch() !== 0) {
       targetPitch = 0;
     }
-    mapRef.current.easeTo({pitch: targetPitch});
+    mapHook.map.easeTo({ pitch: targetPitch });
   };
 
   const moveToCurrentLocation = () => {
@@ -106,7 +73,7 @@ const MlNavigationTools = (props) => {
   };
 
   const getLocationSuccess = (location) => {
-    mapRef.current.setCenter([location.coords.longitude, location.coords.latitude]);
+    mapHook.map.setCenter([location.coords.longitude, location.coords.latitude]);
   };
 
   const getLocationError = () => {
@@ -131,33 +98,33 @@ const MlNavigationTools = (props) => {
           position: "relative",
           height: mediaIsMobile ? "55px" : "45px",
           marginLeft: mediaIsMobile ? "3px" : "-5px",
-          transform: mediaIsMobile ? "scale(1.6)" : "scale(1)"
+          transform: mediaIsMobile ? "scale(1.6)" : "scale(1)",
         }}
         backgroundStyle={{
           boxShadow: "0px 0px 18px rgba(0,0,0,.5)",
         }}
       />
-      <Button sx={{...buttonStyle, fontWeight: 600}} onClick={adjustPitch}>
+      <Button sx={{ ...buttonStyle, fontWeight: 600 }} onClick={adjustPitch}>
         {pitch ? "2D" : "3D"}
       </Button>
       <Button sx={buttonStyle} onClick={moveToCurrentLocation} disabled={locationAccessDenied}>
-        <GpsFixedIcon sx={{fontSize: mediaIsMobile ? "1.5em" : "1.2em"}}/>
+        <GpsFixedIcon sx={{ fontSize: mediaIsMobile ? "1.5em" : "1.2em" }} />
       </Button>
-      <MlFollowGps style={{...(({color, ...rest}) => rest)(buttonStyle)}} />
+      <MlFollowGps style={{ ...(({ color, ...rest }) => rest)(buttonStyle) }} />
       <ButtonGroup
         orientation="vertical"
         sx={{
           width: "50px",
           border: "none",
-          Button: {minWidth: "20px !important", border: "none", padding: 0},
-          "Button:hover": {border: "none"},
+          Button: { minWidth: "20px !important", border: "none", padding: 0 },
+          "Button:hover": { border: "none" },
         }}
       >
-        <Button sx={{...buttonStyle, color: "#ececec",}} onClick={zoomIn}>
-          <ControlPointIcon sx={{fontSize: mediaIsMobile ? "1.5em" : "1.2em"}}/>
+        <Button sx={{ ...buttonStyle, color: "#ececec" }} onClick={zoomIn}>
+          <ControlPointIcon sx={{ fontSize: mediaIsMobile ? "1.5em" : "1.2em" }} />
         </Button>
-        <Button sx={{...buttonStyle, color: "#ececec",}} onClick={zoomOut}>
-          <RemoveCircleOutlineIcon sx={{fontSize: mediaIsMobile ? "1.5em" : "1.2em"}}/>
+        <Button sx={{ ...buttonStyle, color: "#ececec" }} onClick={zoomOut}>
+          <RemoveCircleOutlineIcon sx={{ fontSize: mediaIsMobile ? "1.5em" : "1.2em" }} />
         </Button>
       </ButtonGroup>
     </div>

package/src/components/MlOsmLayer/MlOsmLayer.js

@@ -1,9 +1,7 @@
-import React, { useContext, useRef, useEffect, useState } from "react";
-import { MapContext } from "@mapcomponents/react-core";
-import { v4 as uuidv4 } from "uuid";
+import React, { useRef, useEffect, useState } from "react";
 
-import Button from "@mui/material/Button";
 import PropTypes from "prop-types";
+import useMap from "../../hooks/useMap";
 
 /**
  * Adds a standard OSM tile layer to the maplibre-gl instancereference by
@@ -12,81 +10,42 @@ import PropTypes from "prop-types";
  * @component
  */
 const MlOsmLayer = (props) => {
-  const mapContext = useContext(MapContext);
-  const mapRef = useRef(undefined);
+  const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
 
-  const [showLayer, setShowLayer] = useState(true);
-  const componentId = useRef((props.idPrefix ? props.idPrefix : "MlOsmLayer-") + uuidv4());
-  const initializedRef = useRef(false);
-  const sourceIdRef = useRef((props.idPrefix ? props.idPrefix : "MlOsmLayer-source-") + uuidv4());
-  const layerIdRef = useRef((props.idPrefix ? props.idPrefix : "MlOsmLayer-layer-") + uuidv4());
+  const layerId = useRef(props.layerId || "MlOsmLayer-" + mapHook.componentId);
 
   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);
+    if (!mapHook.map) return;
 
-        mapRef.current = null;
-      }
-    };
-  }, []);
-
-  useEffect(() => {
-    if (!mapContext.mapExists(props.mapId) || initializedRef.current) return;
-
-    initializedRef.current = true;
-    mapRef.current = mapContext.getMap(props.mapId);
-
-    mapRef.current.addSource(
-      sourceIdRef.current,
+    mapHook.map.addSource(
+      layerId.current,
       {
         type: "raster",
         tileSize: 256,
         ...props.sourceOptions,
       },
-      componentId.current
+      mapHook.componentId
     );
-    mapRef.current.addLayer(
+    mapHook.map.addLayer(
       {
-        id: layerIdRef.current,
+        id: layerId.current,
         type: "raster",
-        source: sourceIdRef.current,
+        source: layerId.current,
         minzoom: 0,
         maxzoom: 22,
         ...props.layerOptions,
       },
       props.insertBeforeLayer,
-      componentId.current
+      mapHook.componentId
     );
-  }, [mapContext.mapIds, props, mapContext]);
-
-  useEffect(() => {
-    if (!mapRef.current) return;
-
-    // toggle layer visibility by changing the layout object's visibility property
-    if (showLayer) {
-      mapRef.current.setLayoutProperty(layerIdRef.current, "visibility", "visible");
-    } else {
-      mapRef.current.setLayoutProperty(layerIdRef.current, "visibility", "none");
-    }
-  }, [showLayer]);
+  }, [props, mapHook.map]);
 
-  return (
-    <Button
-      color="primary"
-      variant={showLayer ? "contained" : "outlined"}
-      onClick={() => setShowLayer(!showLayer)}
-    >
-      OSM
-    </Button>
-  );
+  return <></>;
 };
 
 MlOsmLayer.propTypes = {
   /**
-   * Id of the target MapLibre instance in mapContext
+   * Id of the target MapLibre instance in mapHook
    */
   mapId: PropTypes.string,
   /**