@mapcomponents/react-maplibre 0.1.32 → 0.1.35

package/src/components/MlLayerSwipe/{MlLayerSwipe.js → MlLayerSwipe.tsx}

@@ -1,20 +1,36 @@
-import React, { useContext, useCallback, useRef, useEffect, useState } from "react";
+import React, {
+  useContext,
+  useCallback,
+  useRef,
+  useEffect,
+  useState,
+} from "react";
+// @ts-ignore
 import syncMove from "@mapbox/mapbox-gl-sync-move";
 import "./style.css";
+// @ts-ignore
 import { MapContext } from "@mapcomponents/react-core";
-import PropTypes from "prop-types";
+
+interface MlLayerSwipeProps {
+  /**
+   * Id of the first MapLibre instance.
+   */
+  map1Id: string;
+  /**
+   * Id of the second MapLibre instance.
+   */
+  map2Id: string;
+}
 
 /**
- *  MlLayerSwipe returns a Button that will add a standard OSM tile layer to the maplibre-gl instance, that you can move like a curtain.
- *
- * @component
+ *  creates a split view of 2 synchronised maplibre instances
  */
-const MlLayerSwipe = (props) => {
-  const mapContext = useContext(MapContext);
+const MlLayerSwipe = (props: MlLayerSwipeProps) => {
+  const mapContext: MapContextType = useContext(MapContext);
   const initializedRef = useRef(false);
 
   const [swipeX, setSwipeX] = useState(50);
-  const swipeXRef = useRef(50);
+  const swipeXRef = useRef(0);
 
   const syncCleanupFunctionRef = useRef(null);
 
@@ -31,6 +47,7 @@ const MlLayerSwipe = (props) => {
 
   const cleanup = () => {
     if (syncCleanupFunctionRef.current) {
+      // @ts-ignore
       syncCleanupFunctionRef.current();
     }
   };
@@ -39,7 +56,9 @@ const MlLayerSwipe = (props) => {
     (e) => {
       if (!mapExists()) return;
 
-      let bounds = mapContext.maps[props.map1Id].getCanvas().getBoundingClientRect();
+      let bounds = mapContext.maps[props.map1Id]
+        .getCanvas()
+        .getBoundingClientRect();
       let clientX =
         e.clientX ||
         (typeof e.touches !== "undefined" && typeof e.touches[0] !== "undefined"
@@ -47,13 +66,17 @@ const MlLayerSwipe = (props) => {
           : 0);
 
       clientX -= bounds.x;
-      let swipeX_tmp = ((clientX / bounds.width) * 100).toFixed(2);
+      let swipeX_tmp = parseFloat(((clientX / bounds.width) * 100).toFixed(2));
 
+      console.log(swipeX_tmp);
       if (swipeXRef.current !== swipeX_tmp) {
         setSwipeX(swipeX_tmp);
         swipeXRef.current = swipeX_tmp;
 
-        var clipA = "rect(0, " + (swipeXRef.current * bounds.width) / 100 + "px, 999em, 0)";
+        var clipA =
+          "rect(0, " +
+          (swipeXRef.current * bounds.width) / 100 +
+          "px, 999em, 0)";
 
         mapContext.maps[props.map2Id].getContainer().style.clip = clipA;
       }
@@ -73,10 +96,12 @@ const MlLayerSwipe = (props) => {
       mapContext.getMap(props.map1Id).map,
       mapContext.getMap(props.map2Id).map
     );
-    onMove({ clientX: mapContext.maps[props.map1Id].getCanvas().clientWidth / 2 });
+    onMove({
+      clientX: mapContext.maps[props.map1Id].getCanvas().clientWidth / 2,
+    });
   }, [mapContext.mapIds, mapContext, props, onMove, mapExists]);
 
-  const onDown = (e) => {
+  const onDown = (e: any) => {
     if (e.touches) {
       document.addEventListener("touchmove", onMove);
       document.addEventListener("touchend", onTouchEnd);
@@ -123,15 +148,4 @@ const MlLayerSwipe = (props) => {
   );
 };
 
-MlLayerSwipe.propTypes = {
-  /**
-   * Id of the first MapLibre instance.
-   */
-  map1Id: PropTypes.string,
-  /**
-   * Id of the second MapLibre instance.
-   */
-  map2Id: PropTypes.string,
-}
-
 export default MlLayerSwipe;

package/src/components/MlLayerSwitcher/MlLayerSwitcher.js

@@ -1,7 +1,3 @@
-//CSS
-import "@fontsource/roboto/300.css";
-import "@fontsource/roboto/400.css";
-import "@fontsource/roboto/500.css";
 import "./MlLayerSwitcher.css";
 //External
 import { useEffect, useContext, useState } from "react";

package/src/components/MlMarker/MlMarker.tsx

@@ -0,0 +1,140 @@
+import React, { useRef, useState, useEffect } from "react";
+import MlGeoJsonLayer from "../MlGeoJsonLayer/MlGeoJsonLayer";
+import Paper from "@mui/material/Paper";
+import useMapState from "../../hooks/useMapState";
+import useMap from "../../hooks/useMap";
+
+import Point from "@mapbox/point-geometry";
+
+interface MlMarkerProps {
+  /**
+   * Id of the target MapLibre instance in mapContext
+   */
+  mapId?: string;
+  /**
+   * The layerId of an existing layer this layer should be rendered visually beneath
+   * https://maplibre.org/maplibre-gl-js-docs/api/map/#map#addlayer - see "beforeId" property
+   */
+  insertBeforeLayer?: string;
+  /**
+   * Longitude of the marker position
+   */
+  lng: number;
+  /**
+   * Latitude of the marker position
+   */
+  lat: number;
+  /**
+   * Content of the description popup
+   */
+  content?: string;
+}
+
+/**
+ * Adds a marker to the map and displays the contents of the "content" property in an iframe next to it
+ */
+const MlMarker = (props: MlMarkerProps) => {
+  const mapHook = useMap({
+    mapId: props.mapId,
+    waitForLayer: props.insertBeforeLayer,
+  });
+
+  const mapState = useMapState({
+    mapId: props.mapId,
+    watch: { viewport: true },
+  });
+
+  const iframe = useRef<HTMLIFrameElement>(null);
+
+  const [iframeDimensions, setIframeDimensions] = useState({
+    width: "400px",
+    height: "500px",
+  });
+
+  const [markerPixelPos, setMarkerPixelPos] = useState<Point>();
+
+  useEffect(() => {
+    if (!mapHook.map?.map?.project) return;
+
+    const _pixelPos = mapHook.map.map.project([props.lng, props.lat]);
+
+    setMarkerPixelPos(_pixelPos);
+  }, [mapHook.map, props.lng, props.lat, mapState.viewport]);
+
+  useEffect(() => {
+    if (
+      !mapHook.map ||
+      !iframe.current?.contentWindow?.document?.body?.scrollHeight
+    )
+      return;
+
+    let mapHeight = mapHook.map.map._container.clientHeight;
+
+    const _pixelPos = mapHook.map.map.project([props.lng, props.lat]);
+    let pixelToBottom = mapHeight - _pixelPos.y;
+    let iframeHeight =
+      iframe.current?.contentWindow?.document?.body?.scrollHeight;
+    let iframeWidth =
+      iframe.current?.contentWindow?.document?.body?.scrollWidth;
+
+    setIframeDimensions({
+      width: iframeWidth + "px",
+      height:
+        (pixelToBottom < iframeHeight ? pixelToBottom : iframeHeight) + "px",
+    });
+  }, [props.lng, props.lat, props.content]);
+
+  return (
+    <>
+      <MlGeoJsonLayer
+        geojson={{
+          type: "Feature",
+          geometry: {
+            type: "Point",
+            coordinates: [props.lng, props.lat],
+          },
+          properties: {},
+        }}
+        paint={{
+          "circle-radius": 14,
+          "circle-color": "rgba(40,200,20,0.5)",
+        }}
+        type="circle"
+        mapId={props.mapId}
+      ></MlGeoJsonLayer>
+      {markerPixelPos && (
+        <Paper
+          sx={{
+            opacity: 0.7,
+            position: "fixed",
+            display: "flex",
+            /** TODO: fix positioning delay when moving the map */
+            left: markerPixelPos.x,
+            top: markerPixelPos.y,
+            width: iframeDimensions.width,
+            height: iframeDimensions.height,
+            "&:hover": {
+              opacity: 1,
+            },
+            zIndex: -1,
+          }}
+        >
+          <iframe
+            style={{ width: "100%" }}
+            srcDoc={props.content}
+            ref={iframe}
+            sandbox="allow-same-origin allow-popups-to-escape-sandbox"
+            frameBorder="0"
+            title={mapHook.componentId}
+          ></iframe>
+        </Paper>
+      )}
+    </>
+  );
+};
+
+MlMarker.defaultProps = {
+  mapId: undefined,
+};
+
+export default MlMarker;

package/src/components/MlNavigationCompass/MlNavigationCompass.doc.en.md

@@ -0,0 +1 @@
+Tool to tilt, rotate and align the map.

package/src/components/MlNavigationCompass/{MlNavigationCompass.js → MlNavigationCompass.tsx}

@@ -78,6 +78,15 @@ const RotateButton = styled.div`
   }
 `;
 
+interface MlNavigationCompassProps {
+  mapId?: string;
+  insertBeforeLayer?: string;
+  style?: any;
+  backgroundStyle?: any;
+  needleStyle?: any;
+  rotateRightStyle?: any;
+  rotateLeftStyle?: any;
+}
 /**
  * Navigation component that displays a compass component which indicates the current oriantation of the map it is registered for and offers controls to turn the bearing 90° left/right or reset north to point up.
  *
@@ -85,22 +94,26 @@ const RotateButton = styled.div`
  *
  * @component
  */
-const MlNavigationCompass = (props) => {
-  const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
+const MlNavigationCompass = (props: MlNavigationCompassProps) => {
+  const mapHook = useMap({
+    mapId: props.mapId,
+    waitForLayer: props.insertBeforeLayer,
+  });
   const [bearing, setBearing] = useState(0);
 
   useEffect(() => {
     if (!mapHook.map) return;
 
     let _updateBearing = () => {
-      setBearing(Math.round(mapHook.map.getBearing()));
+      if (!mapHook.map?.map?.getBearing) return;
+      setBearing(Math.round(mapHook.map.map.getBearing()));
     };
 
     mapHook.map.on("rotate", _updateBearing, mapHook.componentId);
     _updateBearing();
 
     return () => {
-      mapHook.map.off("rotate", _updateBearing);
+      mapHook.map?.map.off("rotate", _updateBearing);
     };
   }, [mapHook.map, props.mapId]);
 
@@ -132,7 +145,9 @@ const MlNavigationCompass = (props) => {
           <RotateButton className={css({ ...props.rotateRightStyle })}>
             <RotateRightIcon
               onClick={() => {
-                let bearing = Math.round(mapHook.map?.getBearing());
+                if(!mapHook.map)return;
+
+                let bearing = Math.round(mapHook.map.map.getBearing());
                 let rest = Math.round(bearing % 90);
                 if (bearing > 0) {
                   rest = 90 - rest;
@@ -140,19 +155,19 @@ const MlNavigationCompass = (props) => {
                 if (rest === 0) {
                   rest = 90;
                 }
-                mapHook.map?.setBearing(Math.round(bearing + Math.abs(rest)));
+                mapHook.map.map.setBearing(Math.round(bearing + Math.abs(rest)));
               }}
             ></RotateRightIcon>
           </RotateButton>
           <NeedleButton
             className={css({ ...props.needleStyle })}
             onClick={() => {
-              mapHook.map?.setBearing(0);
+              mapHook.map?.map.setBearing(0);
             }}
           >
             <NeedleContainer
               style={{
-                transform: "rotate(" + bearing + "deg)",
+                transform: "rotate(" + (bearing>0?"-"+bearing:-1*bearing) + "deg)",
               }}
             >
               <NeedleIcon />
@@ -161,7 +176,9 @@ const MlNavigationCompass = (props) => {
           <RotateButton className={css({ ...props.rotateLeftStyle })}>
             <RotateLeftIcon
               onClick={() => {
-                let bearing = Math.round(mapHook.map?.getBearing());
+                if(!mapHook.map)return;
+
+                let bearing = Math.round(mapHook.map.map.getBearing());
                 let rest = Math.round(bearing % 90);
                 if (bearing < 0) {
                   rest = 90 + rest;
@@ -169,7 +186,7 @@ const MlNavigationCompass = (props) => {
                 if (rest === 0) {
                   rest = 90;
                 }
-                mapHook.map?.setBearing(Math.round(bearing - Math.abs(rest)));
+                mapHook.map.map.setBearing(Math.round(bearing - Math.abs(rest)));
               }}
             ></RotateLeftIcon>
           </RotateButton>

package/src/components/MlNavigationTools/MlNavigationTools.doc.en.md

@@ -0,0 +1 @@
+Default navigation tool.

package/src/components/MlNavigationTools/{MlNavigationTools.js → MlNavigationTools.tsx}

@@ -3,18 +3,27 @@ import Button from "@mui/material/Button";
 import ButtonGroup from "@mui/material/ButtonGroup";
 import ControlPointIcon from "@mui/icons-material/ControlPoint";
 import RemoveCircleOutlineIcon from "@mui/icons-material/RemoveCircleOutline";
-import GpsFixedIcon from "@mui/icons-material/GpsFixed";
 
 import MlNavigationCompass from "../MlNavigationCompass/MlNavigationCompass";
 import MlFollowGps from "../MlFollowGps/MlFollowGps";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import useMap from "../../hooks/useMap";
 
-const MlNavigationTools = (props) => {
-  const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
+interface MlNavigationToolsProps {
+  mapId?: string;
+  insertBeforeLayer?: string;
+}
+
+ /**
+ * @component
+ */
+const MlNavigationTools = (props: MlNavigationToolsProps) => {
+  const mapHook = useMap({
+    mapId: props.mapId,
+    waitForLayer: props.insertBeforeLayer,
+  });
 
   const [pitch, setPitch] = useState(0);
-  const [locationAccessDenied, setLocationAccessDenied] = useState(false);
   const mediaIsMobile = useMediaQuery("(max-width:900px)");
   const buttonStyle = {
     minWidth: "20px",
@@ -37,24 +46,32 @@ const MlNavigationTools = (props) => {
     if (!mapHook.map) return;
 
     mapHook.map.on("pitchend", () => {
-      setPitch(mapHook.map.getPitch());
-    });
-    setPitch(mapHook.map.getPitch());
+      if (!mapHook.map) return;
+
+      setPitch(mapHook.map.map.getPitch());
+    },mapHook.componentId);
+    setPitch(mapHook.map.map.getPitch());
   }, [mapHook.map, props.mapId]);
 
   const zoomIn = () => {
     if (!mapHook.map) return;
 
-    if (mapHook.map.transform._zoom + 0.5 <= mapHook.map.transform._maxZoom) {
-      mapHook.map.easeTo({ zoom: mapHook.map.transform._zoom + 0.5 });
+    if (
+      mapHook.map.map.transform._zoom + 0.5 <=
+      mapHook.map.map.transform._maxZoom
+    ) {
+      mapHook.map.map.easeTo({ zoom: mapHook.map.map.transform._zoom + 0.5 });
     }
   };
 
   const zoomOut = () => {
     if (!mapHook.map) return;
 
-    if (mapHook.map.transform._zoom - 0.5 >= mapHook.map.transform._minZoom) {
-      mapHook.map.easeTo({ zoom: mapHook.map.transform._zoom - 0.5 });
+    if (
+      mapHook.map.map.transform._zoom - 0.5 >=
+      mapHook.map.map.transform._minZoom
+    ) {
+      mapHook.map.map.easeTo({ zoom: mapHook.map.map.transform._zoom - 0.5 });
     }
   };
 
@@ -62,23 +79,10 @@ const MlNavigationTools = (props) => {
     if (!mapHook.map) return;
 
     let targetPitch = 60;
-    if (mapHook.map.getPitch() !== 0) {
+    if (mapHook.map.map.getPitch() !== 0) {
       targetPitch = 0;
     }
-    mapHook.map.easeTo({ pitch: targetPitch });
-  };
-
-  const moveToCurrentLocation = () => {
-    navigator.geolocation.getCurrentPosition(getLocationSuccess, getLocationError);
-  };
-
-  const getLocationSuccess = (location) => {
-    mapHook.map.setCenter([location.coords.longitude, location.coords.latitude]);
-  };
-
-  const getLocationError = () => {
-    console.log("Access of user location denied");
-    setLocationAccessDenied(true);
+    mapHook.map.map.easeTo({ pitch: targetPitch });
   };
 
   return (
@@ -104,12 +108,9 @@ const MlNavigationTools = (props) => {
           boxShadow: "0px 0px 18px rgba(0,0,0,.5)",
         }}
       />
-      <Button sx={{ ...buttonStyle, fontWeight: 600 }} onClick={adjustPitch}>
+      <Button sx={{ ...buttonStyle, fontSize:mediaIsMobile?'1.4em':'1em', fontWeight: 600 }} onClick={adjustPitch}>
         {pitch ? "2D" : "3D"}
       </Button>
-      <Button sx={buttonStyle} onClick={moveToCurrentLocation} disabled={locationAccessDenied}>
-        <GpsFixedIcon sx={{ fontSize: mediaIsMobile ? "1.5em" : "1.2em" }} />
-      </Button>
       <MlFollowGps style={{ ...(({ color, ...rest }) => rest)(buttonStyle) }} />
       <ButtonGroup
         orientation="vertical"
@@ -121,10 +122,14 @@ const MlNavigationTools = (props) => {
         }}
       >
         <Button sx={{ ...buttonStyle, color: "#ececec" }} onClick={zoomIn}>
-          <ControlPointIcon sx={{ fontSize: mediaIsMobile ? "1.5em" : "1.2em" }} />
+          <ControlPointIcon
+            sx={{ fontSize: mediaIsMobile ? "1.5em" : "1.2em" }}
+          />
         </Button>
         <Button sx={{ ...buttonStyle, color: "#ececec" }} onClick={zoomOut}>
-          <RemoveCircleOutlineIcon sx={{ fontSize: mediaIsMobile ? "1.5em" : "1.2em" }} />
+          <RemoveCircleOutlineIcon
+            sx={{ fontSize: mediaIsMobile ? "1.5em" : "1.2em" }}
+          />
         </Button>
       </ButtonGroup>
     </div>

package/src/components/MlScaleReference/MlScaleReference.doc.en.md

@@ -0,0 +1 @@
+Default scale bar.

package/src/components/MlSpatialElevationProfile/MlSpatialElevationProfile.doc.en.md

@@ -0,0 +1 @@
+Upload and presentation of GPX tracks included elevation profile.

package/src/components/MlThreeJsLayer/MlThreeJsLayer.doc.en.md

@@ -0,0 +1 @@
+Presentation of complex 3D models.