@mapcomponents/react-maplibre 0.1.23 → 0.1.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mapcomponents/react-maplibre",
-  "version": "0.1.23",
+  "version": "0.1.27",
   "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

@@ -24,7 +24,7 @@ const MlVectorTileLayer = (props) => {
 
     // Add the new layer to the openlayers instance once it is available
     mapHook.map.addSource(
-      layerId,
+      layerId.current,
       {
         type: "vector",
         tiles: [props.url],
@@ -39,7 +39,6 @@ const MlVectorTileLayer = (props) => {
       let _layerId = layerId.current + "_" + key;
       layerIdsRef.current[key] = _layerId;
 
-      console.log(_layerId);
       mapHook.map.addLayer(
         {
           id: _layerId,

package/src/hooks/useMap.js

@@ -11,9 +11,12 @@ function useMap(props) {
     mapId: props.mapId,
     watch: {
       viewport: false,
-      layers: true,
+      layers: props.waitForLayer ? true : false,
       sources: false,
     },
+    filter: {
+      includeBaseLayers: true,
+    },
   });
 
   const initializedRef = useRef(false);
@@ -21,7 +24,7 @@ function useMap(props) {
 
   const componentId = useRef(uuidv4());
 
-  const [mapIsReady, setMapIsReady] = useState(undefined);
+  const [mapIsReady, setMapIsReady] = useState(false);
 
   useEffect(() => {
     let _componentId = componentId.current;

package/src/hooks/useMapState.js

@@ -61,6 +61,7 @@ function useMapState(props) {
     let _componentId = componentId.current;
 
     return () => {
+      // cleanup all event listeners
       if (mapRef.current) {
         mapRef.current.cleanup(_componentId);
         mapRef.current = undefined;
@@ -79,6 +80,7 @@ function useMapState(props) {
     if (props?.watch?.viewport) {
       setViewport(mapRef.current.wrapper.viewportState);
 
+      // register viewportchange event handler
       mapRef.current.wrapper.on(
         "viewportchange",
         () => {
@@ -90,6 +92,7 @@ function useMapState(props) {
       );
     }
 
+    // register layerchange event handler
     if (props?.watch?.layers) {
       refreshLayerState();
 

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