@mapcomponents/react-maplibre 0.1.11 → 0.1.15

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/MlGeoJsonLayer/MlGeoJsonLayer.meta.json

@@ -1,6 +1,6 @@
 {
   "name": "MlGeoJsonLayer",
-  "title": "GeoJSON level",
+  "title": "GeoJSON layer",
   "description": "",
   "i18n": {
     "de": {

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 (

package/src/components/MlLayerSwipe/MlLayerSwipe.js

@@ -22,7 +22,7 @@ const MlLayerSwipe = (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;
     }
 
@@ -53,8 +53,7 @@ const MlLayerSwipe = (props) => {
         setSwipeX(swipeX_tmp);
         swipeXRef.current = swipeX_tmp;
 
-        var clipA =
-          "rect(0, " + (swipeXRef.current * bounds.width) / 100 + "px, 999em, 0)";
+        var clipA = "rect(0, " + (swipeXRef.current * bounds.width) / 100 + "px, 999em, 0)";
 
         mapContext.maps[props.map2Id].getContainer().style.clip = clipA;
       }
@@ -71,8 +70,8 @@ const MlLayerSwipe = (props) => {
 
     initializedRef.current = true;
     syncCleanupFunctionRef.current = syncMove(
-      mapContext.getMap(props.map1Id),
-      mapContext.getMap(props.map2Id)
+      mapContext.getMap(props.map1Id).map,
+      mapContext.getMap(props.map2Id).map
     );
     onMove({ clientX: mapContext.maps[props.map1Id].getCanvas().clientWidth / 2 });
   }, [mapContext.mapIds, mapContext, props, onMove, mapExists]);

package/src/components/MlLayerSwitcher/MlLayerSwitcher.css

@@ -0,0 +1,17 @@
+.mllayerswitcher-layer-box.activeHighlight > .mllayerswitcher-layer-image {
+    border-color:  rgb(181, 215, 238);
+    border-radius: 8px;
+}
+.mllayerswitcher-layer-box.activeHighlight > .mllayerswitcher-layer-text {
+    color:  rgb(181, 215, 238) !important;
+  
+}
+
+.mllayerswitcher-layer-box.active > .mllayerswitcher-layer-image {
+    border-color:  rgb(196, 240, 0);
+    border-radius: 8px;
+}
+.mllayerswitcher-layer-box.active > .mllayerswitcher-layer-text {
+    color:  rgb(252, 0, 0) !important;
+  
+}

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

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