@mapcomponents/react-maplibre 0.1.34 → 0.1.37

package/src/components/MlFillExtrusionLayer/MlFillExtrusionLayer.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+
+import { v4 as uuidv4 } from "uuid";
+import useLayer from "../../hooks/useLayer";
+
+interface MlFillExtrusionLayerProps {
+  /**
+   * 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;
+  /**
+   * Id of the layer that will be added by this component
+   */
+  layerId?: string;
+  /**
+   * Paint properties of the config object that is passed to the MapLibreGl.addLayer call. All
+   * available properties are documented in the MapLibreGl documentation
+   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill-extrusion
+   */
+  paint?: object;
+  /**
+   * Source id of a vector tile source containing the geometries to use for this fill-extrusion
+   * layer.
+   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#source-layer
+   */
+  sourceId?: string;
+  /**
+   * Layer id from a vector tile source containing the geometries to use for this fill-extrusion
+   * layer.
+   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#source-layer
+   */
+  sourceLayer?: string;
+  /**
+   * This layer will be hidden for zoom levels lower than defined on this property
+   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#minzoom
+   */
+  minZoom?: number;
+}
+
+/**
+ * Adds a fill extrusion layer to the MapLibre instance reference by props.mapId
+ *
+ */
+const MlFillExtrusionLayer = (props: MlFillExtrusionLayerProps) => {
+  useLayer({
+    mapId: props.mapId,
+    layerId: props.layerId || "MlFillExtrusionLayer-" + uuidv4(),
+    options: {
+      id: "",
+      type: "fill-extrusion",
+      source: props.sourceId || "openmaptiles",
+      "source-layer": props.sourceLayer || "building",
+      minzoom: props.minZoom || 14,
+      paint: {
+        ...props.paint,
+      },
+    },
+    insertBeforeFirstSymbolLayer: true,
+  });
+
+  return <></>;
+};
+
+MlFillExtrusionLayer.defaultProps = {
+  mapId: undefined,
+  paint: {
+    "fill-extrusion-color": "hsl(196, 61%, 83%)",
+    "fill-extrusion-height": {
+      property: "render_height",
+      type: "identity",
+    },
+    "fill-extrusion-base": {
+      property: "render_min_height",
+      type: "identity",
+    },
+    "fill-extrusion-opacity": 1,
+  },
+};
+
+export default MlFillExtrusionLayer;

package/src/components/MlFollowGps/MlFollowGps.stories.js

@@ -8,8 +8,6 @@ const storyoptions = {
   title: "MapComponents/MlFollowGps",
   component: MlFollowGps,
   argTypes: {
-    url: {},
-    layer: {},
   },
   decorators: mapContextDecorator,
 };

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

@@ -1,35 +1,85 @@
 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 GpsFixedIcon from "@mui/icons-material/GpsFixed";
-import { point, circle, lineArc } from "@turf/turf";
 import MlGeoJsonLayer from "../MlGeoJsonLayer/MlGeoJsonLayer";
 
+import { Button } from "@mui/material";
+import  GpsFixedIcon  from "@mui/icons-material/GpsFixed";
+
+import { point, circle, lineArc, Feature, Point } from "@turf/turf";
+
+interface MlFollowGpsProps {
+  /**
+   * 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;
+  /**
+   * By default a dot will be shown on the map at the user's location. Set to false to disable.
+   */
+  showUserLocation?: boolean;
+  /**
+   * 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.
+   */
+  showOrientation?: boolean;
+  /**
+   * 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?: boolean,
+  /**
+   * 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?: any;
+  /**
+   * Active button font color
+   */
+  onColor?: string;
+  /**
+   * Inactive button font color
+   */
+  offColor?: 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?: any;
+  /**
+   * CSS style object that is applied to the button component
+   */
+  style?: any;
+}
+
 /**
  * Adds a button that makes the map follow the users GPS position using
  * navigator.geolocation.watchPosition if activated
  *
- * @param {object} props
- * @param {string} props.mapId Id of the target MapLibre instance in mapContext
- *
- * @component
  */
-const MlFollowGps = (props) => {
-  const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
+const MlFollowGps = (props: MlFollowGpsProps) => {
+  const mapHook = useMap({
+    mapId: props.mapId,
+    waitForLayer: props.insertBeforeLayer,
+  });
 
   const [isFollowed, setIsFollowed] = useState(false);
-  const [userLocationGeoJson, setUserLocationGeoJson] = useState(undefined);
+  const [userLocationGeoJson, setUserLocationGeoJson] =
+    useState<Feature<Point>>();
   const [locationAccessDenied, setLocationAccessDenied] = useState(false);
-  const [accuracyGeoJson, setAccuracyGeoJson] = useState();
+  const [accuracyGeoJson, setAccuracyGeoJson] = useState<Feature>();
   const [deviceOrientation, setDeviceOrientation] = useState(0);
 
   const getLocationSuccess = useCallback(
     (pos) => {
       if (!mapHook.map) return;
 
-      mapHook.map.flyTo({
+      mapHook.map.map.flyTo({
         center: [pos.coords.longitude, pos.coords.latitude],
         zoom: 18,
         speed: 1,
@@ -43,52 +93,55 @@ const MlFollowGps = (props) => {
     [mapHook.map, props]
   );
 
-  const getLocationError = (err) => {
+  const getLocationError = () => {
     console.log("Access of user location denied");
     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)
-  } 
+  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);
+    return copy;
+  }, [deviceOrientation, userLocationGeoJson]);
+
+  const handleOrientation = (event: any) => {
+    setDeviceOrientation(-event.alpha);
+  };
 
   useEffect(() => {
     if (isFollowed) {
       let _handleOrientation = handleOrientation;
-      window.addEventListener('deviceorientation', _handleOrientation)
+      window.addEventListener("deviceorientation", _handleOrientation);
       return () => {
-        window.removeEventListener('deviceorientation', _handleOrientation)
-      }
+        window.removeEventListener("deviceorientation", _handleOrientation);
+      };
     }
+    return;
   }, [isFollowed]);
 
   useEffect(() => {
     if (!mapHook.map) return;
 
     if (isFollowed) {
-      let _watchId = navigator.geolocation.watchPosition(getLocationSuccess, getLocationError);
+      let _watchId = navigator.geolocation.watchPosition(
+        getLocationSuccess,
+        getLocationError
+      );
 
       return () => {
         navigator.geolocation.clearWatch(_watchId);
       };
     }
+    return;
   }, [mapHook.map, isFollowed, getLocationSuccess]);
 
   return (
@@ -135,14 +188,18 @@ const MlFollowGps = (props) => {
       )}
 
       <Button
-        sx={{ zIndex: 1002, color: isFollowed ? props.onColor : props.offColor, ...props.style }}
+        sx={{
+          zIndex: 1002,
+          color: isFollowed ? props.onColor : props.offColor,
+          ...props.style,
+        }}
         disabled={locationAccessDenied}
         onClick={() => {
           setIsFollowed(!isFollowed);
         }}
       >
         {" "}
-        <GpsFixedIcon sx={{ fontSize: props.style.fontSize }} />{" "}
+        <GpsFixedIcon sx={{ ...(props.style?.fontSize?{fontSize: props.style?.fontSize}:{}) }} />{" "}
       </Button>
     </>
   );
@@ -168,51 +225,7 @@ MlFollowGps.defaultProps = {
   offColor: "#666",
   showAccuracyCircle: true,
   showUserLocation: true,
-  showOrientation: true
+  showOrientation: true,
 };
 
-MlFollowGps.propTypes = {
-  /**
-   * Id of the target MapLibre instance in mapContext
-   */
-  mapId: PropTypes.string,
-  /**
-   * 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,
-  /**
-   * 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.
-   */
-  showUserLocation: PropTypes.bool,
-  /**
-   * 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.
-   */
-  showOrientation: PropTypes.bool,
-};
 export default MlFollowGps;

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

@@ -1,13 +1,12 @@
 import React, { useContext, useRef, useEffect, useState } from "react";
-import PropTypes from "prop-types";
-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, LngLatBoundsLike, GeoJSONSource } from "maplibre-gl";
 import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
 import ListItemText from "@mui/material/ListItemText";
@@ -16,12 +15,31 @@ import toGeoJSON from "./gpxConverter";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import useMap from "../../hooks/useMap";
 
+interface MlGPXViewerProps {
+
+  /**
+   * Id of the target MapLibre instance in mapHook
+   */
+  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,
+  /**
+   * Prefix of the component id this component uses when adding elements to the MapLibreGl-instance
+   */
+  idPrefix?: string,
+  /**
+   * Sets the layers layout-property "visibility" to "none" if false or "visible" if true
+   */
+  visible?: boolean,
+}
+
 /**
  * MlGPXViewer returns a dropzone and a button to load a GPX Track into the map.
- *
- * @component
  */
-const MlGPXViewer = (props) => {
+const MlGPXViewer = (props:MlGPXViewerProps) => {
   const dataSource = useContext(GeoJsonContext);
   const initializedRef = useRef(false);
   const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
@@ -30,10 +48,10 @@ const MlGPXViewer = (props) => {
   const layerNamePoints = "importer-layer-points";
 
   const [open, setIsOpen] = useState(false);
-  const dropZone = useRef(null);
+  const dropZone = useRef<HTMLDivElement>(null);
   const [zIndex, setZIndex] = useState(0);
-  const [metaData, setMetaData] = useState([]);
-  const fileupload = useRef(null);
+  const [metaData, setMetaData] = useState<{ title: string; value: string; id: number; }[]>([]);
+  const fileupload = useRef<HTMLInputElement>(null);
   const mediaIsMobile = useMediaQuery("(max-width:900px)");
 
   const popup = useRef(
@@ -85,12 +103,15 @@ const MlGPXViewer = (props) => {
     );
 
     [layerNameLines, layerNamePoints].forEach((layerName) => {
-      mapHook.map.setLayoutProperty(layerName, "visibility", "visible");
+      if(!mapHook.map)return;
+
+      mapHook.map.map.setLayoutProperty(layerName, "visibility", "visible");
     });
     mapHook.map.on(
       "mouseenter",
       layerNamePoints,
-      (e) => {
+      (e:any) => {
+        if(!mapHook.map)return;
         // Change the cursor style as a UI indicator.
 
         const coordinates = e.features[0].geometry.coordinates.slice();
@@ -107,7 +128,7 @@ const MlGPXViewer = (props) => {
         // Populate the popup and set its coordinates
 
         // based on the feature found.
-        popup.current.setLngLat(coordinates).setHTML(name).addTo(mapHook.map);
+        popup.current.setLngLat(coordinates).setHTML(name).addTo(mapHook.map.map);
       },
       mapHook.componentId
     );
@@ -116,25 +137,27 @@ const MlGPXViewer = (props) => {
       "mouseleave",
       "places",
       function () {
-        mapHook.map.getCanvas().style.cursor = "";
+        if(!mapHook.map)return;
+
+        mapHook.map.map.getCanvas().style.cursor = "";
         popup.current.remove();
       },
       mapHook.componentId
     );
 
-    mapHook.map.setZoom(10);
+    mapHook.map.map.setZoom(10);
   }, [mapHook.map]);
 
   useEffect(() => {
-    const dropZoneCurrent = dropZone.current;
-    const raiseDropZoneAndStopDefault = (event) => {
+    const _dropZone = dropZone.current;
+    const raiseDropZoneAndStopDefault = (event:any) => {
       setZIndex(1000);
       stopDefault(event);
     };
     const lowerDropZone = () => {
       setZIndex(0);
     };
-    const lowerDropZoneAndStopDefault = (event) => {
+    const lowerDropZoneAndStopDefault = (event:any) => {
       setZIndex(0);
       stopDefault(event);
     };
@@ -142,19 +165,19 @@ const MlGPXViewer = (props) => {
     window.addEventListener("dragenter", raiseDropZoneAndStopDefault);
     window.addEventListener("dragover", stopDefault);
 
-    dropZoneCurrent.addEventListener("dragleave", lowerDropZone);
+    _dropZone?.addEventListener("dragleave", lowerDropZone);
 
     window.addEventListener("drop", lowerDropZoneAndStopDefault);
 
     return () => {
       window.removeEventListener("dragenter", raiseDropZoneAndStopDefault);
       window.removeEventListener("dragover", stopDefault);
-      dropZoneCurrent.removeEventListener("dragleave", lowerDropZone);
+      _dropZone?.removeEventListener("dragleave", lowerDropZone);
       window.removeEventListener("drop", lowerDropZoneAndStopDefault);
     };
   });
 
-  const stopDefault = (event) => {
+  const stopDefault = (event:any) => {
     event.preventDefault();
     event.stopPropagation();
   };
@@ -165,11 +188,13 @@ const MlGPXViewer = (props) => {
     const visibility = props.visible ? "visible" : "none";
 
     [layerNameLines, layerNamePoints].forEach((layerName) => {
-      mapHook.map.setLayoutProperty(layerName, "visibility", visibility);
+      if(!mapHook.map)return;
+
+      mapHook.map.map.setLayoutProperty(layerName, "visibility", visibility);
     });
   }, [props.visible]);
 
-  const dropHandler = (event) => {
+  const dropHandler = (event:any) => {
     event.preventDefault();
 
     if (event.dataTransfer.items) {
@@ -179,7 +204,9 @@ const MlGPXViewer = (props) => {
       // If dropped items aren't files, reject them
       if (event.dataTransfer.items[0].kind === "file") {
         const reader = new FileReader();
-        reader.onload = (payload) => {
+        reader.onload = (payload:any) => {
+          if(!payload?.currentTarget?.result)return;
+
           addGPXToMap(payload.currentTarget.result);
         };
         const file = event.dataTransfer.items[0].getAsFile();
@@ -188,23 +215,25 @@ const MlGPXViewer = (props) => {
     } else {
       // Use DataTransfer interface to access the file(s)
     }
+    return;
   };
 
-  const addGPXToMap = (gpxAsString) => {
-    if (!mapHook.map) return;
+  const addGPXToMap = (gpxAsString:string) => {
+    if (!mapHook.map || !dataSource.setData) return;
+
     try {
       setMetaData([]);
       const domParser = new DOMParser();
       const gpxDoc = domParser.parseFromString(gpxAsString, "application/xml");
       const metadata = gpxDoc.querySelector("metadata");
-      metadata.childNodes.forEach((node) => {
+      metadata?.childNodes.forEach((node:Element) => {
         let value = node.textContent;
         const title = node.nodeName;
 
         if (node.nodeName === "link") {
           value = node.getAttribute("href");
         }
-        if (!!value.trim().length) {
+        if (!!value?.trim().length) {
           const metaDatEntry = {
             title: title,
             value: value,
@@ -215,9 +244,9 @@ const MlGPXViewer = (props) => {
       });
       const data = toGeoJSON.gpx(gpxDoc);
       dataSource.setData(data);
-      mapHook.map.getSource(sourceName).setData(data);
+      (mapHook.map.map.getSource(sourceName) as GeoJSONSource).setData(data as GeoJSON);
       const bounds = bbox(data);
-      mapHook.map.fitBounds(bounds);
+      mapHook.map.map.fitBounds(bounds as LngLatBoundsLike);
     } catch (e) {
       console.log(e);
     }
@@ -228,17 +257,25 @@ const MlGPXViewer = (props) => {
   };
 
   const fileUploadOnChange = () => {
-    const file = fileupload.current.files[0];
+    if(!fileupload.current)return false;
+
+    const file = fileupload.current?.files?.[0];
     if (!file) return false;
     const reader = new FileReader();
-    reader.onload = (payload) => {
+    reader.onload = (payload:any) => {
+      if(!payload)return;
+
       addGPXToMap(payload.currentTarget.result);
     };
 
     reader.readAsText(file);
+
+    return;
   };
 
   const manualUpload = () => {
+    if(!fileupload.current)return;
+
     fileupload.current.click();
   };
   return (
@@ -336,24 +373,5 @@ MlGPXViewer.defaultProps = {
   visible: true,
 };
 
-MlGPXViewer.propTypes = {
-  /**
-   * Id of the target MapLibre instance in mapHook
-   */
-  mapId: PropTypes.string,
-  /**
-   * Prefix of the component id this component uses when adding elements to the MapLibreGl-instance
-   */
-  idPrefix: PropTypes.string,
-  /**
-   * Sets the layers layout-property "visibility" to "none" if false or "visible" if true
-   */
-  visible: PropTypes.bool,
-  /**
-   * 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: PropTypes.string,
-};
 
 export default MlGPXViewer;

package/src/components/MlGPXViewer/util/GeoJsonContext.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { FeatureCollection } from '@turf/turf';
+
+type ContextProps = { 
+    data: FeatureCollection,
+    setData: Function,
+    getEmptyFeatureCollection: Function
+  };
+
+const GeoJsonContext = React.createContext<Partial<ContextProps>>({});
+
+export const GeoJsonContextProvider = GeoJsonContext.Provider;
+export default GeoJsonContext;

package/src/components/MlGPXViewer/util/{GeoJsonProvider.js → GeoJsonProvider.tsx}

@@ -1,9 +1,9 @@
 import React, { useState } from "react";
-import PropTypes from "prop-types";
 import { GeoJsonContextProvider } from "./GeoJsonContext";
+import { FeatureCollection } from '@turf/turf';
 
-const GeoJsonProvider = ({ children }) => {
-  const [data, setData] = useState({
+const GeoJsonProvider = ({ children }:{children:JSX.Element}) => {
+  const [data, setData] = useState<FeatureCollection>({
     type: "FeatureCollection",
     features: [],
   });
@@ -22,8 +22,4 @@ const GeoJsonProvider = ({ children }) => {
   return <GeoJsonContextProvider value={value}>{children}</GeoJsonContextProvider>;
 };
 
-GeoJsonProvider.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
 export default GeoJsonProvider;

package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.stories.js

@@ -12,8 +12,6 @@ const storyoptions = {
   title: "MapComponents/MlGeoJsonLayer",
   component: MlGeoJsonLayer,
   argTypes: {
-    url: {},
-    layer: {},
   },
   decorators: mapContextDecorator,
 };
@@ -36,12 +34,18 @@ const LinestringTemplate = (props) => {
 
 export const Linestring = LinestringTemplate.bind({});
 Linestring.parameters = {};
-Linestring.args = {};
+Linestring.args = {
+  type:''
+};
 
 export const Polygon = Template.bind({});
 Polygon.parameters = {};
 Polygon.args = {
   geojson: sample_polygon_geojson_1,
+  paint:{
+    "fill-color": 'rgba(120,20,80,.5)'
+  },
+  type:''
 };
 export const DefaultPaintOverrides = Template.bind({});
 DefaultPaintOverrides.parameters = {};
@@ -58,4 +62,5 @@ DefaultPaintOverrides.args = {
     },
   },
   geojson: sample_polygon_geojson_1,
+  type:''
 };