@mapcomponents/react-maplibre 0.1.20 → 0.1.24

package/src/components/MlVectorTileLayer/MlVectorTileLayer.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";
 
 /**
@@ -9,104 +9,94 @@ import PropTypes from "prop-types";
  * @component
  */
 const MlVectorTileLayer = (props) => {
-  const mapContext = useContext(MapContext);
+  const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
 
-  const layerName = "vector-tile-layer-";
-  const sourceName = "vector-tile-source-";
-  const idSuffixRef = useRef(new Date().getTime());
   const layerIdsRef = useRef({});
+  const layerId = useRef(props.layerId || "MlVectorTileLayer-" + mapHook.componentId);
   const layerPaintConfsRef = useRef({});
+  const layerLayoutConfsRef = useRef({});
   const initializedRef = useRef(false);
-  const mapRef = useRef(null);
-
-  const cleanup = () => {
-    if (mapRef.current && mapRef.current.style) {
-      for (let key in layerIdsRef.current) {
-        if (mapRef.current.getLayer(layerIdsRef.current[key])) {
-          mapRef.current.removeLayer(layerIdsRef.current[key]);
-        }
-      }
-      if (mapRef.current.getSource(sourceName + idSuffixRef.current)) {
-        mapRef.current.removeSource(sourceName + idSuffixRef.current);
-      }
-    }
-  };
-
-  useEffect(() => {
-    return cleanup;
-  }, []);
 
   useEffect(() => {
-    if (!mapContext.mapExists(props.mapId) || initializedRef.current) return;
+    if (!mapHook.map || initializedRef.current) return;
 
     initializedRef.current = true;
-    mapRef.current = mapContext.getMap(props.mapId);
 
     // Add the new layer to the openlayers instance once it is available
-    mapRef.current.addSource(sourceName + idSuffixRef.current, {
-      type: "vector",
-      tiles: [props.url],
-      tileSize: 512,
-      attribution: "",
-      ...props.sourceOptions,
-    });
+    mapHook.map.addSource(
+      layerId.current,
+      {
+        type: "vector",
+        tiles: [props.url],
+        tileSize: 512,
+        attribution: "",
+        ...props.sourceOptions,
+      },
+      mapHook.componentId
+    );
 
     for (let key in props.layers) {
-      let layerId = layerName + "_" + key + "_" + idSuffixRef.current;
-      layerIdsRef.current[key] = layerId;
-
-      mapRef.current.addLayer({
-        id: layerId,
-        source: sourceName + idSuffixRef.current,
-        type: "line",
-        minzoom: 0,
-        maxzoom: 22,
-        layout: {},
-        paint: {
-          "line-opacity": 0.5,
-          "line-color": "rgb(80, 80, 80)",
-          "line-width": 2,
+      let _layerId = layerId.current + "_" + key;
+      layerIdsRef.current[key] = _layerId;
+
+      mapHook.map.addLayer(
+        {
+          id: _layerId,
+          source: layerId.current,
+          type: "line",
+          minzoom: 0,
+          maxzoom: 22,
+          layout: {},
+          paint: {
+            "line-opacity": 0.5,
+            "line-color": "rgb(80, 80, 80)",
+            "line-width": 2,
+          },
+          ...props.layers[key],
         },
-        ...props.layers[key],
-      });
+        props.insertBeforeLayer,
+        mapHook.componentId
+      );
       layerPaintConfsRef.current[key] = JSON.stringify(props.layers[key].paint);
+      layerLayoutConfsRef.current[key] = JSON.stringify(props.layers[key].layout);
     }
-  }, [mapContext.mapIds, props, mapContext]);
+  }, [mapHook.map, props]);
 
   useEffect(() => {
-    if (!mapRef.current) return;
-    // the MapLibre-gl instance (mapContext.map) is accessible here
+    if (!mapHook.map || !initializedRef.current) return;
     // 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);
+      if (mapHook.map.getLayer(layerIdsRef.current[key])) {
+        // 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)
-              .setPaintProperty(
-                layerIdsRef.current[key],
-                paintKey,
-                props.layers[key].paint[paintKey]
-              );
+            mapHook.map.setPaintProperty(
+              layerIdsRef.current[key],
+              paintKey,
+              props.layers[key].paint[paintKey]
+            );
+          }
+        }
+        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) {
+            mapHook.map.setLayoutProperty(
+              layerIdsRef.current[key],
+              layoutKey,
+              props.layers[key].layout[layoutKey]
+            );
           }
         }
-        layerPaintConfsRef.current[key] = layerConfString;
+        layerLayoutConfsRef.current[key] = layerLayoutConfString;
       }
     }
-  }, [props.layers, props, mapContext]);
-
-  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");
-    }
-  }, [props.visible]);
+  }, [props.layers, mapHook.map]);
 
   return <></>;
 };

package/src/components/MlVectorTileLayer/MlVectorTileLayer.test.js

@@ -1,12 +1,12 @@
 import { layerRemovalTest, sourceRemovalTest } from "../../util";
 
 import MlVectorTileLayer from "./MlVectorTileLayer";
+import { uuid_regex } from "../../setupTests";
 
 const testComponent = (
   <MlVectorTileLayer
     {...{
-      url:
-        "https://wms.wheregroup.com/tileserver/tile/tileserver.php?/europe-0-14/index.json?/europe-0-14/{z}/{x}/{y}.pbf",
+      url: "https://wms.wheregroup.com/tileserver/tile/tileserver.php?/europe-0-14/index.json?/europe-0-14/{z}/{x}/{y}.pbf",
       layers: {
         landuseLine: {
           "source-layer": "landuse",
@@ -28,12 +28,12 @@ const testComponent = (
 layerRemovalTest(
   "<MlVectorTileLayer />",
   testComponent,
-  /^.*"vector-tile-layer-_landuseLine_[0-9]*".*$/,
-  "vector-tile-layer-_landuseLine_{unix-timestamp}"
+  new RegExp('^.*"MlVectorTileLayer-' + uuid_regex + '_landuseLine".*$'),
+  "MlVectorTileLayer-{uuid}_landuseLine"
 );
 sourceRemovalTest(
   "<MlVectorTileLayer />",
   testComponent,
-  /^.*"vector-tile-source-[0-9]*".*$/,
-  "vector-tile-source-{unix-timestamp}"
+  new RegExp('^.*"MlVectorTileLayer-' + uuid_regex + '".*$'),
+  "MlVectorTileLayer-{uuid}"
 );

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";