@mapcomponents/react-maplibre 0.1.26 → 0.1.30

package/src/components/MlTransitionGeoJsonLayer/MlTransitionGeoJsonLayer.doc.de.md

@@ -0,0 +1,3 @@
+# Component Beschreibung
+
+Beschreibungstext

package/src/components/MlTransitionGeoJsonLayer/MlTransitionGeoJsonLayer.js

@@ -0,0 +1,165 @@
+import React, { useState, 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 { MlGeoJsonLayer } from "../..";
+
+const msPerStep = 50;
+
+/**
+ * Adds source and layer of types "line", "fill" or "circle" to display GeoJSON data on the map.
+ *
+ * @component
+ */
+const MlTransitionGeoJsonLayer = (props) => {
+  const { geojson, ...restProps } = props;
+  // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
+  const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
+  const initializedRef = useRef(false);
+
+  // 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([]);
+  const [displayGeojson, setDisplayGeojson] = useState(turf.featureCollection([]));
+
+  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);
+      }
+    };
+  }, []);
+
+  const transitionToGeojson = useCallback(() => {
+    _transitionToGeojson(
+      props,
+      transitionGeojsonCommonDataRef,
+      transitionGeojsonDataRef,
+      transitionInProgressRef,
+      oldGeojsonRef,
+      msPerStep,
+      currentTransitionStepRef,
+      mapHook.map,
+      transitionTimeoutRef,
+      setDisplayGeojson
+    );
+  }, [props, mapHook.map]);
+
+  useEffect(() => {
+    if (!mapHook.map || !initializedRef.current) return;
+
+    if (
+      typeof props.transitionTime !== "undefined" &&
+      props.type === "line" &&
+      oldGeojsonRef.current
+    ) {
+      transitionInProgressRef.current = false;
+      currentTransitionStepRef.current = false;
+      transitionGeojsonDataRef.current = [];
+      transitionGeojsonCommonDataRef.current = [];
+      transitionToGeojson();
+    }
+    oldGeojsonRef.current = props.geojson;
+  }, [mapHook.map, transitionToGeojson, props]);
+
+  const startTransition = useCallback(() => {
+    if (
+      props.type === "line" &&
+      typeof props.transitionTime !== "undefined" &&
+      props.transitionTime &&
+      typeof props.geojson.geometry !== "undefined" &&
+      JSON.stringify(oldGeojsonRef.current) !== JSON.stringify(props.geojson)
+    ) {
+      transitionToGeojson(props.geojson);
+      oldGeojsonRef.current = props.geojson;
+    }
+  }, [props, transitionToGeojson]);
+
+  useEffect(() => {
+    if (!mapHook.mapIsReady || !props.geojson) return;
+
+    initializedRef.current = true;
+
+    startTransition();
+  }, [mapHook.mapIsReady, startTransition, props]);
+
+  return (
+    <>
+      <MlGeoJsonLayer {...restProps} geojson={displayGeojson} />
+    </>
+  );
+};
+
+MlTransitionGeoJsonLayer.propTypes = {
+  /**
+   * Id of the target MapLibre instance in mapContext
+   */
+  mapId: PropTypes.string,
+  /**
+   * Type of the layer that will be added to the MapLibre instance.
+   * Possible values: "line", "circle", "fill"
+   */
+  type: PropTypes.string,
+  /**
+   * 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
+   */
+  paint: PropTypes.object,
+  /**
+   * Javascript object with optional properties "fill", "line", "circle" to override implicit layer type default paint properties.
+   */
+  defaultPaintOverrides: PropTypes.object,
+  /**
+   * Javascript object that is spread into the addLayer commands first parameter.
+   */
+  options: PropTypes.object,
+  /**
+   * GeoJSON data that is supposed to be rendered by this component.
+   */
+  geojson: PropTypes.object,
+  /**
+   * 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: PropTypes.string,
+  /**
+   * Click event handler that is executed whenever a geometry rendered by this component is clicked.
+   */
+  onClick: PropTypes.func,
+  /**
+   * Hover event handler that is executed whenever a geometry rendered by this component is hovered.
+   */
+  onHover: PropTypes.func,
+  /**
+   * Leave event handler that is executed whenever a geometry rendered by this component is
+   * 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 MlTransitionGeoJsonLayer;

package/src/components/MlTransitionGeoJsonLayer/MlTransitionGeoJsonLayer.meta.json

@@ -0,0 +1,15 @@
+{
+  "name": "MlTransitionGeoJsonLayer",
+  "title": "GeoJSON layer",
+  "description": "",
+  "i18n": {
+    "de": {
+      "title": "GeoJSON Ebene",
+      "description": ""
+    }
+  },
+  "tags": [],
+  "category": "",
+  "type": "component",
+  "price": 0
+}

package/src/components/MlTransitionGeoJsonLayer/MlTransitionGeoJsonLayer.stories.js

@@ -0,0 +1,52 @@
+import React, { useState, useContext, useRef, useEffect } from "react";
+
+import MlTransitionGeoJsonLayer from "./MlTransitionGeoJsonLayer";
+
+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);
+const storyoptions = {
+  title: "MapComponents/MlTransitionGeoJsonLayer",
+  component: MlTransitionGeoJsonLayer,
+  argTypes: {
+    url: {},
+    layer: {},
+  },
+  decorators: mapContextDecorator,
+};
+export default storyoptions;
+
+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]);
+
+  return (
+    <>
+      <MlTransitionGeoJsonLayer type="line" geojson={geojson} transitionTime={2000} {...props} />
+    </>
+  );
+};
+
+export const Linestring = LinestringTransitionTemplate.bind({});
+Linestring.parameters = {};
+Linestring.args = {
+  paint: { "line-color": "red", "line-width": 4 },
+};

package/src/components/MlTransitionGeoJsonLayer/MlTransitionGeoJsonLayer.test.js

@@ -0,0 +1,20 @@
+import { layerRemovalTest, sourceRemovalTest } from "../../util";
+
+import MlTransitionGeoJsonLayer from "./MlTransitionGeoJsonLayer";
+import geojson from "./assets/sample_1.json";
+import { uuid_regex } from "../../setupTests";
+
+const testComponent = <MlTransitionGeoJsonLayer type="line" geojson={geojson} />;
+
+layerRemovalTest(
+  "<MlTransitionGeoJsonLayer />",
+  testComponent,
+  new RegExp('^.*"MlGeoJsonLayer-' + uuid_regex + '".*$'),
+  "MlTransitionGeoJsonLayer-{uuid}"
+);
+sourceRemovalTest(
+  "<MlTransitionGeoJsonLayer />",
+  testComponent,
+  new RegExp('^.*"MlGeoJsonLayer-' + uuid_regex + '".*$'),
+  "MlTransitionGeoJsonLayer-{uuid}"
+);

package/src/components/MlTransitionGeoJsonLayer/assets/sample_1.json

@@ -0,0 +1,26 @@
+{
+  "type": "Feature",
+  "properties": {},
+  "geometry": {
+    "type": "LineString",
+    "coordinates": [
+      [7.1074676513671875, 50.74340774029213],
+      [7.0992279052734375, 50.756441089372665],
+      [7.079315185546874, 50.764693667025014],
+      [7.045669555664062, 50.77945780529241],
+      [7.030563354492187, 50.79161300845443],
+      [7.0291900634765625, 50.80940599750376],
+      [7.0236968994140625, 50.820685846099174],
+      [7.0085906982421875, 50.825891011253546],
+      [6.9879913330078125, 50.826758482363275],
+      [6.97906494140625, 50.835432306955276],
+      [6.9824981689453125, 50.84583876895451],
+      [6.9962310791015625, 50.85147463352982],
+      [7.012023925781249, 50.85710981721644],
+      [7.021636962890625, 50.86664473085768],
+      [7.0367431640625, 50.872278081520406],
+      [7.0477294921875, 50.877044231111014],
+      [7.052536010742187, 50.88397594225127]
+    ]
+  }
+}

package/src/components/MlTransitionGeoJsonLayer/assets/sample_2.json

@@ -0,0 +1,22 @@
+{
+  "type": "Feature",
+  "properties": {},
+  "geometry": {
+    "type": "LineString",
+    "coordinates": [
+      [7.0635223388671875, 50.71385204707258],
+      [7.06146240234375, 50.709721458354075],
+      [7.063865661621094, 50.70298129536074],
+      [7.064552307128906, 50.69906720767511],
+      [7.059059143066406, 50.69428287906098],
+      [7.05596923828125, 50.68797551838366],
+      [7.0580291748046875, 50.680797145321655],
+      [7.062835693359375, 50.67514068397085],
+      [7.060432434082031, 50.6686131506577],
+      [7.051849365234375, 50.659255436656736],
+      [7.044639587402344, 50.6512019574539],
+      [7.0484161376953125, 50.64271166020676],
+      [7.0566558837890625, 50.63748609931014]
+    ]
+  }
+}

package/src/components/MlTransitionGeoJsonLayer/assets/sample_polygon_1.json

@@ -0,0 +1,33 @@
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {},
+      "geometry": {
+        "coordinates": [
+          [
+            [7.08646747303149, 50.74485058672653],
+            [7.084287513691095, 50.74371917250187],
+            [7.084437772332876, 50.743610683782215],
+            [7.084640903561933, 50.743721758552354],
+            [7.085805654941254, 50.74293993704128],
+            [7.087023278906713, 50.74218320888983],
+            [7.087791368229503, 50.74258090834434],
+            [7.088796806075749, 50.743261830692745],
+            [7.089275088452752, 50.743701110992674],
+            [7.088087117762917, 50.74409411011173],
+            [7.087662548338368, 50.743784963165815],
+            [7.087184330538875, 50.7440368518605],
+            [7.087233860417484, 50.744077781245316],
+            [7.08714938625954, 50.744122118772154],
+            [7.087057544749172, 50.74427276821896],
+            [7.087104984084277, 50.744509715654885],
+            [7.08646747303149, 50.74485058672653]
+          ]
+        ],
+        "type": "Polygon"
+      }
+    }
+  ]
+}

package/src/components/{MlGeoJsonLayer → MlTransitionGeoJsonLayer}/util/transitionFunctions.js

@@ -2,41 +2,28 @@ import * as turf from "@turf/turf";
 
 const _showNextTransitionSegment = function (
   props,
-  layerId,
   map,
   transitionInProgressRef,
   transitionGeojsonDataRef,
   transitionGeojsonCommonDataRef,
   currentTransitionStepRef,
   msPerStep,
-  transitionTimeoutRef
+  transitionTimeoutRef,
+  setDisplayGeojson
 ) {
-  if (
-    typeof map.getSource(layerId) === "undefined" ||
-    !transitionInProgressRef.current
-  ) {
-    transitionTimeoutRef.current = setTimeout(() => _showNextTransitionSegment(...arguments), msPerStep);
-    return;
-  }
-  if (
-    typeof transitionGeojsonDataRef.current[currentTransitionStepRef.current] !==
-    "undefined"
-  ) {
+  if (typeof transitionGeojsonDataRef.current[currentTransitionStepRef.current] !== "undefined") {
+    // if at last transition step set to target geojson
+    // else to an assembled LineString from common geometry and the current transition step geometry
     let newData =
-      currentTransitionStepRef.current + 1 ===
-      transitionGeojsonDataRef.current.length
+      currentTransitionStepRef.current + 1 === transitionGeojsonDataRef.current.length
         ? props.geojson
         : turf.lineString([
             ...transitionGeojsonCommonDataRef.current,
-            ...transitionGeojsonDataRef.current[currentTransitionStepRef.current]
-              .geometry.coordinates,
+            ...transitionGeojsonDataRef.current[currentTransitionStepRef.current].geometry
+              .coordinates,
           ]);
 
-    if (!map?.getSource?.(layerId)) {
-      return;
-    }
-
-    map.getSource(layerId).setData(newData);
+    setDisplayGeojson(newData);
 
     if (typeof props.onTransitionFrame === "function") {
       props.onTransitionFrame(newData);
@@ -47,7 +34,10 @@ const _showNextTransitionSegment = function (
       transitionInProgressRef.current &&
       currentTransitionStepRef.current < transitionGeojsonDataRef.current.length
     ) {
-      transitionTimeoutRef.current = setTimeout(() => _showNextTransitionSegment(...arguments), msPerStep);
+      transitionTimeoutRef.current = setTimeout(
+        () => _showNextTransitionSegment(...arguments),
+        msPerStep
+      );
     } else {
       if (typeof props.onTransitionEnd === "function") {
         props.onTransitionEnd(props.geojson);
@@ -58,7 +48,6 @@ const _showNextTransitionSegment = function (
 };
 
 const _transitionToGeojson = (
-  newGeojson,
   props,
   transitionGeojsonCommonDataRef,
   transitionGeojsonDataRef,
@@ -67,8 +56,8 @@ const _transitionToGeojson = (
   msPerStep,
   currentTransitionStepRef,
   map,
-  layerId,
-  transitionTimeoutRef
+  transitionTimeoutRef,
+  setDisplayGeojson
 ) => {
   // create the transition geojson between oldGeojsonRef.current and props.geojson
 
@@ -87,7 +76,7 @@ const _transitionToGeojson = (
     type: "Feature",
   };
 
-  let targetGeojson = newGeojson;
+  let targetGeojson = props.geojson;
 
   let longerGeojson = targetGeojson;
   let shorterGeojson = sourceGeojson;
@@ -112,10 +101,7 @@ const _transitionToGeojson = (
     return;
   }
 
-  if (
-    longerGeojson.geometry.coordinates.length <
-    shorterGeojson.geometry.coordinates.length
-  ) {
+  if (longerGeojson.geometry.coordinates.length < shorterGeojson.geometry.coordinates.length) {
     longerGeojson = sourceGeojson;
     shorterGeojson = targetGeojson;
     reverseOrder = true;
@@ -125,15 +111,11 @@ const _transitionToGeojson = (
     for (var i = 0, len = longerGeojson.geometry.coordinates.length; i < len; i++) {
       if (
         typeof shorterGeojson.geometry.coordinates[i] !== "undefined" &&
-        longerGeojson.geometry.coordinates[i][0] ===
-          shorterGeojson.geometry.coordinates[i][0] &&
-        longerGeojson.geometry.coordinates[i][1] ===
-          shorterGeojson.geometry.coordinates[i][1]
+        longerGeojson.geometry.coordinates[i][0] === shorterGeojson.geometry.coordinates[i][0] &&
+        longerGeojson.geometry.coordinates[i][1] === shorterGeojson.geometry.coordinates[i][1]
       ) {
         // if coordinates are equal
-        transitionGeojsonCommonDataRef.current.push(
-          longerGeojson.geometry.coordinates[i]
-        );
+        transitionGeojsonCommonDataRef.current.push(longerGeojson.geometry.coordinates[i]);
       } else {
         if (typeof longerGeojson.geometry.coordinates[i] !== "undefined") {
           transitionCoordinatesLong.push(longerGeojson.geometry.coordinates[i]);
@@ -158,80 +140,42 @@ const _transitionToGeojson = (
 
   let transitionSteps = props.transitionTime / msPerStep;
   let srcCoordinatesDistance =
-    srcCoordinates.length > 1
-      ? Math.round(turf.length(turf.lineString(srcCoordinates)))
-      : 0;
+    srcCoordinates.length > 1 ? Math.round(turf.length(turf.lineString(srcCoordinates))) : 0;
   let targetCoordinatesDistance =
-    targetCoordinates.length > 1
-      ? Math.round(turf.length(turf.lineString(targetCoordinates)))
-      : 0;
+    targetCoordinates.length > 1 ? Math.round(turf.length(turf.lineString(targetCoordinates))) : 0;
   let transitionDistance = targetCoordinatesDistance + srcCoordinatesDistance;
 
   let srcCoordinatesShare = srcCoordinatesDistance / transitionDistance;
   let srcTransitionSteps = Math.round(transitionSteps * srcCoordinatesShare);
-  let srcPerStepDistance =
-    Math.round((srcCoordinatesDistance / srcTransitionSteps) * 100) / 100;
+  let srcPerStepDistance = Math.round((srcCoordinatesDistance / srcTransitionSteps) * 100) / 100;
 
   let targetCoordinatesShare = targetCoordinatesDistance / transitionDistance;
   let targetTransitionSteps = Math.round(transitionSteps * targetCoordinatesShare);
   let targetPerStepDistance =
     Math.round((targetCoordinatesDistance / targetTransitionSteps) * 100) / 100;
 
-  transitionGeojsonDataRef.current = [];
-
   // use srcPerStepDistance as src coordinates are always animated backwards
   let loopStepDistance = srcCoordinatesDistance;
   if (loopStepDistance <= 0) {
     loopStepDistance = 0.1;
   }
-  let tmpLinestring = {};
-  let tmpChunks = {};
-
-  if (srcCoordinates.length > 1) {
-    tmpChunks = turf.lineChunk(
-      turf.lineString(srcCoordinates),
-      srcPerStepDistance
-      //{reverse:true}
-    );
-    // for some reason turf.lineChunk returns the full lineString as element 0, chunks start at 1
-    tmpLinestring = tmpChunks.features[1];
-    for (i = 0; i < srcTransitionSteps; i++) {
-      transitionGeojsonDataRef.current.push(tmpLinestring);
-      if (typeof tmpChunks.features[i] !== "undefined") {
-        tmpLinestring = turf.lineString([
-          ...tmpLinestring.geometry.coordinates,
-          ...tmpChunks.features[i].geometry.coordinates,
-        ]);
-      } else {
-        transitionGeojsonDataRef.current.push(tmpLinestring);
-        break;
-      }
-    }
-    transitionGeojsonDataRef.current.reverse();
-  }
 
-  if (targetCoordinates.length > 1) {
-    loopStepDistance = 0;
-    tmpChunks = turf.lineChunk(
-      turf.lineString(targetCoordinates),
-      targetPerStepDistance
-    );
-    // for some reason turf.lineChunk returns the full lineString as element 0, chunks start at 1
-    tmpLinestring = tmpChunks.features[1];
-    for (i = 0; i < targetTransitionSteps; i++) {
-      transitionGeojsonDataRef.current.push(tmpLinestring);
-      if (typeof tmpChunks.features[i] !== "undefined") {
-        tmpLinestring = turf.lineString([
-          ...tmpLinestring.geometry.coordinates,
-          ...tmpChunks.features[i].geometry.coordinates,
-        ]);
-      } else {
-        transitionGeojsonDataRef.current.push(tmpLinestring);
-        break;
-      }
-    }
-  }
-  transitionGeojsonDataRef.current.push(props.geojson);
+  // create transition step data as an array of all required FeatureCollection states until the transition is complete
+  let transitionStepData;
+
+  transitionStepData = [
+    ...createTransitionSteps(srcCoordinates, srcPerStepDistance, srcTransitionSteps),
+  ];
+  transitionStepData.reverse();
+
+  transitionStepData = [
+    ...transitionStepData,
+    ...createTransitionSteps(targetCoordinates, targetPerStepDistance, targetTransitionSteps),
+  ];
+
+  transitionStepData.push(targetGeojson);
+
+  transitionGeojsonDataRef.current = transitionStepData;
 
   currentTransitionStepRef.current = 1;
   transitionInProgressRef.current = true;
@@ -239,17 +183,39 @@ const _transitionToGeojson = (
     () =>
       _showNextTransitionSegment(
         props,
-        layerId,
         map,
         transitionInProgressRef,
         transitionGeojsonDataRef,
         transitionGeojsonCommonDataRef,
         currentTransitionStepRef,
         msPerStep,
-        transitionTimeoutRef
+        transitionTimeoutRef,
+        setDisplayGeojson
       ),
     msPerStep
   );
 };
 
+let createTransitionSteps = (linestringCoordinates, perStepDistance, stepCnt) => {
+  let transitionSteps = [];
+
+  if (linestringCoordinates.length > 1) {
+    let tmpChunks = turf.lineChunk(turf.lineString(linestringCoordinates), perStepDistance);
+    // tmpLineString contains all coordinates of all previous plus current loop iteration
+    let tmpLinestring = tmpChunks.features[0];
+    for (let i = 0; i < stepCnt; i++) {
+      transitionSteps.push(tmpLinestring);
+      if (typeof tmpChunks.features[i] !== "undefined") {
+        tmpLinestring = turf.lineString([
+          ...tmpLinestring.geometry.coordinates,
+          ...tmpChunks.features[i].geometry.coordinates,
+        ]);
+      } else {
+        break;
+      }
+    }
+  }
+  return transitionSteps;
+};
+
 export { _showNextTransitionSegment, _transitionToGeojson };

package/src/components/MlWmsLayer/MlWmsLayer.js

@@ -2,7 +2,6 @@ import React, { useRef, useEffect } from "react";
 import useMap from "../../hooks/useMap";
 
 import PropTypes from "prop-types";
-import { v4 as uuidv4 } from "uuid";
 
 const defaultProps = {
   visible: true,
@@ -98,7 +97,7 @@ const MlWmsLayer = (props) => {
     if (!props.visible) {
       mapHook.map.setLayoutProperty(layerId.current, "visibility", "none");
     }
-  }, [mapHook.map, props]);
+  }, [mapHook, props]);
 
   useEffect(() => {
     if (!mapHook.map || !initializedRef.current) return;

package/src/decorators/MapContextDecorator.js

@@ -4,6 +4,7 @@ import { MapComponentsProvider } from "@mapcomponents/react-core";
 import MapLibreMap from "../components/MapLibreMap/MapLibreMap";
 import "./style.css";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
+import MlNavgiationTools from "../components/MlNavigationTools/MlNavigationTools";
 
 const theme = createTheme({});
 
@@ -21,6 +22,10 @@ const decorators = [
             }}
             mapId="map_1"
           />
+          <MlNavgiationTools 
+          mapId="map_1">
+
+          </MlNavgiationTools>
         </MapComponentsProvider>
       </ThemeProvider>
     </div>

package/src/decorators/MultiMapContextDecorator.js

@@ -7,6 +7,7 @@ import MapLibreMap from "../components/MapLibreMap/MapLibreMap";
 
 import "./style.css";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
+import MlNavgiationTools from "../components/MlNavigationTools/MlNavigationTools";
 
 const theme = createTheme({});
 
@@ -64,6 +65,11 @@ const decorators = [
                     //],
                   }}
                 />
+
+                <MlNavgiationTools 
+                mapId="map_1">
+
+                </MlNavgiationTools>
               </div>
             </div>
         </MapComponentsProvider>