@mapcomponents/react-maplibre 0.1.13 → 0.1.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mapcomponents/react-maplibre",
-  "version": "0.1.13",
+  "version": "0.1.17",
   "license": "MIT",
   "private": false,
   "module": "dist/index.esm.js",
@@ -12,7 +12,7 @@
     "@fontsource/roboto": "^4.5.1",
     "@mapbox/mapbox-gl-draw": "^1.2.0",
     "@mapbox/mapbox-gl-sync-move": "^0.3.0",
-    "@mapcomponents/react-core": "^0.1.1",
+    "@mapcomponents/react-core": "^0.1.7",
     "@mui/icons-material": "^5.0.1",
     "@mui/material": "5.0.0",
     "@mui/styles": "^5.0.1",

package/src/components/MapLibreMap/lib/MapLibreGlWrapper.js

@@ -1,3 +1,4 @@
+// @ts-ignore: TS export Problem to be fixed upstream
 import maplibregl from "maplibre-gl/dist/maplibre-gl";
 
 /**
@@ -68,6 +69,7 @@ const MapLibreGlWrapper = function (props) {
         if (!Object.is(item.handler, handler)) {
           return item;
         }
+        return false;
       });
     },
     /**
@@ -91,7 +93,7 @@ const MapLibreGlWrapper = function (props) {
     /**
      * Array containing an object for each layer in the MapLibre instance providing information on visibility, loading state, order, paint & layout properties
      */
-    layerState: {},
+    layerState: [],
     /**
      * Maps layerIds to layerState in JSON string form for quick deep comparisons
      */
@@ -110,7 +112,7 @@ const MapLibreGlWrapper = function (props) {
       //if (self.baseLayers.indexOf(layer.id) === -1) {
       let paint = {};
       let values = layer.paint?._values;
-      Object.keys(values || {}).map((propName) => {
+      Object.keys(values || {}).forEach((propName) => {
         paint[propName] =
           typeof values[propName].value !== "undefined"
             ? values[propName].value.value
@@ -118,7 +120,7 @@ const MapLibreGlWrapper = function (props) {
       });
       let layout = {};
       values = layer.layout?._values;
-      Object.keys(values || {}).map((propName) => {
+      Object.keys(values || {}).forEach((propName) => {
         layout[propName] =
           typeof values[propName].value !== "undefined"
             ? values[propName].value.value
@@ -499,17 +501,17 @@ const MapLibreGlWrapper = function (props) {
     self.wrapper.refreshViewport();
     self.wrapper.fire("viewportchange");
 
-      self.map.on("move", () => {
-        self.wrapper.viewportState = self.wrapper.getViewport();
-        self.wrapper.fire("viewportchange");
-      });
-      self.map.on("data", () => {
-        self.wrapper.refreshLayerState();
-        self.wrapper.fire("layerchange");
-      });
-      if (typeof props.onReady === "function") {
-        props.onReady(self.map, self);
-      }
+    self.map.on("move", () => {
+      self.wrapper.viewportState = self.wrapper.getViewport();
+      self.wrapper.fire("viewportchange");
+    });
+    self.map.on("data", () => {
+      self.wrapper.refreshLayerState();
+      self.wrapper.fire("layerchange");
+    });
+    if (typeof props.onReady === "function") {
+      props.onReady(self.map, self);
+    }
   };
   initializeMapLibre();
 };

package/src/components/MlComponentTemplate/MlComponentTemplate.js

@@ -1,8 +1,6 @@
-import React, { useRef, useEffect, useContext } from "react";
+import React, { useRef, useEffect } from "react";
 import PropTypes from "prop-types";
-
-import { MapContext } from "@mapcomponents/react-core";
-import { v4 as uuidv4 } from "uuid";
+import useMap from "../../hooks/useMap";
 
 /**
  * TODO: Add short & useful description
@@ -13,40 +11,17 @@ import { v4 as uuidv4 } from "uuid";
  * @component
  */
 const MlComponentTemplate = (props) => {
-  // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
-  const mapContext = useContext(MapContext);
-
+  const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
   const initializedRef = useRef(false);
-  const mapRef = useRef(undefined);
-  const componentId = useRef((props.idPrefix ? props.idPrefix : "MlComponentTemplate-") + uuidv4());
-
-  useEffect(() => {
-    let _componentId = componentId.current;
-
-    return () => {
-      // This is the cleanup function, it is called when this react component is removed from react-dom
-      // try to remove anything this component has added to the MapLibre-gl instance
-      // e.g.: remove the layer
-      // mapContext.getMap(props.mapId).removeLayer(layerRef.current);
-      // check for the existence of map.style before calling getLayer or getSource
-
-      if (mapRef.current) {
-        mapRef.current.cleanup(_componentId);
-        mapRef.current = undefined;
-      }
-      initializedRef.current = false;
-    };
-  }, []);
 
   useEffect(() => {
-    if (!mapContext.mapExists(props.mapId) || initializedRef.current) return;
-    // the MapLibre-gl instance (mapContext.getMap(props.mapId)) is accessible here
+    if (!mapHook.mapIsReady || initializedRef.current) return;
+    // the MapLibre-gl instance (mapHook.map) is accessible here
     // initialize the layer and add it to the MapLibre-gl instance or do something else with it
     initializedRef.current = true;
-    mapRef.current = mapContext.getMap(props.mapId);
 
-    mapRef.current.setCenter([7.132122000552613, 50.716405378037706]);
-  }, [mapContext.mapIds, mapContext, props.mapId]);
+    mapHook.map.setCenter([7.132122000552613, 50.716405378037706]);
+  }, [mapHook.map, mapHook.mapIsReady, props.mapId]);
 
   return <></>;
 };

package/src/components/MlFollowGps/MlFollowGps.js

@@ -1,11 +1,10 @@
-import React, {useRef, useEffect, useContext, useState} from "react";
+import React, { useRef, useEffect, useState, useCallback } from "react";
 import PropTypes from "prop-types";
+import useMap from "../../hooks/useMap";
 
-import {MapContext} from "@mapcomponents/react-core";
-import {v4 as uuidv4} from "uuid";
 import Button from "@mui/material/Button";
 import RoomIcon from "@mui/icons-material/Room";
-import {point} from "@turf/turf"
+import { point, circle } from "@turf/turf";
 import MlGeoJsonLayer from "../MlGeoJsonLayer/MlGeoJsonLayer";
 import MlImageMarkerLayer from "../MlImageMarkerLayer/MlImageMarkerLayer";
 
@@ -21,88 +20,72 @@ import marker from "./assets/marker.png";
  * @component
  */
 const MlFollowGps = (props) => {
-  // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
-  const mapContext = useContext(MapContext);
+  const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
+
   const [isFollowed, setIsFollowed] = useState(false);
   const [geoJson, setGeoJson] = useState(undefined);
   const watchIdRef = useRef(undefined);
   const [locationAccessDenied, setLocationAccessDenied] = useState(false);
 
-  const initializedRef = useRef(false);
-  const mapRef = useRef(undefined);
-  const componentId = useRef((props.idPrefix ? props.idPrefix : "MlFollowGps-") + uuidv4());
-  const [accuracyRadius, setAccuracyRadius] = useState(30);
+  const [accuracyGeoJson, setAccuracyGeoJson] = useState();
 
   useEffect(() => {
-    let _componentId = componentId.current;
-
     return () => {
-      // This is the cleanup function, it is called when this react component is removed from react-dom
-      // try to remove anything this component has added to the MapLibre-gl instance
-      // e.g.: remove the layer
-      // mapContext.getMap(props.mapId).removeLayer(layerRef.current);
-      // check for the existence of map.style before calling getLayer or getSource
-
-      if (mapRef.current) {
-        mapRef.current.cleanup(_componentId);
-        mapRef.current = undefined;
-      }
       if (watchIdRef.current) {
-        initializedRef.current = false;
         navigator.geolocation.clearWatch(watchIdRef.current);
         watchIdRef.current = undefined;
       }
     };
   }, []);
 
-  useEffect(() => {
-    if (!mapContext.mapExists(props.mapId) || initializedRef.current) return;
-    // the MapLibre-gl instance (mapContext.getMap(props.mapId)) is accessible here
-    // initialize the layer and add it to the MapLibre-gl instance or do something else with it
-    initializedRef.current = true;
-    mapRef.current = mapContext.getMap(props.mapId);
-    mapRef.current.setCenter([7.132122000552613, 50.716405378037706]);
-  }, [mapContext.mapIds, mapContext, props.mapId]);
-
-  const getLocationSuccess = (pos) => {
-    if (!mapRef.current) return;
-    mapRef.current.setCenter([pos.coords.longitude, pos.coords.latitude]);
-    setAccuracyRadius(pos.coords.accuracy);
-    setGeoJson(point([pos.coords.longitude, pos.coords.latitude]));
-  };
+  const getLocationSuccess = useCallback(
+    (pos) => {
+      if (!mapHook.map) return;
+
+      mapHook.map.setCenter([pos.coords.longitude, pos.coords.latitude]);
+      const geoJsonPoint = point([pos.coords.longitude, pos.coords.latitude]);
+      setGeoJson(geoJsonPoint);
+      setAccuracyGeoJson(circle(geoJsonPoint, pos.coords.accuracy / 1000));
+    },
+    [mapHook.map]
+  );
 
   const getLocationError = (err) => {
     console.log("Access of user location denied");
     setLocationAccessDenied(true);
   };
 
+  useEffect(() => {
+    if (!mapHook.map) return;
+
+    if (isFollowed) {
+      watchIdRef.current = navigator.geolocation.watchPosition(
+        getLocationSuccess,
+        getLocationError
+      );
+    } else {
+      navigator.geolocation.clearWatch(watchIdRef.current);
+    }
+  }, [isFollowed, getLocationSuccess]);
+
   return (
     <>
       {isFollowed && geoJson && (
         <MlGeoJsonLayer
-          geojson={geoJson}
-          type={"circle"}
+          geojson={accuracyGeoJson}
+          type={"fill"}
           paint={{
-            "circle-radius": {
-              stops: [
-                [0, 0],
-                [
-                  20,
-                  accuracyRadius /
-                    0.075 /
-                    Math.cos((geoJson.geometry.coordinates[1] * Math.PI) / 180),
-                ],
-              ],
-              base: 2,
-            },
-            "circle-color": "#ee7700",
-            "circle-opacity": 0.5,
+            "fill-color": "#ee7700",
+            "fill-opacity": 0.5,
+            ...props.accuracyPaint,
           }}
+          insertBeforeLayer={"MlFollowGpsMarker"}
         />
       )}
 
       {isFollowed && geoJson && (
         <MlImageMarkerLayer
+          layerId={"MlFollowGpsMarker"}
           options={{
             type: "symbol",
             source: {
@@ -112,29 +95,22 @@ const MlFollowGps = (props) => {
             layout: {
               "icon-size": 0.1,
               "icon-offset": [0, -340],
+              ...props.markerLayout,
             },
           }}
-          imgSrc={marker}
+          imgSrc={props.markerImage || marker}
         />
       )}
 
       <Button
-        sx={{ zIndex: 1002, color: isFollowed ? "#bbb" : "#666", ...props.style }}
+        sx={{ zIndex: 1002, color: isFollowed ? props.onColor : props.offColor, ...props.style }}
         disabled={locationAccessDenied}
         onClick={() => {
-          if (isFollowed) {
-            navigator.geolocation.clearWatch(watchIdRef.current);
-          } else {
-            watchIdRef.current = navigator.geolocation.watchPosition(
-              getLocationSuccess,
-              getLocationError
-            );
-          }
           setIsFollowed(!isFollowed);
         }}
       >
         {" "}
-        <RoomIcon sx={{fontSize: props.style.fontSize}}/>{" "}
+        <RoomIcon sx={{ fontSize: props.style.fontSize }} />{" "}
       </Button>
     </>
   );
@@ -156,6 +132,8 @@ MlFollowGps.defaultProps = {
       color: "#ececec",
     },
   },
+  onColor: "#ececec",
+  offColor: "#666",
 };
 
 MlFollowGps.propTypes = {
@@ -167,5 +145,29 @@ MlFollowGps.propTypes = {
    * CSS style object that is applied to the button component
    */
   style: PropTypes.object,
+  /**
+   * Active button font color
+   */
+  onColor: PropTypes.string,
+  /**
+   * Inactive button font color
+   */
+  offColor: PropTypes.string,
+  /**
+   * Accuracy 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
+   */
+  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.
+   */
+  markerImage: PropTypes.string,
 };
 export default MlFollowGps;

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

@@ -6,14 +6,12 @@ import MlFollowGps from "./MlFollowGps";
 import MapLibreMap from "./../MapLibreMap/MapLibreMap";
 
 const mockGeolocation = {
-  watchPosition: jest.fn(),
+  watchPosition: jest.fn(() => 1),
   clearWatch: jest.fn(),
-}
+};
 
 global.navigator.geolocation = mockGeolocation;
 
-global.navigator.geolocation.watchPosition.mockReturnValue(1);
-
 const MlFollowGPSTestComponent = (props) => {
   const [componentVisible, setComponentVisible] = useState(true);
 
@@ -60,6 +58,6 @@ describe("<MlFollowGps>", () => {
     wrapper.find("MlFollowGps button").simulate("click");
     //wrapper.find(".toggle_layer_visible").simulate("click");
 
-    await waitFor(() => expect(mockGeolocation.clearWatch).toHaveBeenCalledTimes(1));
+    await waitFor(() => expect(mockGeolocation.clearWatch).toHaveBeenCalledTimes(2));
   });
 });

package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.js

@@ -1,13 +1,16 @@
-import React, { useRef, useEffect, useContext, useCallback } from "react";
+import React, { useRef, useEffect, useCallback } from "react";
 import PropTypes from "prop-types";
 
-import { v4 as uuidv4 } from "uuid";
 import * as turf from "@turf/turf";
-import { MapContext } from "@mapcomponents/react-core";
+
+import useMap from "../../hooks/useMap";
 
 import { _transitionToGeojson } from "./util/transitionFunctions";
+import getDefaultPaintPropsByType from "./util/getDefaultPaintPropsByType";
+import getDefaulLayerTypeByGeometry from "./util/getDefaultLayerTypeByGeometry";
 
 const msPerStep = 50;
+const legalLayerTypes = ["circle", "fill", "line"];
 
 /**
  * Adds source and layer of types "line", "fill" or "circle" to display GeoJSON data on the map.
@@ -16,50 +19,43 @@ const msPerStep = 50;
  */
 const MlGeoJsonLayer = (props) => {
   // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
-  const mapContext = useContext(MapContext);
-  const oldGeojsonRef = useRef(null);
-  const mapRef = useRef(null);
+  const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
   const initializedRef = useRef(false);
+  const layerId = useRef(props.layerId || "MlGeoJsonLayer-" + mapHook.componentId);
+  const layerTypeRef = useRef(undefined);
+
+  // transition effect variables
+  const oldGeojsonRef = useRef(null);
   const transitionInProgressRef = useRef(false);
   const transitionTimeoutRef = useRef(undefined);
   const currentTransitionStepRef = useRef(false);
   const transitionGeojsonDataRef = useRef([]);
   const transitionGeojsonCommonDataRef = useRef([]);
-  const componentId = useRef(
-    (props.layerId ? props.layerId : "MlGeoJsonLayer-") + (props.idSuffix || uuidv4())
-  );
-  const layerId = useRef(props.layerId || componentId.current);
 
   useEffect(() => {
-    let _componentId = componentId.current;
     return () => {
       // This is the cleanup function, it is called when this react component is removed from react-dom
       if (transitionTimeoutRef.current) {
         clearTimeout(transitionTimeoutRef.current);
       }
-      if (mapRef.current) {
-        mapRef.current.cleanup(_componentId);
-
-        mapRef.current = null;
-      }
     };
   }, []);
 
   useEffect(() => {
-    if (!mapRef.current || !initializedRef.current) return;
+    if (!mapHook.map || !initializedRef.current) return;
 
     for (var key in props.layout) {
-      mapContext.getMap(props.mapId).setLayoutProperty(layerId.current, key, props.layout[key]);
+      mapHook.map.setLayoutProperty(layerId.current, key, props.layout[key]);
     }
-  }, [props.layout, mapContext, props.mapId]);
+  }, [props.layout, mapHook.map, props.mapId]);
 
   useEffect(() => {
-    if (!mapRef.current || !initializedRef.current) return;
+    if (!mapHook.map || !initializedRef.current) return;
 
     for (var key in props.paint) {
-      mapContext.getMap(props.mapId).setPaintProperty(layerId.current, key, props.paint[key]);
+      mapHook.map.setPaintProperty(layerId.current, key, props.paint[key]);
     }
-  }, [props.paint, mapContext, props.mapId]);
+  }, [props.paint, mapHook.map, props.mapId]);
 
   const transitionToGeojson = useCallback(
     (newGeojson) => {
@@ -72,18 +68,16 @@ const MlGeoJsonLayer = (props) => {
         oldGeojsonRef,
         msPerStep,
         currentTransitionStepRef,
-        mapRef.current,
-        componentId.current,
+        mapHook.map,
+        layerId.current,
         transitionTimeoutRef
       );
     },
-    [props]
+    [props, mapHook.map]
   );
 
   useEffect(() => {
-    if (!mapRef.current?.getSource?.(componentId.current) || !initializedRef.current) return;
-    // the MapLibre-gl instance (mapContext.map) is accessible here
-    // initialize the layer and add it to the MapLibre-gl instance or do something else with it
+    if (!mapHook?.map?.getSource(layerId.current) || !initializedRef.current) return;
 
     if (
       typeof props.transitionTime !== "undefined" &&
@@ -96,79 +90,93 @@ const MlGeoJsonLayer = (props) => {
       transitionGeojsonCommonDataRef.current = [];
       transitionToGeojson(props.geojson);
     } else {
-      mapRef.current.getSource(componentId.current).setData(props.geojson);
+      mapHook.map.getSource(layerId.current).setData(props.geojson);
     }
     oldGeojsonRef.current = props.geojson;
   }, [
     props.geojson,
     props.mapId,
-    mapContext,
+    mapHook.map,
     props.type,
     transitionToGeojson,
     props.transitionTime,
   ]);
 
-  useEffect(() => {
-    if (!mapContext.mapExists(props.mapId) || initializedRef.current) return;
-    // the MapLibre-gl instance (mapContext.map) is accessible here
-    // initialize the layer and add it to the MapLibre-gl instance or do something else with it
+  const createLayer = useCallback(() => {
+    let geojson = props.geojson;
 
-    if (props.geojson) {
-      initializedRef.current = true;
-      let geojson = props.geojson;
-
-      if (
-        props.type === "line" &&
-        typeof props.transitionTime !== "undefined" &&
-        props.transitionTime &&
-        typeof props.geojson.geometry !== "undefined"
-      ) {
-        var tmpChunks = turf.lineChunk(props.geojson, 0.01);
-        geojson = tmpChunks.features[0];
-      }
+    if (
+      props.type === "line" &&
+      typeof props.transitionTime !== "undefined" &&
+      props.transitionTime &&
+      typeof props.geojson.geometry !== "undefined"
+    ) {
+      var tmpChunks = turf.lineChunk(props.geojson, 0.01);
+      geojson = tmpChunks.features[0];
+    }
 
-      mapRef.current = mapContext.getMap(props.mapId);
-
-      mapRef.current.addLayer(
-        {
-          id: layerId.current,
-          source: {
-            type: "geojson",
-            data: geojson,
-          },
-          type: props.type || "line",
-          paint: props.paint || {
-            "line-color": "rgb(100,200,100)",
-            "line-width": 10,
-          },
-          layout: props.layout || {},
+    layerTypeRef.current = props.type || getDefaulLayerTypeByGeometry(props.geojson);
+
+    mapHook.map.addLayer(
+      {
+        id: layerId.current,
+        source: {
+          type: "geojson",
+          data: geojson,
         },
-        props.insertBeforeLayer,
-        componentId.current
-      );
+        type: layerTypeRef.current,
+        paint: props.paint || getDefaultPaintPropsByType(layerTypeRef.current),
+        layout: props.layout || {},
+      },
+      props.insertBeforeLayer,
+      mapHook.componentId
+    );
+
+    if (typeof props.onHover !== "undefined") {
+      mapHook.map.on("mousemove", mapHook.componentId, props.onHover, mapHook.componentId);
+    }
 
-      if (typeof props.onHover !== "undefined") {
-        mapRef.current.on("mousemove", componentId.current, props.onHover, componentId.current);
-      }
+    if (typeof props.onClick !== "undefined") {
+      mapHook.map.on("click", mapHook.componentId, props.onClick, mapHook.componentId);
+    }
 
-      if (typeof props.onClick !== "undefined") {
-        mapRef.current.on("click", componentId.current, props.onClick, componentId.current);
-      }
+    if (typeof props.onLeave !== "undefined") {
+      mapHook.map.on("mouseleave", mapHook.componentId, props.onLeave, mapHook.componentId);
+    }
 
-      if (typeof props.onLeave !== "undefined") {
-        mapRef.current.on("mouseleave", componentId.current, props.onLeave, componentId.current);
-      }
+    if (
+      props.type === "line" &&
+      typeof props.transitionTime !== "undefined" &&
+      typeof props.geojson.geometry !== "undefined"
+    ) {
+      transitionToGeojson(props.geojson);
+      oldGeojsonRef.current = props.geojson;
+    }
+  }, [mapHook.map, props, transitionToGeojson]);
 
-      if (
-        props.type === "line" &&
-        typeof props.transitionTime !== "undefined" &&
-        typeof props.geojson.geometry !== "undefined"
-      ) {
-        transitionToGeojson(props.geojson);
-        oldGeojsonRef.current = props.geojson;
-      }
+  useEffect(() => {
+    if (!mapHook.mapIsReady || !props.geojson) return;
+
+    if (
+      initializedRef.current &&
+      legalLayerTypes.indexOf(props.type) !== -1 &&
+      layerTypeRef.current &&
+      props.type !== layerTypeRef.current
+    ) {
+      mapHook.map.cleanup(mapHook.componentId);
+    } else if (
+      initializedRef.current &&
+      (legalLayerTypes.indexOf(props.type) === -1 ||
+        (legalLayerTypes.indexOf(props.type) !== -1 && props.type === layerTypeRef.current))
+    ) {
+      return;
     }
-  }, [mapContext.mapIds, mapContext, props, transitionToGeojson]);
+
+    // initialize the layer and add it to the MapLibre-gl instance or do something else with it
+    initializedRef.current = true;
+
+    createLayer();
+  }, [mapHook.mapIsReady, createLayer, props]);
 
   return <></>;
 };
@@ -230,11 +238,6 @@ MlGeoJsonLayer.propTypes = {
    * Only works with layer type "line" and LineString GeoJSON data.
    */
   transitionTime: PropTypes.number,
-  /**
-   * Id suffix string that is appended to the componentId.
-   * Probably removed soon.
-   */
-  idSuffix: PropTypes.string,
 };
 
 export default MlGeoJsonLayer;