@mapcomponents/react-maplibre 0.1.34 → 0.1.35

package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.tsx

@@ -0,0 +1,106 @@
+import React from "react";
+
+import useLayer from "../../hooks/useLayer";
+
+import { v4 as uuidv4 } from "uuid";
+
+import getDefaultPaintPropsByType from "./util/getDefaultPaintPropsByType";
+import getDefaulLayerTypeByGeometry from "./util/getDefaultLayerTypeByGeometry";
+import { Feature, FeatureCollection } from "@turf/turf";
+
+type MlGeoJsonLayerProps = {
+  /**
+   * Id of the target MapLibre instance in mapContext
+   */
+  mapId?: string;
+  /**
+   * 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;
+  /**
+   * Id of the new layer and source that are added to the MapLibre instance
+   */
+  layerId?: string;
+  /**
+   * GeoJSON data that is supposed to be rendered by this component.
+   */
+  geojson: Feature | FeatureCollection | undefined;
+  /**
+   * Type of the layer that will be added to the MapLibre instance.
+   * Possible values: "line", "circle", "fill"
+   */
+  type?: string;
+  /**
+   * 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;
+  /**
+   * 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;
+  /**
+   * Javascript object that is spread into the addLayer commands first parameter.
+   */
+  options?: any;
+  /**
+   * Javascript object with optional properties "fill", "line", "circle" to override implicit layer type default paint properties.
+   */
+  defaultPaintOverrides?: any;
+  /**
+   * Hover event handler that is executed whenever a geometry rendered by this component is hovered.
+   */
+  onHover?: Function;
+  /**
+   * Click event handler that is executed whenever a geometry rendered by this component is clicked.
+   */
+  onClick?: Function;
+  /**
+   * Leave event handler that is executed whenever a geometry rendered by this component is
+   * left/unhovered.
+   */
+  onLeave?: Function;
+}
+
+/**
+ * Adds source and layer of types "line", "fill" or "circle" to display GeoJSON data on the map.
+ *
+ * @component
+ */
+const MlGeoJsonLayer = (props: MlGeoJsonLayerProps) => {
+  const layerType = props.type || getDefaulLayerTypeByGeometry(props.geojson);
+  // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
+  useLayer({
+    mapId: props.mapId,
+    layerId: props.layerId || "MlGeoJsonLayer-" + uuidv4(),
+    geojson: props.geojson,
+    options: {
+      paint:
+        props.paint ||
+        getDefaultPaintPropsByType(
+          layerType,
+          props.defaultPaintOverrides
+        ),
+      layout: props.layout || {},
+      ...props.options,
+      type: layerType,
+    },
+    insertBeforeLayer: props.insertBeforeLayer,
+    onHover: props.onHover,
+    onClick: props.onClick,
+    onLeave: props.onLeave,
+  });
+
+  return (<></>);
+};
+
+
+export default MlGeoJsonLayer;

package/src/components/MlGeoJsonLayer/util/{getDefaultLayerTypeByGeometry.js → getDefaultLayerTypeByGeometry.ts}

@@ -1,3 +1,5 @@
+import { Feature, FeatureCollection } from "@turf/turf";
+
 const mapGeometryTypesToLayerTypes = {
   Position: "circle",
   Point: "circle",
@@ -9,7 +11,9 @@ const mapGeometryTypesToLayerTypes = {
   GeometryCollection: "circle",
 };
 
-const getDefaulLayerTypeByGeometry = (geojson) => {
+const getDefaulLayerTypeByGeometry: Function = (
+  geojson: Feature | FeatureCollection
+): string => {
   if (geojson?.type === "Feature") {
     return mapGeometryTypesToLayerTypes?.[geojson?.geometry?.type]
       ? mapGeometryTypesToLayerTypes[geojson.geometry.type]
@@ -21,5 +25,6 @@ const getDefaulLayerTypeByGeometry = (geojson) => {
     }
     return "circle";
   }
+  return "fill";
 };
 export default getDefaulLayerTypeByGeometry;

package/src/components/MlGeoJsonLayer/util/{getDefaultPaintPropsByType.js → getDefaultPaintPropsByType.ts}

@@ -1,4 +1,4 @@
-const getDefaultPaintPropsByType = (type, defaultPaintOverrides) => {
+const getDefaultPaintPropsByType:Function = (type:string, defaultPaintOverrides:any):any => {
   switch (type) {
     case "fill":
       if (defaultPaintOverrides?.fill) {

package/src/components/MlImageMarkerLayer/MlImageMarkerLayer.stories.js

@@ -8,10 +8,7 @@ import wgMarker from "./assets/wg-marker.png";
 const storyoptions = {
   title: "MapComponents/MlImageMarkerLayer",
   component: MlImageMarkerLayer,
-  argTypes: {
-    url: {},
-    layer: {},
-  },
+  argTypes: { },
   decorators: mapContextDecorator,
 };
 export default storyoptions;

package/src/components/MlImageMarkerLayer/MlImageMarkerLayer.tsx

@@ -0,0 +1,129 @@
+import React, { useRef, useCallback, useEffect } from "react";
+
+import { GeoJSONSource } from "maplibre-gl";
+import useMap from "../../hooks/useMap";
+
+interface MlImageMarkerLayerProps {
+  /**
+   * 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 to the maplibre-gl instance
+   */
+  layerId?: string;
+  /**
+   * Id of the image that will be added by this component to the maplibre-gl instance
+   */
+  imageId?: string;
+  /**
+   * Path or URL to a supported raster image
+   */
+  imgSrc?: string;
+  /**
+   * Javascript object that is passed the addLayer command as first parameter.
+   */
+  options?: any;
+}
+
+const MlImageMarkerLayer = (props: MlImageMarkerLayerProps) => {
+  const mapHook = useMap({
+    mapId: props.mapId,
+    waitForLayer: props.insertBeforeLayer,
+  });
+
+  const layerInitializedRef = useRef(false);
+  const imageIdRef = useRef(props.imageId || "img_" + new Date().getTime());
+  const layerId = useRef(
+    props.layerId || "MlImageMarkerLayer-" + mapHook.componentId
+  );
+
+  useEffect(() => {
+    if (
+      !mapHook.map ||
+      (mapHook.map && !mapHook.map.map.getLayer(layerId.current)) ||
+      !props.options
+    )
+      return;
+    // the MapLibre-gl instance (mapContext.map) is accessible here
+    // initialize the layer and add it to the MapLibre-gl instance or do something else with it
+    var key;
+
+    if (props.options.layout) {
+      for (key in props.options.layout) {
+        mapHook.map.map.setLayoutProperty(
+          layerId.current,
+          key,
+          props.options.layout[key]
+        );
+      }
+    }
+    if (props.options.paint) {
+      for (key in props.options.paint) {
+        mapHook.map.map.setPaintProperty(
+          layerId.current,
+          key,
+          props.options.paint[key]
+        );
+      }
+    }
+  }, [props.options, layerId.current, props.mapId]);
+
+  const addLayer = useCallback(() => {
+    if(!mapHook.map)return;
+
+    let tmpOptions = {
+      id: layerId.current,
+      layout: {},
+      ...props.options,
+    };
+    tmpOptions.layout["icon-image"] = imageIdRef.current;
+    mapHook.map.addLayer(
+      tmpOptions,
+      props.insertBeforeLayer,
+      mapHook.componentId
+    );
+  }, [props, mapHook.map]);
+
+  useEffect(() => {
+    if (!props.options || !mapHook.map || layerInitializedRef.current)
+      return;
+
+    layerInitializedRef.current = true;
+
+    if (props.imgSrc) {
+      mapHook.map.map.loadImage(props.imgSrc, function (error, image) {
+        if (error) throw error;
+        
+        if(!mapHook.map)return;
+
+        mapHook.map.addImage(imageIdRef.current, image, mapHook.componentId);
+      });
+    }
+
+    addLayer();
+  }, [mapHook.map, addLayer, props]);
+
+  useEffect(() => {
+    if (
+      !mapHook.map ||
+      (mapHook.map && !mapHook.map.map.getLayer(layerId.current)) ||
+      !props.options
+    ) {
+      return;
+    }
+
+    (mapHook.map.map
+      .getSource(layerId.current) as GeoJSONSource)
+      .setData(props.options.source.data);
+  }, [props.options.source.data, props]);
+
+  return <></>;
+};
+
+export default MlImageMarkerLayer;

package/src/components/MlLayer/MlLayer.stories.js

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

package/src/components/MlLayer/MlLayer.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+
+import useLayer from "../../hooks/useLayer";
+
+interface MlLayerProps {
+  /**
+   * 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 to the maplibre-gl instance
+   */
+  layerId?: string;
+  /**
+   * Javascript object that is passed the addLayer command as first parameter.
+   */
+  options?: any;
+}
+
+/**
+ * Basic layer component that create a layer in a MapLibre-gl instance and keeps it updated according to it attribute configuration.
+ * 
+ * @category Map components 
+ */
+const MlLayer = (props: MlLayerProps) => {
+  useLayer({
+    idPrefix: 'MlLayer-',
+    layerId: props.layerId,
+    mapId: props.mapId,
+    options: {
+      type: "background",
+      paint: {
+        "background-color": "rgba(0,0,0,0)",
+      },
+      ...props.options,
+    },
+    insertBeforeLayer: props.insertBeforeLayer,
+  });
+
+  return <></>;
+};
+
+export default MlLayer;

package/src/components/MlLayerMagnify/MlLayerMagnify.stories.js

@@ -9,8 +9,6 @@ const storyoptions = {
   title: "MapComponents/MlLayerMagnify",
   component: MlLayerMagnify,
   argTypes: {
-    url: {},
-    layer: {},
   },
   decorators: multiMapContextDecorator,
 };
@@ -34,7 +32,9 @@ const Template = (args) => (
 );
 
 export const ExampleConfig = Template.bind({});
-ExampleConfig.parameters = {};
+ExampleConfig.parameters = {
+
+};
 ExampleConfig.args = {
   wmsLayerMapId: "map_2",
   magnifierRadius: 200,

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

@@ -1,29 +1,50 @@
-import React, { useContext, useCallback, useRef, useEffect, useState } from "react";
-import PropTypes from "prop-types";
+import React, {
+  useContext,
+  useCallback,
+  useRef,
+  useEffect,
+  useState,
+  useMemo
+} from "react";
+// @ts-ignore
 import syncMove from "@mapbox/mapbox-gl-sync-move";
 import "./style.css";
+// @ts-ignore
 import { MapContext } from "@mapcomponents/react-core";
 
+interface MlLayerMagnifyProps {
+  /**
+   * Id of the first MapLibre instance
+   */
+  map1Id: string;
+  /**
+   * Id of the second MapLibre instance
+   */
+  map2Id: string;
+  /**
+   * Size of the "magnifier"-circle
+   */
+  magnifierRadius?: number;
+}
+
 /**
  *
  * Hides the MapLibreMap referenced by props.map2Id except for the "magnifier"-circle that reveals
  * the map and can be dragged around on top of the MapLibreMap referenced by props.map1Id
- *
- * @component
  */
-const MlLayerMagnify = (props) => {
-  const mapContext = useContext(MapContext);
+const MlLayerMagnify = (props: MlLayerMagnifyProps) => {
+  const mapContext:MapContextType = useContext(MapContext);
   const syncMoveInitializedRef = useRef(false);
   const syncCleanupFunctionRef = useRef(null);
 
-  const [swipeX, setSwipeX] = useState(50);
-  const swipeXRef = useRef(50);
-  const [swipeY, setSwipeY] = useState(50);
-  const swipeYRef = useRef(50);
+  const [swipeX, setSwipeX] = useState('50');
+  const swipeXRef = useRef('50');
+  const [swipeY, setSwipeY] = useState('50');
+  const swipeYRef = useRef('50');
 
-  const magnifierRadiusRef = useRef(props.magnifierRadius);
-
-  const [magnifierRadius, setMagnifierRadius] = useState(magnifierRadiusRef.current);
+  const magnifierRadius = useMemo(() => {
+    return props.magnifierRadius || 200;
+  },[props.magnifierRadius]);
 
   const mapExists = useCallback(() => {
     if (!props.map1Id || !props.map2Id) {
@@ -51,7 +72,8 @@ const MlLayerMagnify = (props) => {
 
     return () => {
       window.removeEventListener("resize", _onResize);
-      if (syncCleanupFunctionRef.current) {
+      if (typeof syncCleanupFunctionRef.current === 'function') {
+        // @ts-ignore
         syncCleanupFunctionRef.current();
       }
     };
@@ -61,7 +83,9 @@ const MlLayerMagnify = (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"
@@ -78,21 +102,24 @@ const MlLayerMagnify = (props) => {
       let swipeX_tmp = ((clientX / bounds.width) * 100).toFixed(2);
       let swipeY_tmp = ((clientY / bounds.height) * 100).toFixed(2);
 
-      if (swipeXRef.current !== swipeX_tmp || swipeYRef.current !== swipeY_tmp) {
+      if (
+        swipeXRef.current !== swipeX_tmp ||
+        swipeYRef.current !== swipeY_tmp
+      ) {
         setSwipeX(swipeX_tmp);
         swipeXRef.current = swipeX_tmp;
         setSwipeY(swipeY_tmp);
         swipeYRef.current = swipeY_tmp;
 
         mapContext.maps[props.map2Id].getContainer().style.clipPath =
-          `circle(${magnifierRadiusRef.current}px at ` +
-          (swipeXRef.current * bounds.width) / 100 +
+          `circle(${magnifierRadius}px at ` +
+          (parseFloat(swipeXRef.current) * bounds.width) / 100 +
           "px " +
-          (swipeYRef.current * bounds.height) / 100 +
+          (parseFloat(swipeYRef.current) * bounds.height) / 100 +
           "px)";
       }
     },
-    [mapContext, mapExists, props]
+    [mapContext, mapExists, props, magnifierRadius]
   );
 
   useEffect(() => {
@@ -104,27 +131,32 @@ const MlLayerMagnify = (props) => {
       mapContext.getMap(props.map2Id).map
     );
 
+    /*
+    automatically adjust radius for small screens
     if (
       mapContext.maps[props.map1Id].getCanvas().clientWidth >
         mapContext.maps[props.map1Id].getCanvas().clientHeight &&
-      magnifierRadiusRef.current * 2 > mapContext.maps[props.map1Id].getCanvas().clientHeight
+      magnifierRadius * 2 >
+        mapContext.maps[props.map1Id].getCanvas().clientHeight
     ) {
-      magnifierRadiusRef.current = Math.floor(
+      magnifierRadius = Math.floor(
         mapContext.maps[props.map1Id].getCanvas().clientHeight / 2
       );
-      setMagnifierRadius(magnifierRadiusRef.current);
+      setMagnifierRadius(magnifierRadius);
     }
 
     if (
       mapContext.maps[props.map1Id].getCanvas().clientHeight >
         mapContext.maps[props.map1Id].getCanvas().clientWidth &&
-      magnifierRadiusRef.current * 2 > mapContext.maps[props.map1Id].getCanvas().clientWidth
+      magnifierRadius * 2 >
+        mapContext.maps[props.map1Id].getCanvas().clientWidth
     ) {
-      magnifierRadiusRef.current = Math.floor(
+      magnifierRadius = Math.floor(
         mapContext.maps[props.map1Id].getCanvas().clientWidth / 2
       );
-      setMagnifierRadius(magnifierRadiusRef.current);
+      setMagnifierRadius(magnifierRadius);
     }
+    */
 
     onMove({
       clientX: mapContext.maps[props.map1Id].getCanvas().clientWidth / 2,
@@ -132,7 +164,7 @@ const MlLayerMagnify = (props) => {
     });
   }, [mapContext.mapIds, mapContext, mapExists, props, onMove]);
 
-  const onDown = (e) => {
+  const onDown = (e:any) => {
     if (e.touches) {
       document.addEventListener("touchmove", onMove);
       document.addEventListener("touchend", onTouchEnd);
@@ -152,7 +184,7 @@ const MlLayerMagnify = (props) => {
     document.removeEventListener("mouseup", onMouseUp);
   };
 
-  const onWheel = (e) => {
+  const onWheel = (e:any) => {
     let evCopy = new WheelEvent(e.type, e);
     mapContext.map.getCanvas().dispatchEvent(evCopy);
   };
@@ -168,7 +200,8 @@ const MlLayerMagnify = (props) => {
         height: magnifierRadius * 2 + 1 + "px",
         background: "rgba(0,0,0,0)",
         border: "2px solid #fafafa",
-        boxShadow: "1px 2px 2px rgba(19, 19, 19, .5), inset 1px 1px 1px rgba(19, 19, 19, .2)",
+        boxShadow:
+          "1px 2px 2px rgba(19, 19, 19, .5), inset 1px 1px 1px rgba(19, 19, 19, .2)",
         cursor: "pointer",
         zIndex: "110",
         marginLeft: magnifierRadius * -1 - 1 + "px",
@@ -190,18 +223,4 @@ MlLayerMagnify.defaultProps = {
   magnifierRadius: 200,
 };
 
-MlLayerMagnify.propTypes = {
-  /**
-   * Id of the first MapLibre instance
-   */
-  map1Id: PropTypes.string,
-  /**
-   * Id of the second MapLibre instance
-   */
-  map2Id: PropTypes.string,
-  /**
-   * Size of the "magnifier"-circle
-   */
-  magnifierRadius: PropTypes.number,
-};
 export default MlLayerMagnify;

package/src/components/MlLayerSwipe/MlLayerSwipe.stories.js

@@ -10,8 +10,6 @@ const storyoptions = {
   name: "MlLayerSwipe",
   component: MlLayerSwipe,
   argTypes: {
-    url: {},
-    layer: {},
   },
   decorators: multiMapContextDecorator,
 };

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";