@mapcomponents/react-maplibre 0.1.17 → 0.1.21

package/src/components/MlShareMapState/MlShareMapState.stories.js

@@ -1,8 +1,22 @@
-import React, { useState} from "react";
+import React, { useState } from "react";
 
 import MlShareMapState from "./MlShareMapState";
 import mapContextDecorator from "../../decorators/MapContextDecorator";
-import MlLayer from "../MlLayer/MlLayer";
+import useMapState from "../../hooks/useMapState";
+import useMap from "../../hooks/useMap";
+import Sidebar from "../../ui_components/Sidebar";
+import ListItem from "@mui/material/ListItem";
+import IconButton from "@mui/material/IconButton";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
+import ListItemText from "@mui/material/ListItemText";
+import sample_geojson_1 from "../MlGeoJsonLayer/assets/sample_1.json";
+import sample_geojson_2 from "../MlGeoJsonLayer/assets/sample_2.json";
+import List from "@mui/material/List";
+import MlGeoJsonLayer from "../MlGeoJsonLayer/MlGeoJsonLayer";
+import { ToggleButton } from "@mui/material";
+import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
+import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
 
 const storyoptions = {
   title: "MapComponents/MlShareMapState",
@@ -12,37 +26,73 @@ const storyoptions = {
 };
 export default storyoptions;
 
-const Template = (args) => {
-  const [watchState, setWatchState] = useState(false);
-  const [testLayerVisible, setTestLayerVisible] = useState(true);
+const Template = () => {
+  const geoJsonArray = [sample_geojson_1, sample_geojson_2];
+  const [watchState, setWatchState] = useState(true);
+  const mapHook = useMap({ mapId: "map_1" });
+  const mapState = useMapState({
+    mapId: "map_1",
+    watch: {
+      viewport: false,
+      layers: true,
+      sources: false,
+    },
+    filter: {
+      includeBaseLayers: false,
+    },
+  });
 
   return (
     <>
-      <button
-        style={{ zIndex: "1000", position: "absolute" }}
-        onClick={() => setWatchState(!watchState)}
-      >
-        watch map state {watchState ? 1 : 0}
-      </button>
-      <button
-        style={{ zIndex: "1000", position: "absolute" }}
-        onClick={() => setTestLayerVisible(!testLayerVisible)}
-      >
-        visibility {testLayerVisible ? 1 : 0}
-      </button>
       <MlShareMapState active={watchState} />
-      <MlLayer
-        layerId={"MlLayer-testLayer"}
-        options={{ layout: { visibility: testLayerVisible ? "visible" : "none" } }}
-      />
-      <MlLayer
-        layerId={"MlLayer-testLayer2"}
-        options={{ layout: { visibility: testLayerVisible ? "visible" : "none" } }}
-      />
-      <MlLayer
-        layerId={"MlLayer-testLayer3"}
-        options={{ layout: { visibility: testLayerVisible ? "visible" : "none" } }}
-      />
+      {geoJsonArray.map((el, i) => (
+        <MlGeoJsonLayer layerId={"GeoJson_" + i} type="line" geojson={el} key={"GeoJson_" + i} />
+      ))}
+      <Sidebar sx={{ wordBreak: "break-word" }}>
+        <ToggleButton
+          size="small"
+          selected={watchState}
+          value={watchState}
+          onChange={() => {
+            setWatchState(!watchState);
+          }}
+        >
+          {watchState ? <CheckCircleOutlineIcon /> : <ErrorOutlineIcon />}
+
+          {watchState ? "active" : "inactive"}
+        </ToggleButton>
+        <List dense key="layers">
+          {mapState.layers?.map((el) => (
+            <ListItem
+              key={el.id}
+              secondaryAction={
+                <IconButton
+                  edge="end"
+                  aria-label="toggle visibility"
+                  onClick={() => {
+                    let currentVisibility = mapHook.map
+                      ?.getLayer?.(el.id)
+                      ?.getLayoutProperty("visibility");
+                    mapHook.map
+                      ?.getLayer?.(el.id)
+                      ?.setLayoutProperty(
+                        "visibility",
+                        currentVisibility === "none" ? "visible" : "none"
+                      );
+                    setTimeout(() => {
+                      mapHook.map._render();
+                    }, 100);
+                  }}
+                >
+                  {el.visible ? <VisibilityIcon /> : <VisibilityOffIcon />}
+                </IconButton>
+              }
+            >
+              <ListItemText primary={el.id} secondary={""} />
+            </ListItem>
+          ))}
+        </List>
+      </Sidebar>
     </>
   );
 };

package/src/components/MlVectorTileLayer/MlVectorTileLayer.js

@@ -48,7 +48,7 @@ const MlVectorTileLayer = (props) => {
       tiles: [props.url],
       tileSize: 512,
       attribution: "",
-      //...props.sourceOptions,
+      ...props.sourceOptions,
     });
 
     for (let key in props.layers) {
@@ -100,11 +100,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 +132,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

@@ -25,8 +25,12 @@ function useMap(props) {
 
   useEffect(() => {
     let _componentId = componentId.current;
+    console.log("initialize maphook");
 
     return () => {
+      console.log("cleanup maphook");
+      console.log(typeof mapRef.current);
+      console.log(JSON.stringify(mapRef.current.style._order));
       if (mapRef.current) {
         mapRef.current.cleanup(_componentId);
         mapRef.current = undefined;