@mapcomponents/react-maplibre 0.1.24 → 0.1.28

package/jsdoc.json

@@ -8,9 +8,9 @@
     },
     "recurseDepth": 10,
     "opts": {
-        "template": "node_modules/better-docs",
-        "destination": "docs/"
-      },
+      "template": "node_modules/better-docs",
+      "destination": "docs/jsdocs"
+    },
     "source": {
         "include": ["./src/"],
         "excludePattern": ".*/(utils|MlFeatureEditor\/lib)/.*"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mapcomponents/react-maplibre",
-  "version": "0.1.24",
+  "version": "0.1.28",
   "license": "MIT",
   "private": false,
   "module": "dist/index.esm.js",
@@ -13,17 +13,17 @@
     "@mapbox/mapbox-gl-draw": "^1.2.0",
     "@mapbox/mapbox-gl-sync-move": "^0.3.0",
     "@mapcomponents/react-core": "^0.1.7",
-    "@mui/icons-material": "^5.0.1",
-    "@mui/material": "5.0.0",
-    "@mui/styles": "^5.0.1",
+    "@mui/icons-material": "^5.3.1",
+    "@mui/material": "5.4.0",
+    "@mui/styles": "^5.3.0",
     "@turf/turf": "^6.5.0",
-    "jspdf": "^2.3.0",
-    "maplibre-gl": "^1.13.0-rc.5",
+    "jspdf": "^2.5.1",
+    "maplibre-gl": "^2.1.6",
     "react-i18next": "^11.14.3",
-    "three": "^0.126.1",
+    "three": "^0.137.5",
     "uuid": "^8.3.2",
     "wms-capabilities": "^0.5.1",
-    "xmldom": "^0.5.0"
+    "xmldom": "^0.6.0"
   },
   "dependenciesComment": {
     "xmldom": "MlGPXLayer"
@@ -46,7 +46,7 @@
     "build-catalogue-meta": "node scripts/build-catalogue-meta.js",
     "build-catalogue-markdown-docs": "node scripts/build-catalogue-markdown-docs.js",
     "create-component": "./scripts/create-map-component.sh",
-    "docs-create": "jsdoc -r -c ./jsdoc.json -d js-docs/react-map-components-maplibre/$npm_package_version",
+    "docs-create": "jsdoc -r -c ./jsdoc.json -d docs/jsdocs/react-map-components-maplibre/$npm_package_version",
     "docs-serve": "http-server ./js-docs/react-map-components-maplibre/$npm_package_version -p 3001"
   },
   "jest": {

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

@@ -413,7 +413,7 @@ const MapLibreGlWrapper = function (props) {
 
   this.addNativeMaplibreFunctionsAndProps = () => {
     //  add MapLibre-gl functions
-    Object.keys(this.map.__proto__).forEach((item) => {
+    Object.getOwnPropertyNames(Object.getPrototypeOf(this.map)).forEach((item) => {
       if (typeof this[item] === "undefined") {
         this[item] = (...props) => self.map[item](...props);
       }
@@ -504,6 +504,10 @@ const MapLibreGlWrapper = function (props) {
     self.wrapper.refreshViewport();
     self.wrapper.fire("viewportchange");
 
+    self.map.on("load", () => {
+      self.addNativeMaplibreFunctionsAndProps();
+    });
+
     self.map.on("move", () => {
       self.wrapper.viewportState = self.wrapper.getViewport();
       self.wrapper.fire("viewportchange");

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

@@ -297,7 +297,7 @@ describe("MapLibreGlWrapper - event tests", () => {
     );
 
     // MapLibreGlWrapper now subscribes to "data", "move" events on its own
-    expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(4);
+    expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(5);
   });
 
   it("should remove an event using off from MapLibreGl using MapLibreGlWrapper.cleanup(componentId)", async () => {
@@ -310,7 +310,7 @@ describe("MapLibreGlWrapper - event tests", () => {
     );
 
     // MapLibreGlWrapper now subscribes to "data", "move" events on its own
-    expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(4);
+    expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(5);
 
     wrapper.find(".toggle_children_are_visible").simulate("click");
 
@@ -327,7 +327,7 @@ describe("MapLibreGlWrapper - event tests", () => {
     );
 
     // MapLibreGlWrapper now subscribes to "data", "move" events on its own
-    expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(6);
+    expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(7);
 
     wrapper.find(".toggle_children_are_visible").simulate("click");
 

package/src/components/MlFeatureEditor/MlFeatureEditor.test.js

@@ -82,7 +82,7 @@ describe("<MlFeatureEditor>", () => {
     );
 
     // MapLibreGlWrapper now subscribes to "data", "move" events on its own
-    await waitFor(() => expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(5));
+    await waitFor(() => expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(6));
   });
 
   it("should deregister 2 event listeners to the maplibre instance", async () => {
@@ -93,7 +93,7 @@ describe("<MlFeatureEditor>", () => {
     );
 
     // MapLibreGlWrapper now subscribes to "data", "move" events on its own
-    expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(5);
+    expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(6);
 
     wrapper.find(".toggle_layer_visible").simulate("click");
 

package/src/components/MlFollowGps/MlFollowGps.js

@@ -1,14 +1,11 @@
-import React, { useRef, useEffect, useState, useCallback } from "react";
+import React, { useEffect, useState, useCallback, useMemo } from "react";
 import PropTypes from "prop-types";
 import useMap from "../../hooks/useMap";
 
 import Button from "@mui/material/Button";
-import RoomIcon from "@mui/icons-material/Room";
-import { point, circle } from "@turf/turf";
+import GpsFixedIcon from "@mui/icons-material/GpsFixed";
+import { point, circle, lineArc } 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
@@ -23,31 +20,27 @@ const MlFollowGps = (props) => {
   const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
 
   const [isFollowed, setIsFollowed] = useState(false);
-  const [geoJson, setGeoJson] = useState(undefined);
-  const watchIdRef = useRef(undefined);
+  const [userLocationGeoJson, setUserLocationGeoJson] = useState(undefined);
   const [locationAccessDenied, setLocationAccessDenied] = useState(false);
-
   const [accuracyGeoJson, setAccuracyGeoJson] = useState();
-
-  useEffect(() => {
-    return () => {
-      if (watchIdRef.current) {
-        navigator.geolocation.clearWatch(watchIdRef.current);
-        watchIdRef.current = undefined;
-      }
-    };
-  }, []);
+  const [deviceOrientation, setDeviceOrientation] = useState(0);
 
   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,
+      });
+      if (!props.showUserLocation) return;
       const geoJsonPoint = point([pos.coords.longitude, pos.coords.latitude]);
-      setGeoJson(geoJsonPoint);
+      setUserLocationGeoJson(geoJsonPoint);
       setAccuracyGeoJson(circle(geoJsonPoint, pos.coords.accuracy / 1000));
     },
-    [mapHook.map]
+    [mapHook.map, props]
   );
 
   const getLocationError = (err) => {
@@ -55,50 +48,89 @@ const MlFollowGps = (props) => {
     setLocationAccessDenied(true);
   };
 
+  const orientationCone = useMemo(
+    () => {
+      if (!userLocationGeoJson) {
+        return undefined;
+      }
+      let radius = 0.02;
+      let bearing1 = deviceOrientation - 15;
+      let bearing2 = deviceOrientation + 15;
+      const options = {steps: 65};
+      let arc = lineArc(userLocationGeoJson, radius, bearing1, bearing2, options);
+      let copy = arc;
+      copy.geometry.coordinates.push(userLocationGeoJson.geometry.coordinates);
+      copy.geometry.coordinates.slice(0, 0, userLocationGeoJson.geometry.coordinates);
+      return copy;
+    }, [deviceOrientation, userLocationGeoJson]
+  )
+
+  const handleOrientation = (event) => {
+    setDeviceOrientation(-event.alpha)
+  } 
+
+  useEffect(() => {
+    if (isFollowed) {
+      let _handleOrientation = handleOrientation;
+      window.addEventListener('deviceorientation', _handleOrientation)
+      return () => {
+        window.removeEventListener('deviceorientation', _handleOrientation)
+      }
+    }
+  }, [isFollowed]);
+
   useEffect(() => {
     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]);
+  }, [mapHook.map, isFollowed, getLocationSuccess]);
 
   return (
     <>
-      {isFollowed && geoJson && (
+      {isFollowed && userLocationGeoJson && (
         <MlGeoJsonLayer
           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 && orientationCone && (
+        <MlGeoJsonLayer
+          geojson={orientationCone}
+          type={"fill"}
+          paint={{
+            "fill-color": "#0000ff",
+            "fill-antialias": false,
+            "fill-opacity": 0.3,
+          }}
+          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,
-            },
+      {isFollowed && userLocationGeoJson && (
+        <MlGeoJsonLayer
+          geojson={userLocationGeoJson}
+          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}
         />
       )}
 
@@ -110,7 +142,7 @@ const MlFollowGps = (props) => {
         }}
       >
         {" "}
-        <RoomIcon sx={{ fontSize: props.style.fontSize }} />{" "}
+        <GpsFixedIcon sx={{ fontSize: props.style.fontSize }} />{" "}
       </Button>
     </>
   );
@@ -134,6 +166,9 @@ MlFollowGps.defaultProps = {
   },
   onColor: "#ececec",
   offColor: "#666",
+  showAccuracyCircle: true,
+  showUserLocation: true,
+  showOrientation: true
 };
 
 MlFollowGps.propTypes = {
@@ -160,14 +195,24 @@ 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
+   * 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
+   */
+  circlePaint: PropTypes.object,
+  /**
+   * By default, if showUserLocation is true, a transparent circle will be drawn around the user location 
+   * indicating the accuracy (95% confidence level) of the user's location. Set to false to disable. 
+   */
+  showAccuracyCircle: PropTypes.bool,
+  /**
+   * By default a dot will be shown on the map at the user's location. Set to false to disable.
    */
-  markerLayout: PropTypes.object,
+  showUserLocation: PropTypes.bool,
   /**
-   * Replace the default marker image with a custom one.
+   * By default a cone will be shown on the map at the user's location to indicate the device's orientation.
+   * Set to false to disable.
    */
-  markerImage: PropTypes.string,
+  showOrientation: PropTypes.bool,
 };
 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/MlGPXViewer/MlGPXViewer.js

@@ -1,22 +1,20 @@
-import React, {useContext, useRef, useEffect, useState} from "react";
+import React, { useContext, useRef, useEffect, useState } from "react";
 import PropTypes from "prop-types";
-import {MapContext} from "@mapcomponents/react-core";
-import {bbox} from "@turf/turf";
+import { bbox } from "@turf/turf";
 import Divider from "@mui/material/Divider";
 import Typography from "@mui/material/Typography";
 import Drawer from "@mui/material/Drawer";
 import IconButton from "@mui/material/IconButton";
 import InfoIcon from "@mui/icons-material/Info";
 import FileCopy from "@mui/icons-material/FileCopy";
-import {Popup} from "maplibre-gl";
+import { Popup } from "maplibre-gl";
 import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
 import ListItemText from "@mui/material/ListItemText";
 import GeoJsonContext from "./util/GeoJsonContext";
 import toGeoJSON from "./gpxConverter";
 import useMediaQuery from "@mui/material/useMediaQuery";
-
-import {v4 as uuidv4} from "uuid";
+import useMap from "../../hooks/useMap";
 
 /**
  * MlGPXViewer returns a dropzone and a button to load a GPX Track into the map.
@@ -25,11 +23,8 @@ import {v4 as uuidv4} from "uuid";
  */
 const MlGPXViewer = (props) => {
   const dataSource = useContext(GeoJsonContext);
-  const componentId = useRef((props.idPrefix ? props.idPrefix : "MlGpxViewer-") + uuidv4());
-  const mapContext = useContext(MapContext);
-  const mapId = props.mapId;
   const initializedRef = useRef(false);
-  const mapRef = useRef(null);
+  const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
   const sourceName = "import-source";
   const layerNameLines = "importer-layer-lines";
   const layerNamePoints = "importer-layer-points";
@@ -49,36 +44,19 @@ const MlGPXViewer = (props) => {
   );
 
   useEffect(() => {
-    let _componentId = componentId.current;
-    let _popup = popup.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.getCanvas().style.cursor = "";
-
-        mapRef.current = null;
-      }
-      _popup.remove();
-    };
-  }, []);
-
-  useEffect(() => {
-    if (!mapContext.mapExists(mapId) || initializedRef.current) return;
+    if (!mapHook.map || initializedRef.current) return;
 
     initializedRef.current = true;
-    mapRef.current = mapContext.getMap(mapId);
 
-    mapRef.current.addSource(
+    mapHook.map.addSource(
       sourceName,
       {
         type: "geojson",
         data: dataSource.data,
       },
-      componentId.current
+      mapHook.componentId
     );
-    mapRef.current.addLayer(
+    mapHook.map.addLayer(
       {
         id: layerNameLines,
         source: sourceName,
@@ -89,9 +67,9 @@ const MlGPXViewer = (props) => {
         },
       },
       props.insertBeforeLayer,
-      componentId.current
+      mapHook.componentId
     );
-    mapRef.current.addLayer(
+    mapHook.map.addLayer(
       {
         id: layerNamePoints,
         source: sourceName,
@@ -103,40 +81,49 @@ const MlGPXViewer = (props) => {
         filter: ["==", "$type", "Point"],
       },
       props.insertBeforeLayer,
-      componentId.current
+      mapHook.componentId
     );
 
     [layerNameLines, layerNamePoints].forEach((layerName) => {
-      mapRef.current.setLayoutProperty(layerName, "visibility", "visible");
+      mapHook.map.setLayoutProperty(layerName, "visibility", "visible");
     });
-    mapRef.current.on("mouseenter", layerNamePoints, (e) => {
-      // Change the cursor style as a UI indicator.
-      mapContext.getMap(props.mapId).getCanvas().style.cursor = "pointer";
-
-      const coordinates = e.features[0].geometry.coordinates.slice();
-      //const description = e.features[0].properties.desc;
-      const name = e.features[0].properties.name;
-
-      // Ensure that if the map is zoomed out such that multiple
-      // copies of the feature are visible, the popup appears
-      // over the copy being pointed to.
-      while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
-        coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
-      }
+    mapHook.map.on(
+      "mouseenter",
+      layerNamePoints,
+      (e) => {
+        // Change the cursor style as a UI indicator.
+
+        const coordinates = e.features[0].geometry.coordinates.slice();
+        //const description = e.features[0].properties.desc;
+        const name = e.features[0].properties.name;
+
+        // Ensure that if the map is zoomed out such that multiple
+        // copies of the feature are visible, the popup appears
+        // over the copy being pointed to.
+        while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
+          coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
+        }
 
-      // Populate the popup and set its coordinates
+        // Populate the popup and set its coordinates
 
-      // based on the feature found.
-      popup.current.setLngLat(coordinates).setHTML(name).addTo(mapRef.current);
-    });
+        // based on the feature found.
+        popup.current.setLngLat(coordinates).setHTML(name).addTo(mapHook.map);
+      },
+      mapHook.componentId
+    );
 
-    mapRef.current.on("mouseleave", "places", function () {
-      mapRef.current.getCanvas().style.cursor = "";
-      popup.current.remove();
-    });
+    mapHook.map.on(
+      "mouseleave",
+      "places",
+      function () {
+        mapHook.map.getCanvas().style.cursor = "";
+        popup.current.remove();
+      },
+      mapHook.componentId
+    );
 
-    mapRef.current.setZoom(10);
-  }, [mapContext.mapIds, mapContext, dataSource.data, mapId, props]);
+    mapHook.map.setZoom(10);
+  }, [mapHook.map]);
 
   useEffect(() => {
     const dropZoneCurrent = dropZone.current;
@@ -162,9 +149,8 @@ const MlGPXViewer = (props) => {
     return () => {
       window.removeEventListener("dragenter", raiseDropZoneAndStopDefault);
       window.removeEventListener("dragover", stopDefault);
-      window.removeEventListener("drop", stopDefault);
       dropZoneCurrent.removeEventListener("dragleave", lowerDropZone);
-      window.removeEventListener("drop", (event) => lowerDropZoneAndStopDefault);
+      window.removeEventListener("drop", lowerDropZoneAndStopDefault);
     };
   });
 
@@ -174,12 +160,12 @@ const MlGPXViewer = (props) => {
   };
 
   useEffect(() => {
-    if (!mapRef.current) return;
+    if (!mapHook.map) return;
 
     const visibility = props.visible ? "visible" : "none";
 
     [layerNameLines, layerNamePoints].forEach((layerName) => {
-      mapRef.current.setLayoutProperty(layerName, "visibility", visibility);
+      mapHook.map.setLayoutProperty(layerName, "visibility", visibility);
     });
   }, [props.visible]);
 
@@ -205,7 +191,7 @@ const MlGPXViewer = (props) => {
   };
 
   const addGPXToMap = (gpxAsString) => {
-    if (!mapRef.current) return;
+    if (!mapHook.map) return;
     try {
       setMetaData([]);
       const domParser = new DOMParser();
@@ -229,9 +215,9 @@ const MlGPXViewer = (props) => {
       });
       const data = toGeoJSON.gpx(gpxDoc);
       dataSource.setData(data);
-      mapRef.current.getSource(sourceName).setData(data);
+      mapHook.map.getSource(sourceName).setData(data);
       const bounds = bbox(data);
-      mapRef.current.fitBounds(bounds);
+      mapHook.map.fitBounds(bounds);
     } catch (e) {
       console.log(e);
     }
@@ -257,15 +243,17 @@ const MlGPXViewer = (props) => {
   };
   return (
     <>
-      <div style={{
-        position: "fixed",
-        right: "5px",
-        bottom: mediaIsMobile ? "40px" : "25px",
-        display: "flex",
-        flexDirection: "column",
-        gap: "5px",
-        zIndex: 1000,
-      }}>
+      <div
+        style={{
+          position: "fixed",
+          right: "5px",
+          bottom: mediaIsMobile ? "40px" : "25px",
+          display: "flex",
+          flexDirection: "column",
+          gap: "5px",
+          zIndex: 1000,
+        }}
+      >
         <IconButton
           onClick={manualUpload}
           style={{
@@ -279,9 +267,9 @@ const MlGPXViewer = (props) => {
             type="file"
             id="input"
             multiple
-            style={{display: "none"}}
+            style={{ display: "none" }}
           ></input>
-          <FileCopy/>
+          <FileCopy />
         </IconButton>
         <IconButton
           onClick={toogleDrawer}
@@ -290,7 +278,7 @@ const MlGPXViewer = (props) => {
           }}
           size="large"
         >
-          <InfoIcon/>
+          <InfoIcon />
         </IconButton>
       </div>
       <Drawer variant="persistent" anchor="left" open={open}>
@@ -304,11 +292,11 @@ const MlGPXViewer = (props) => {
         >
           Informationen zur Route
         </Typography>
-        <Divider/>
+        <Divider />
         <List>
           {metaData.map((item) => (
             <ListItem key={`item--${item.id}`}>
-              <ListItemText primary={item.value}/>
+              <ListItemText primary={item.value} />
             </ListItem>
           ))}
         </List>
@@ -350,7 +338,7 @@ MlGPXViewer.defaultProps = {
 
 MlGPXViewer.propTypes = {
   /**
-   * Id of the target MapLibre instance in mapContext
+   * Id of the target MapLibre instance in mapHook
    */
   mapId: PropTypes.string,
   /**