@mapcomponents/react-maplibre 0.1.22 → 0.1.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mapcomponents/react-maplibre",
-  "version": "0.1.22",
+  "version": "0.1.23",
   "license": "MIT",
   "private": false,
   "module": "dist/index.esm.js",

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,90 +9,75 @@ 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,
+      {
+        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;
+
+      console.log(_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])) {
+      if (mapHook.map.getLayer(layerIdsRef.current[key])) {
         // update changed paint property
         let layerPaintConfString = JSON.stringify(props.layers[key].paint);
 
         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;
@@ -102,38 +87,17 @@ const MlVectorTileLayer = (props) => {
 
         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]
-              );
+            mapHook.map.setLayoutProperty(
+              layerIdsRef.current[key],
+              layoutKey,
+              props.layers[key].layout[layoutKey]
+            );
           }
         }
         layerLayoutConfsRef.current[key] = layerLayoutConfString;
       }
     }
-  }, [props.layers, props, mapContext]);
-
-  useEffect(() => {
-    if (!mapRef.current) return;
-
-    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]);
+  }, [props.layers, mapHook.map]);
 
   return <></>;
 };
@@ -151,10 +115,6 @@ 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/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}"
 );