@mapcomponents/react-maplibre 0.1.18 → 0.1.22

package/src/components/MlVectorTileLayer/MlVectorTileLayer.js

@@ -16,6 +16,7 @@ const MlVectorTileLayer = (props) => {
   const idSuffixRef = useRef(new Date().getTime());
   const layerIdsRef = useRef({});
   const layerPaintConfsRef = useRef({});
+  const layerLayoutConfsRef = useRef({});
   const initializedRef = useRef(false);
   const mapRef = useRef(null);
 
@@ -48,7 +49,7 @@ const MlVectorTileLayer = (props) => {
       tiles: [props.url],
       tileSize: 512,
       attribution: "",
-      //...props.sourceOptions,
+      ...props.sourceOptions,
     });
 
     for (let key in props.layers) {
@@ -70,6 +71,7 @@ const MlVectorTileLayer = (props) => {
         ...props.layers[key],
       });
       layerPaintConfsRef.current[key] = JSON.stringify(props.layers[key].paint);
+      layerLayoutConfsRef.current[key] = JSON.stringify(props.layers[key].layout);
     }
   }, [mapContext.mapIds, props, mapContext]);
 
@@ -79,9 +81,10 @@ const MlVectorTileLayer = (props) => {
     // initialize the layer and add it to the MapLibre-gl instance or do something else with it
     for (var key in props.layers) {
       if (mapRef.current.getLayer(layerIdsRef.current[key])) {
-        let layerConfString = JSON.stringify(props.layers[key].paint);
+        // update changed paint property
+        let layerPaintConfString = JSON.stringify(props.layers[key].paint);
 
-        if (layerConfString !== layerPaintConfsRef.current[key]) {
+        if (layerPaintConfString !== layerPaintConfsRef.current[key]) {
           for (let paintKey in props.layers[key].paint) {
             mapContext
               .getMap(props.mapId)
@@ -92,7 +95,23 @@ const MlVectorTileLayer = (props) => {
               );
           }
         }
-        layerPaintConfsRef.current[key] = layerConfString;
+        layerPaintConfsRef.current[key] = layerPaintConfString;
+
+        // update changed layout property
+        let layerLayoutConfString = JSON.stringify(props.layers[key].layout);
+
+        if (layerLayoutConfString !== layerLayoutConfsRef.current[key]) {
+          for (let layoutKey in props.layers[key].layout) {
+            mapContext
+              .getMap(props.mapId)
+              .setLayoutProperty(
+                layerIdsRef.current[key],
+                layoutKey,
+                props.layers[key].layout[layoutKey]
+              );
+          }
+        }
+        layerLayoutConfsRef.current[key] = layerLayoutConfString;
       }
     }
   }, [props.layers, props, mapContext]);
@@ -100,11 +119,19 @@ const MlVectorTileLayer = (props) => {
   useEffect(() => {
     if (!mapRef.current) return;
 
-    // toggle layer visibility by changing the layout object's visibility property
-    if (props.visible) {
-      mapRef.current.setLayoutProperty(layerName + idSuffixRef.current, "visibility", "visible");
-    } else {
-      mapRef.current.setLayoutProperty(layerName + idSuffixRef.current, "visibility", "none");
+    for (var key in props.layers) {
+      if (mapRef.current.getLayer(layerIdsRef.current[key])) {
+        // toggle layer visibility by changing the layout object's visibility property
+        if (props.visible) {
+          mapContext
+            .getMap(props.mapId)
+            .setLayoutProperty(layerIdsRef.current[key], "visibility", "visible");
+        } else {
+          mapContext
+            .getMap(props.mapId)
+            .setLayoutProperty(layerIdsRef.current[key], "visibility", "none");
+        }
+      }
     }
   }, [props.visible]);
 
@@ -124,6 +151,10 @@ MlVectorTileLayer.propTypes = {
    * Object that hold layers
    */
   layers: PropTypes.object,
+  /**
+   * Boolean value to control the visibility of this layer
+   */
+  visible: PropTypes.bool,
   /**
    * String of the URL of a wms layer
    */

package/src/components/MlWmsLayer/MlWmsLayer.js

@@ -1,5 +1,5 @@
-import React, { useContext, useRef, useEffect } from "react";
-import { MapContext } from "@mapcomponents/react-core";
+import React, { useRef, useEffect } from "react";
+import useMap from "../../hooks/useMap";
 
 import PropTypes from "prop-types";
 import { v4 as uuidv4 } from "uuid";
@@ -45,31 +45,13 @@ const defaultProps = {
  * @component
  */
 const MlWmsLayer = (props) => {
-  const mapContext = useContext(MapContext);
+  const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
 
-  const componentId = useRef(props.layerId || ("MlWmsLayer-" + uuidv4()));
-  const mapRef = useRef(null);
   const initializedRef = useRef(false);
-  const layerId = useRef(props.layerId || componentId.current);
+  const layerId = useRef(props.layerId || "MlWmsLayer-" + 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);
-
-        mapRef.current = null;
-      }
-      initializedRef.current = false;
-    };
-  }, []);
-
-  useEffect(() => {
-    if (!mapContext.mapExists(props.mapId) || initializedRef.current) return;
-
-    mapRef.current = mapContext.getMap(props.mapId);
-    if (!mapRef.current) return;
+    if (!mapHook.map || initializedRef.current) return;
 
     initializedRef.current = true;
 
@@ -90,7 +72,7 @@ const MlWmsLayer = (props) => {
     let urlParamsStr =
       decodeURIComponent(urlParams.toString()) + "".replace(/%2F/g, "/").replace(/%3A/g, ":");
 
-    mapRef.current.addSource(
+    mapHook.map.addSource(
       layerId.current,
       {
         type: "raster",
@@ -99,35 +81,35 @@ const MlWmsLayer = (props) => {
         attribution: props.attribution,
         ...props.sourceOptions,
       },
-      componentId.current
+      mapHook.componentId
     );
 
-    mapRef.current.addLayer(
+    mapHook.map.addLayer(
       {
         id: layerId.current,
         type: "raster",
-        source: componentId.current,
+        source: layerId.current,
         ...props.layerOptions,
       },
       props.insertBeforeLayer,
-      componentId.current
+      mapHook.componentId
     );
 
     if (!props.visible) {
-      mapRef.current.setLayoutProperty(componentId.current, "visibility", "none");
+      mapHook.map.setLayoutProperty(layerId.current, "visibility", "none");
     }
-  }, [mapContext.mapIds, mapContext, props]);
+  }, [mapHook.map, props]);
 
   useEffect(() => {
-    if (!mapRef.current || !initializedRef.current) return;
+    if (!mapHook.map || !initializedRef.current) return;
 
     // toggle layer visibility by changing the layout object's visibility property
     if (props.visible) {
-      mapRef.current.setLayoutProperty(componentId.current, "visibility", "visible");
+      mapHook.map.setLayoutProperty(layerId.current, "visibility", "visible");
     } else {
-      mapRef.current.setLayoutProperty(componentId.current, "visibility", "none");
+      mapHook.map.setLayoutProperty(layerId.current, "visibility", "none");
     }
-  }, [props.visible]);
+  }, [props.visible, mapHook.map]);
 
   return <></>;
 };

package/src/hooks/useMap.js

@@ -1,4 +1,4 @@
-import { useContext, useState, useEffect, useRef } from "react";
+import React, { useContext, useState, useEffect, useRef } from "react";
 import { v4 as uuidv4 } from "uuid";
 import { MapContext } from "@mapcomponents/react-core";
 import useMapState from "./useMapState";