@mapcomponents/react-maplibre 0.1.12 → 0.1.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mapcomponents/react-maplibre",
-  "version": "0.1.12",
+  "version": "0.1.16",
   "license": "MIT",
   "private": false,
   "module": "dist/index.esm.js",
@@ -9,6 +9,7 @@
     "@emotion/css": "^11.1.3",
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
+    "@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",
@@ -18,6 +19,7 @@
     "@turf/turf": "^6.5.0",
     "jspdf": "^2.3.0",
     "maplibre-gl": "^1.13.0-rc.5",
+    "react-i18next": "^11.14.3",
     "three": "^0.126.1",
     "uuid": "^8.3.2",
     "wms-capabilities": "^0.5.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";
 
 /**
@@ -41,7 +42,7 @@ const MapLibreGlWrapper = function (props) {
     on: (eventName, handler, options, componentId) => {
       if (!self.eventHandlers[eventName]) return;
 
-      if(typeof options === 'string'){
+      if (typeof options === "string") {
         componentId = options;
         options = {};
       }
@@ -91,7 +92,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
      */
@@ -108,38 +109,38 @@ const MapLibreGlWrapper = function (props) {
      */
     buildLayerObject: (layer) => {
       //if (self.baseLayers.indexOf(layer.id) === -1) {
-        let paint = {};
-        let values = layer.paint?._values;
-        Object.keys(values || {}).map((propName) => {
-          paint[propName] =
-            typeof values[propName].value !== "undefined"
-              ? values[propName].value.value
-              : values[propName];
-        });
-        let layout = {};
-        values = layer.layout?._values;
-        Object.keys(values || {}).map((propName) => {
-          layout[propName] =
-            typeof values[propName].value !== "undefined"
-              ? values[propName].value.value
-              : values[propName];
-        });
-        return {
-          id: layer.id,
-          type: layer.type,
-          visible: layer.visibility === "none" ? false : true,
-          baseLayer: self.baseLayers.indexOf(layer.id) !== -1,
-          paint,
-          layout,
-          //filter: layers[layerId].filter,
-          //layout: layers[layerId].layout,
-          //maxzoom: layers[layerId].maxzoom,
-          //metadata: layers[layerId].metadata,
-          //minzoom: layers[layerId].minzoom,
-          //paint: layers[layerId].paint.get(),
-          //source: layers[layerId].source,
-          //sourceLayer: layers[layerId].sourceLayer,
-        };
+      let paint = {};
+      let values = layer.paint?._values;
+      Object.keys(values || {}).map((propName) => {
+        paint[propName] =
+          typeof values[propName].value !== "undefined"
+            ? values[propName].value.value
+            : values[propName];
+      });
+      let layout = {};
+      values = layer.layout?._values;
+      Object.keys(values || {}).map((propName) => {
+        layout[propName] =
+          typeof values[propName].value !== "undefined"
+            ? values[propName].value.value
+            : values[propName];
+      });
+      return {
+        id: layer.id,
+        type: layer.type,
+        visible: layer.visibility === "none" ? false : true,
+        baseLayer: self.baseLayers.indexOf(layer.id) !== -1,
+        paint,
+        layout,
+        //filter: layers[layerId].filter,
+        //layout: layers[layerId].layout,
+        //maxzoom: layers[layerId].maxzoom,
+        //metadata: layers[layerId].metadata,
+        //minzoom: layers[layerId].minzoom,
+        //paint: layers[layerId].paint.get(),
+        //source: layers[layerId].source,
+        //sourceLayer: layers[layerId].sourceLayer,
+      };
       //}
     },
     /**
@@ -159,7 +160,7 @@ const MapLibreGlWrapper = function (props) {
      */
     refreshLayerState: () => {
       self.wrapper.layerState = self.wrapper.buildLayerObjects();
-      self.wrapper.layerStateStrings = self.wrapper.layerState.map(el => JSON.stringify(el));
+      self.wrapper.layerStateStrings = self.wrapper.layerState.map((el) => JSON.stringify(el));
     },
     /**
      * Object containing information on the current viewport state
@@ -173,29 +174,17 @@ const MapLibreGlWrapper = function (props) {
      * Previous version of viewportStateString
      */
     oldViewportStateString: "{}",
-    getViewport: () => (typeof self.map.getCenter === 'function'?{
-      center: (({ lng, lat, ...rest }) => ({ lng, lat }))(self.map.getCenter()),
-      zoom: self.map.getZoom(),
-      bearing: self.map.getBearing(),
-      pitch: self.map.getPitch(),
-    }:{}),
-    viewportRefreshEnabled: true,
-    viewportRefreshWaiting: false,
-    refreshViewport: (force) => {
-      if (self.wrapper.viewportRefreshEnabled || force) {
-        self.wrapper.viewportRefreshEnabled = false;
-        self.wrapper.viewportState = self.wrapper.getViewport();
-        self.wrapper.viewportStateString = JSON.stringify(self.wrapper.viewportState);
-        setTimeout(() => {
-          self.wrapper.viewportRefreshEnabled = true;
-          if (self.wrapper.viewportRefreshWaiting) {
-            self.wrapper.viewportRefreshWaiting = false;
-            self.wrapper.refreshViewport();
+    getViewport: () =>
+      typeof self.map.getCenter === "function"
+        ? {
+            center: (({ lng, lat, ...rest }) => ({ lng, lat }))(self.map.getCenter()),
+            zoom: self.map.getZoom(),
+            bearing: self.map.getBearing(),
+            pitch: self.map.getPitch(),
           }
-        }, 50);
-      }else{
-          self.wrapper.viewportRefreshWaiting = true;
-      }
+        : {},
+    refreshViewport: () => {
+      self.wrapper.viewportState = self.wrapper.getViewport();
     },
   };
 
@@ -484,10 +473,10 @@ const MapLibreGlWrapper = function (props) {
     ) {
       await fetch(props.mapOptions.style)
         .then((response) => {
-          if(response.ok){
-            return response.json()
-          }else{
-            throw new Error('error loading map style.json')
+          if (response.ok) {
+            return response.json();
+          } else {
+            throw new Error("error loading map style.json");
           }
         })
         .then((styleJson) => {
@@ -508,15 +497,12 @@ const MapLibreGlWrapper = function (props) {
     self.map = new maplibregl.Map(props.mapOptions);
 
     self.addNativeMaplibreFunctionsAndProps();
-    self.wrapper.refreshViewport(true);
+    self.wrapper.refreshViewport();
     self.wrapper.fire("viewportchange");
 
     self.map.on("move", () => {
-      self.wrapper.refreshViewport();
-      if (self.wrapper.viewportStateString !== self.wrapper.oldViewportStateString) {
-        self.wrapper.oldViewportStateString = self.wrapper.viewportStateString;
-        self.wrapper.fire("viewportchange");
-      }
+      self.wrapper.viewportState = self.wrapper.getViewport();
+      self.wrapper.fire("viewportchange");
     });
     self.map.on("data", () => {
       self.wrapper.refreshLayerState();

package/src/components/MlComponentTemplate/MlComponentTemplate.js

@@ -1,8 +1,6 @@
 import React, { useRef, useEffect, useContext } 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, props.mapId]);
 
   return <></>;
 };

package/src/components/MlFeatureEditor/MlFeatureEditor.meta.json

@@ -1,6 +1,6 @@
 {
   "name": "MlFeatureEditor",
-  "title": "Sketch Tool",
+  "title": "Sketch tools",
   "description": "Enables the editing of Point, Linestring and Polygon GeoJSON Files.",
   "i18n": {
     "de": {
@@ -8,7 +8,7 @@
       "description": "Ermöglicht das Bearbeiten von Punkt, Linestring und Polygon GeoJSON Daten."
     }
   },
-  "tags": [ "Map add-on" ],
+  "tags": ["Map add-on"],
   "category": "add-ons",
   "type": "component",
   "price": 0

package/src/components/MlFollowGps/MlFollowGps.js

@@ -1,14 +1,15 @@
-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";
 
+import marker from "./assets/marker.png";
+
 /**
  * Adds a button that makes the map follow the users GPS position using
  * navigator.geolocation.watchPosition if activated
@@ -19,121 +20,97 @@ import MlImageMarkerLayer from "../MlImageMarkerLayer/MlImageMarkerLayer";
  * @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"}
-                      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,
-                      }}
-      />
-      }
-
-      {isFollowed && geoJson &&
-      <MlImageMarkerLayer
-        options={{
-          type: "symbol",
-          source: {
-            type: "geojson",
-            data: geoJson
-          },
-          layout: {
-            "icon-size": 0.1,
-            "icon-offset": [0, -340]
-          },
-        }
-        }
-        imgSrc={"/assets/marker.png"}
-      />
-      }
+      {isFollowed && geoJson && (
+        <MlGeoJsonLayer
+          geojson={accuracyGeoJson}
+          type={"fill"}
+          paint={{
+            "fill-color": "#ee7700",
+            "fill-opacity": 0.5,
+            ...props.accuracyPaint,
+          }}
+          insertBeforeLayer={"MlFollowGpsMarker"}
+        />
+      )}
+
+      {isFollowed && geoJson && (
+        <MlImageMarkerLayer
+          layerId={"MlFollowGpsMarker"}
+          options={{
+            type: "symbol",
+            source: {
+              type: "geojson",
+              data: geoJson,
+            },
+            layout: {
+              "icon-size": 0.1,
+              "icon-offset": [0, -340],
+              ...props.markerLayout,
+            },
+          }}
+          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={{}}/>{" "}
+        <RoomIcon sx={{ fontSize: props.style.fontSize }} />{" "}
       </Button>
     </>
   );
@@ -149,11 +126,14 @@ MlFollowGps.defaultProps = {
     backgroundColor: "#414141",
     borderRadius: "23%",
     margin: 0.15,
+    fontSize: "1.3em",
     ":hover": {
       backgroundColor: "#515151",
       color: "#ececec",
     },
   },
+  onColor: "#ececec",
+  offColor: "#666",
 };
 
 MlFollowGps.propTypes = {
@@ -165,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.meta.json

@@ -1,6 +1,6 @@
 {
-  "name": "MlFollowGPS",
-  "title": "GPS-Tracker",
+  "name": "MlFollowGps",
+  "title": "GPS tracker",
   "description": "",
   "i18n": {
     "de": {

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));
   });
 });