@mapcomponents/react-maplibre 0.1.34 → 0.1.37

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.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.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/MlTransitionGeoJsonLayer/{MlTransitionGeoJsonLayer.js → MlTransitionGeoJsonLayer.tsx}

@@ -1,5 +1,4 @@
 import React, { useState, useRef, useEffect, useCallback } from "react";
-import PropTypes from "prop-types";
 
 import * as turf from "@turf/turf";
 
@@ -7,28 +6,95 @@ import useMap from "../../hooks/useMap";
 
 import { _transitionToGeojson } from "./util/transitionFunctions";
 import MlGeoJsonLayer from "../MlGeoJsonLayer/MlGeoJsonLayer";
+import { Feature, FeatureCollection } from "@turf/turf";
 
 const msPerStep = 50;
 
+interface MlTransitionGeoJsonLayerProps {
+  /**
+   * Id of the target MapLibre instance in mapContext
+   */
+  mapId: string;
+  /**
+   * Type of the layer that will be added to the MapLibre instance.
+   * Possible values: "line", "circle", "fill"
+   */
+  type: string;
+  /**
+   * Layout property object, that is passed to the addLayer call.
+   * Possible props depend on the layer type.
+   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#line
+   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
+   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
+   */
+  layout: any;
+  /**
+   * Paint property object, that is passed to the addLayer call.
+   * Possible props depend on the layer type.
+   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#line
+   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
+   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
+   */
+  paint: any;
+  /**
+   * Javascript object with optional properties "fill", "line", "circle" to override implicit layer type default paint properties.
+   */
+  defaultPaintOverrides: any;
+  /**
+   * Javascript object that is spread into the addLayer commands first parameter.
+   */
+  options: any;
+  /**
+   * GeoJSON data that is supposed to be rendered by this component.
+   */
+  geojson: Feature | FeatureCollection;
+  /**
+   * Id of an existing layer in the mapLibre instance to help specify the layer order
+   * This layer will be visually beneath the layer with the "insertBeforeLayer" id.
+   */
+  insertBeforeLayer: string;
+  /**
+   * Click event handler that is executed whenever a geometry rendered by this component is clicked.
+   */
+  onClick: Function;
+  /**
+   * Hover event handler that is executed whenever a geometry rendered by this component is hovered.
+   */
+  onHover: Function;
+  /**
+   * Leave event handler that is executed whenever a geometry rendered by this component is
+   * left/unhovered.
+   */
+  onLeave: Function;
+  /**
+   * Creates transition animation whenever the geojson prop changes.
+   * Only works with layer type "line" and LineString GeoJSON data.
+   */
+  transitionTime: number;
+}
+
 /**
  * Adds source and layer of types "line", "fill" or "circle" to display GeoJSON data on the map.
- *
- * @component
  */
-const MlTransitionGeoJsonLayer = (props) => {
+const MlTransitionGeoJsonLayer = (props: MlTransitionGeoJsonLayerProps) => {
   const { geojson, ...restProps } = props;
-  // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
-  const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
+
+  const mapHook = useMap({
+    mapId: props.mapId,
+    waitForLayer: props.insertBeforeLayer,
+  });
   const initializedRef = useRef(false);
 
   // transition effect variables
-  const oldGeojsonRef = useRef(null);
+  const oldGeojsonRef = useRef<Feature | FeatureCollection>();
   const transitionInProgressRef = useRef(false);
   const transitionTimeoutRef = useRef(undefined);
   const currentTransitionStepRef = useRef(false);
   const transitionGeojsonDataRef = useRef([]);
   const transitionGeojsonCommonDataRef = useRef([]);
-  const [displayGeojson, setDisplayGeojson] = useState(turf.featureCollection([]));
+  const [displayGeojson, setDisplayGeojson] = useState(
+    turf.featureCollection([])
+  );
 
   useEffect(() => {
     return () => {
@@ -76,10 +142,10 @@ const MlTransitionGeoJsonLayer = (props) => {
       props.type === "line" &&
       typeof props.transitionTime !== "undefined" &&
       props.transitionTime &&
-      typeof props.geojson.geometry !== "undefined" &&
+      typeof props.geojson !== "undefined" &&
       JSON.stringify(oldGeojsonRef.current) !== JSON.stringify(props.geojson)
     ) {
-      transitionToGeojson(props.geojson);
+      transitionToGeojson();
       oldGeojsonRef.current = props.geojson;
     }
   }, [props, transitionToGeojson]);
@@ -99,67 +165,4 @@ const MlTransitionGeoJsonLayer = (props) => {
   );
 };
 
-MlTransitionGeoJsonLayer.propTypes = {
-  /**
-   * Id of the target MapLibre instance in mapContext
-   */
-  mapId: PropTypes.string,
-  /**
-   * Type of the layer that will be added to the MapLibre instance.
-   * Possible values: "line", "circle", "fill"
-   */
-  type: PropTypes.string,
-  /**
-   * Layout property object, that is passed to the addLayer call.
-   * Possible props depend on the layer type.
-   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#line
-   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
-   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
-   */
-  layout: PropTypes.object,
-  /**
-   * Paint property object, that is passed to the addLayer call.
-   * Possible props depend on the layer type.
-   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#line
-   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
-   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
-   */
-  paint: PropTypes.object,
-  /**
-   * Javascript object with optional properties "fill", "line", "circle" to override implicit layer type default paint properties.
-   */
-  defaultPaintOverrides: PropTypes.object,
-  /**
-   * Javascript object that is spread into the addLayer commands first parameter.
-   */
-  options: PropTypes.object,
-  /**
-   * GeoJSON data that is supposed to be rendered by this component.
-   */
-  geojson: PropTypes.object,
-  /**
-   * Id of an existing layer in the mapLibre instance to help specify the layer order
-   * This layer will be visually beneath the layer with the "insertBeforeLayer" id.
-   */
-  insertBeforeLayer: PropTypes.string,
-  /**
-   * Click event handler that is executed whenever a geometry rendered by this component is clicked.
-   */
-  onClick: PropTypes.func,
-  /**
-   * Hover event handler that is executed whenever a geometry rendered by this component is hovered.
-   */
-  onHover: PropTypes.func,
-  /**
-   * Leave event handler that is executed whenever a geometry rendered by this component is
-   * left/unhovered.
-   */
-  onLeave: PropTypes.func,
-  /**
-   * Creates transition animation whenever the geojson prop changes.
-   * Only works with layer type "line" and LineString GeoJSON data.
-   */
-  transitionTime: PropTypes.number,
-};
-
 export default MlTransitionGeoJsonLayer;

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

@@ -2,17 +2,31 @@ import React, { useRef, useEffect } from "react";
 import useMap from "../../hooks/useMap";
 import PropTypes from "prop-types";
 
+interface MlVectorTileLayerProps {
+  mapId?: string;
+  insertBeforeLayer?: string;
+  layerId?: string;
+  sourceOptions?: any;
+  url?: string;
+  layers?: any;
+}
+
 /**
  * Adds a vector-tile source and 0...n vector-tile-layers to the MapLibre instance referenced by
  * props.mapId
  *
  * @component
  */
-const MlVectorTileLayer = (props) => {
-  const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
+const MlVectorTileLayer = (props: MlVectorTileLayerProps) => {
+  const mapHook = useMap({
+    mapId: props.mapId,
+    waitForLayer: props.insertBeforeLayer,
+  });
 
   const layerIdsRef = useRef({});
-  const layerId = useRef(props.layerId || "MlVectorTileLayer-" + mapHook.componentId);
+  const layerId = useRef(
+    props.layerId || "MlVectorTileLayer-" + mapHook.componentId
+  );
   const layerPaintConfsRef = useRef({});
   const layerLayoutConfsRef = useRef({});
   const initializedRef = useRef(false);
@@ -58,7 +72,9 @@ const MlVectorTileLayer = (props) => {
         mapHook.componentId
       );
       layerPaintConfsRef.current[key] = JSON.stringify(props.layers[key].paint);
-      layerLayoutConfsRef.current[key] = JSON.stringify(props.layers[key].layout);
+      layerLayoutConfsRef.current[key] = JSON.stringify(
+        props.layers[key].layout
+      );
     }
   }, [mapHook.map, props]);
 
@@ -66,13 +82,13 @@ const MlVectorTileLayer = (props) => {
     if (!mapHook.map || !initializedRef.current) return;
     // initialize the layer and add it to the MapLibre-gl instance or do something else with it
     for (var key in props.layers) {
-      if (mapHook.map.getLayer(layerIdsRef.current[key])) {
+      if (mapHook.map.map.getLayer(layerIdsRef.current[key])) {
         // update changed paint property
         let layerPaintConfString = JSON.stringify(props.layers[key].paint);
 
         if (layerPaintConfString !== layerPaintConfsRef.current[key]) {
           for (let paintKey in props.layers[key].paint) {
-            mapHook.map.setPaintProperty(
+            mapHook.map.map.setPaintProperty(
               layerIdsRef.current[key],
               paintKey,
               props.layers[key].paint[paintKey]
@@ -86,7 +102,7 @@ const MlVectorTileLayer = (props) => {
 
         if (layerLayoutConfString !== layerLayoutConfsRef.current[key]) {
           for (let layoutKey in props.layers[key].layout) {
-            mapHook.map.setLayoutProperty(
+            mapHook.map.map.setLayoutProperty(
               layerIdsRef.current[key],
               layoutKey,
               props.layers[key].layout[layoutKey]