@mapcomponents/react-maplibre 0.1.22 → 0.1.26

package/package.json

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

package/src/components/MlFollowGps/MlFollowGps.js

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useState, useCallback } from "react";
+import React, { useEffect, useState, useCallback } from "react";
 import PropTypes from "prop-types";
 import useMap from "../../hooks/useMap";
 
@@ -6,9 +6,6 @@ import Button from "@mui/material/Button";
 import RoomIcon from "@mui/icons-material/Room";
 import { point, circle } from "@turf/turf";
 import MlGeoJsonLayer from "../MlGeoJsonLayer/MlGeoJsonLayer";
-import MlImageMarkerLayer from "../MlImageMarkerLayer/MlImageMarkerLayer";
-
-import marker from "./assets/marker.png";
 
 /**
  * Adds a button that makes the map follow the users GPS position using
@@ -24,25 +21,20 @@ const MlFollowGps = (props) => {
 
   const [isFollowed, setIsFollowed] = useState(false);
   const [geoJson, setGeoJson] = useState(undefined);
-  const watchIdRef = useRef(undefined);
   const [locationAccessDenied, setLocationAccessDenied] = useState(false);
 
   const [accuracyGeoJson, setAccuracyGeoJson] = useState();
 
-  useEffect(() => {
-    return () => {
-      if (watchIdRef.current) {
-        navigator.geolocation.clearWatch(watchIdRef.current);
-        watchIdRef.current = undefined;
-      }
-    };
-  }, []);
-
   const getLocationSuccess = useCallback(
     (pos) => {
       if (!mapHook.map) return;
 
-      mapHook.map.setCenter([pos.coords.longitude, pos.coords.latitude]);
+      mapHook.map.flyTo({
+        center: [pos.coords.longitude, pos.coords.latitude],
+        zoom: 18,
+        speed: 1,
+        curve: 1,
+      });
       const geoJsonPoint = point([pos.coords.longitude, pos.coords.latitude]);
       setGeoJson(geoJsonPoint);
       setAccuracyGeoJson(circle(geoJsonPoint, pos.coords.accuracy / 1000));
@@ -59,12 +51,11 @@ const MlFollowGps = (props) => {
     if (!mapHook.map) return;
 
     if (isFollowed) {
-      watchIdRef.current = navigator.geolocation.watchPosition(
-        getLocationSuccess,
-        getLocationError
-      );
-    } else {
-      navigator.geolocation.clearWatch(watchIdRef.current);
+      let _watchId = navigator.geolocation.watchPosition(getLocationSuccess, getLocationError);
+
+      return () => {
+        navigator.geolocation.clearWatch(_watchId);
+      };
     }
   }, [isFollowed, getLocationSuccess]);
 
@@ -75,30 +66,26 @@ const MlFollowGps = (props) => {
           geojson={accuracyGeoJson}
           type={"fill"}
           paint={{
-            "fill-color": "#ee7700",
-            "fill-opacity": 0.5,
+            "fill-color": "#cbd300",
+            "fill-opacity": 0.3,
             ...props.accuracyPaint,
           }}
-          insertBeforeLayer={"MlFollowGpsMarker"}
+          insertBeforeLayer={props.insertBeforeLayer}
         />
       )}
 
       {isFollowed && geoJson && (
-        <MlImageMarkerLayer
-          layerId={"MlFollowGpsMarker"}
-          options={{
-            type: "symbol",
-            source: {
-              type: "geojson",
-              data: geoJson,
-            },
-            layout: {
-              "icon-size": 0.1,
-              "icon-offset": [0, -340],
-              ...props.markerLayout,
-            },
+        <MlGeoJsonLayer
+          geojson={geoJson}
+          type={"circle"}
+          paint={{
+            "circle-color": "#009ee0",
+            "circle-radius": 5,
+            "circle-stroke-color": "#fafaff",
+            "circle-stroke-width": 1,
+            ...props.circlePaint,
           }}
-          imgSrc={props.markerImage || marker}
+          insertBeforeLayer={props.insertBeforeLayer}
         />
       )}
 
@@ -160,14 +147,10 @@ MlFollowGps.propTypes = {
    */
   accuracyPaint: PropTypes.object,
   /**
-   * Marker layout property object, that is passed to the MlImageMarkerLayer responsible for drawing the position marker.
-   * Use any available layout property from layer type "symbol".
-   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#symbol
-   */
-  markerLayout: PropTypes.object,
-  /**
-   * Replace the default marker image with a custom one.
+   * position circle paint property object, that is passed to the MlGeoJsonLayer responsible for drawing the accuracy circle.
+   * Use any available paint prop from layer type "fill".
+   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
    */
-  markerImage: PropTypes.string,
+  circlePaint: PropTypes.object,
 };
 export default MlFollowGps;

package/src/components/MlFollowGps/MlFollowGps.test.js

@@ -58,6 +58,6 @@ describe("<MlFollowGps>", () => {
     wrapper.find("MlFollowGps button").simulate("click");
     //wrapper.find(".toggle_layer_visible").simulate("click");
 
-    await waitFor(() => expect(mockGeolocation.clearWatch).toHaveBeenCalledTimes(2));
+    await waitFor(() => expect(mockGeolocation.clearWatch).toHaveBeenCalledTimes(1));
   });
 });

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,74 @@ 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])) {
+      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 +86,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 +114,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}"
 );

package/src/hooks/useWms.js

@@ -63,7 +63,7 @@ function useWms(props) {
   useEffect(() => {
     if (!capabilities?.Service) return;
 
-    setWmsUrl(capabilities.Service.OnlineResource);
+    setWmsUrl(capabilities.Capability?.Request?.GetMap?.DCPType?.[0]?.HTTP?.Get?.OnlineResource);
     // set getFeatureInfo url
     setGetFeatureInfoUrl(
       capabilities.Capability?.Request?.GetFeatureInfo?.DCPType?.[0]?.HTTP?.Get?.OnlineResource