@mapcomponents/react-maplibre 0.1.48 → 0.1.52

package/dist/setupTests.d.ts

@@ -0,0 +1,12 @@
+export var uuid_regex: string;
+export namespace mockMapLibreMethods {
+    const on: any;
+    const off: any;
+    const addControl: any;
+    const removeControl: any;
+    const hasControl: any;
+    function getCanvas(): HTMLCanvasElement;
+    function getContainer(): {
+        style: {};
+    };
+}

package/dist/stories/components/Readme.d.ts

@@ -0,0 +1,2 @@
+export default Readme;
+declare function Readme(): JSX.Element;

package/dist/ui_components/ImageLoader.d.ts

@@ -0,0 +1,2 @@
+export default ImageLoader;
+declare function ImageLoader(props: any): JSX.Element;

package/dist/ui_components/Legend.d.ts

@@ -0,0 +1 @@
+export default function Legend(props: any): JSX.Element;

package/dist/ui_components/LoadingOverlay.d.ts

@@ -0,0 +1,2 @@
+export default LoadingOverlay;
+declare function LoadingOverlay(): JSX.Element;

package/dist/ui_components/LoadingOverlayContext.d.ts

@@ -0,0 +1,11 @@
+export const LoadingOverlayContext: React.Context<{}>;
+export function LoadingOverlayProvider({ children }: {
+    children: any;
+}): JSX.Element;
+export namespace LoadingOverlayProvider {
+    namespace propTypes {
+        const children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+    }
+}
+import React from "react";
+import PropTypes from "prop-types";

package/dist/ui_components/Sidebar.d.ts

@@ -0,0 +1 @@
+export default function Sidebar(props: any): JSX.Element;

package/dist/ui_components/Tooltip.d.ts

@@ -0,0 +1 @@
+export default function Legend(props: any): JSX.Element;

package/dist/ui_components/TopToolbar.d.ts

@@ -0,0 +1 @@
+export default function TopToolbar(props: any): JSX.Element;

package/dist/util/index.d.ts

@@ -0,0 +1,3 @@
+import layerRemovalTest from "./layerRemovalTest";
+import sourceRemovalTest from "./sourceRemovalTest";
+export { layerRemovalTest, sourceRemovalTest };

package/dist/util/layerRemovalTest.d.ts

@@ -0,0 +1,2 @@
+export default layerRemovalTest;
+declare function layerRemovalTest(ComponentName: any, Component: any, regexLayerNameTest: any, humanReadableLayerName: any, beforeWrapperInit: any, afterWrapperInit: any, createWrapperFunction: any): void;

package/dist/util/sourceRemovalTest.d.ts

@@ -0,0 +1,2 @@
+export default sourceRemovalTest;
+declare function sourceRemovalTest(ComponentName: any, Component: any, regexLayerNameTest: any, humanReadableLayerName: any, beforeWrapperInit: any, afterWrapperInit: any): void;

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@mapcomponents/react-maplibre",
-  "version": "0.1.48",
+  "version": "0.1.52",
   "main": "index.js",
   "license": "MIT",
   "module": "dist/index.esm.js",
   "source": "src/index.ts",
+  "types": "dist/index.d.ts",
   "scripts": {
     "build": "rollup -c",
     "start": "start-storybook -p 6006 -s public",

package/scripts/create-map-component.sh

@@ -18,14 +18,14 @@ if [ ! -d "$target_path$component_name" ]; then
 
   mv $target_path$component_name/$template_name.doc.de.md $target_path$component_name/$component_name.doc.de.md
 
-  mv $target_path$component_name/$template_name.js $target_path$component_name/$component_name.js
+  mv $target_path$component_name/$template_name.tsx $target_path$component_name/$component_name.tsx
 
   mv $target_path$component_name/$template_name.meta_.json $target_path$component_name/$component_name.meta_.json
 
   mv $target_path$component_name/$template_name.stories.js $target_path$component_name/$component_name.stories.js
 
   sed -i "s/$template_name/$component_name/g" $target_path$component_name/$component_name.doc.de.md
-  sed -i "s/$template_name/$component_name/g" $target_path$component_name/$component_name.js
+  sed -i "s/$template_name/$component_name/g" $target_path$component_name/$component_name.tsx
   sed -i "s/$template_name/$component_name/g" $target_path$component_name/$component_name.meta_.json
   sed -i "s/$template_name/$component_name/g" $target_path$component_name/$component_name.stories.js
 

package/src/components/MapLibreMap/MapLibreMap.tsx

@@ -16,7 +16,7 @@ type MapLibreMapProps = {
    * See https://maplibre.org/maplibre-gl-js-docs/api/map/ for a formal documentation of al
    * available properties.
    */
-  options?: MapOptionsType;
+  options?: Partial<MapOptionsType>;
   /**
    * css style definition passed to the map container DOM element
    */

package/src/components/MapLibreMap/lib/MapLibreGlWrapper.ts

@@ -1,4 +1,5 @@
-import { Map, IControl, MapOptions as MapOptionsType } from "!maplibre-gl";
+import { Map, IControl, MapOptions as MapOptionsType,  } from "!maplibre-gl";
+import { Map as MapType  } from "maplibre-gl";
 
 type EventArgArray = [string, string | Function, Function?];
 type LayerState = {
@@ -53,7 +54,7 @@ class MapLibreGlWrapper {
   };
   initRegisteredElements: Function;
   addNativeMaplibreFunctionsAndProps: Function;
-  map: Map;
+  map: MapType;
   style: object;
 
   styleJson: object;
@@ -603,7 +604,7 @@ class MapLibreGlWrapper {
           });
       }
 
-      self.map = new Map(props.mapOptions);
+      self.map = new Map(props.mapOptions) as MapType;
       //@ts-ignore
       window._map = self.map;
 

package/src/components/MlCenterPosition/MlCenterPosition.doc.de.md

@@ -0,0 +1,3 @@
+# Component Beschreibung
+
+Beschreibungstext

package/src/components/MlCenterPosition/MlCenterPosition.meta_.json

@@ -0,0 +1,15 @@
+{
+  "name": "MlCenterPosition",
+  "title": "",
+  "description": "",
+  "i18n": {
+    "de": {
+      "title": "",
+      "description": ""
+    }
+  },
+  "tags": [],
+  "category": "",
+  "type": "component",
+  "price": 0
+}

package/src/components/MlCenterPosition/MlCenterPosition.stories.js

@@ -0,0 +1,21 @@
+import React from "react";
+
+import MlCenterPosition from "./MlCenterPosition";
+
+import mapContextDecorator from "../../decorators/MapContextDecorator";
+
+const storyoptions = {
+  title: "MapComponents/MlCenterPosition",
+  component: MlCenterPosition,
+  argTypes: {
+  },
+  decorators: mapContextDecorator,
+  parameters: { docs: { source: { type: 'code' } } }
+};
+export default storyoptions;
+
+const Template = (args) => <MlCenterPosition />;
+
+export const ExampleConfig = Template.bind({});
+ExampleConfig.parameters = {};
+ExampleConfig.args = {};

package/src/components/MlCenterPosition/MlCenterPosition.tsx

@@ -0,0 +1,86 @@
+import React, { useState, useCallback } from "react";
+import useMap from "../../hooks/useMap";
+import { Button } from "@mui/material";
+import  GpsFixedIcon  from "@mui/icons-material/GpsFixed";
+
+interface MlCenterPositionProps {
+  /**
+   * 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;
+  /**
+   * Active button font color
+   */
+  onColor?: string;
+  /**
+   * Inactive button font color
+   */
+  offColor?: string;
+  /**
+   * CSS style object that is applied to the button component
+   */
+  style?: any;
+}
+
+/**
+ * Component template
+ *
+ */
+const MlCenterPosition = (props: MlCenterPositionProps) => {
+  const mapHook = useMap({
+    mapId: props.mapId,
+    waitForLayer: props.insertBeforeLayer,
+  });
+  const [locationAccessDenied, setLocationAccessDenied] = useState(false);
+
+  const centerCurrentLocation = () => {
+    navigator.geolocation.getCurrentPosition(getLocationSuccess, getLocationError);
+  };
+
+  const getLocationSuccess = useCallback((location) => {
+    mapHook.map?.map.setCenter?.([location.coords.longitude, location.coords.latitude]);
+  }, [mapHook.map]);
+
+  const getLocationError = () => {
+    console.log("Access of user location denied");
+    setLocationAccessDenied(true);
+  };
+  return <>
+      <Button 
+        sx={{
+          zIndex: 1002,
+          color: !locationAccessDenied ? props.onColor : props.offColor,
+          ...props.style,
+        }}
+       onClick={centerCurrentLocation} disabled={locationAccessDenied}>
+        <GpsFixedIcon sx={{ ...(props.style?.fontSize?{fontSize: props.style?.fontSize}:{}) }} />{" "}
+      </Button>
+  </>;
+
+};
+
+MlCenterPosition.defaultProps = {
+  mapId: undefined,
+  style: {
+    minWidth: "30px",
+    minHeight: "30px",
+    width: "30px",
+    height: "30px",
+    backgroundColor: "#414141",
+    borderRadius: "23%",
+    margin: 0.15,
+    fontSize: "1.3em",
+    ":hover": {
+      backgroundColor: "#515151",
+      color: "#ececec",
+    },
+  },
+  onColor: "#ececec",
+  offColor: "#666",
+};
+export default MlCenterPosition;

package/src/components/MlFeatureEditor/MlFeatureEditor.stories.js

@@ -15,11 +15,10 @@ export default storyoptions;
 const Template = (args) => {
   return (
     <MlFeatureEditor
-      debug={true}
+      {...args}
       onChange={(features) => {
         console.log(features);
       }}
-      {...args}
     />
   );
 };

package/src/components/MlFeatureEditor/MlFeatureEditor.test.js

@@ -82,7 +82,7 @@ describe("<MlFeatureEditor>", () => {
     );
 
     // MapLibreGlWrapper now subscribes to "data", "move" events on its own
-    await waitFor(() => expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(6));
+    await waitFor(() => expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(7));
   });
 
   it("should deregister 2 event listeners to the maplibre instance", async () => {
@@ -93,11 +93,11 @@ describe("<MlFeatureEditor>", () => {
     );
 
     // MapLibreGlWrapper now subscribes to "data", "move" events on its own
-    expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(6);
+    expect(mockMapLibreMethods.on).toHaveBeenCalledTimes(7);
 
     wrapper.find(".toggle_layer_visible").simulate("click");
 
-    expect(mockMapLibreMethods.off).toHaveBeenCalledTimes(2);
+    expect(mockMapLibreMethods.off).toHaveBeenCalledTimes(3);
   });
 
   it("should add MapBox-Gl-draw instance using map.addControl to the maplibre instance", async () => {

package/src/components/MlFeatureEditor/MlFeatureEditor.tsx

@@ -9,7 +9,6 @@ import CustomDirectSelectMode from "./custom-direct-select-mode.js";
 
 import useMap from "../../hooks/useMap";
 
-
 interface MlFeatureEditorProps {
   /**
    * Id of the target MapLibre instance in mapContext
@@ -28,7 +27,7 @@ interface MlFeatureEditorProps {
    * Callback function that is called each time the GeoJson data within has changed within MlFeatureEditor.
    * First parameter is the new GeoJson feature.
    */
-  onChange?: Function
+  onChange?: Function;
   /**
    * Feature editor mode:
    * - "custom_select" edit features
@@ -36,40 +35,30 @@ interface MlFeatureEditorProps {
    * - "draw_point" draw Point
    * - "draw_line_string" draw LineString
    */
-  mode?:string
+  mode?: string;
 }
 
 /**
  * GeoJson Feature editor that allows to create or manipulate GeoJson data
  */
-const MlFeatureEditor = (props:MlFeatureEditorProps) => {
+const MlFeatureEditor = (props: MlFeatureEditorProps) => {
   const draw = useRef<MapboxDraw>();
   const mapHook = useMap({
     mapId: props.mapId,
     waitForLayer: props.insertBeforeLayer,
   });
-  const onChangeRef = useRef(props.onChange);
 
   const drawToolsInitialized = useRef(false);
   const [drawToolsReady, setDrawToolsReady] = useState(false);
 
-  const [mouseUpTrigger, setMouseUpTrigger] = useState(0);
 
-  const modeChangeHandler = (e:any) => {
+  const modeChangeHandler = (e: any) => {
     console.log("MlFeatureEditor mode change to " + e.mode);
     //setDrawMode(e.mode);
   };
 
-  const mouseUpHandler = () => {
-    setMouseUpTrigger(Math.random());
-  };
-
   useEffect(() => {
-    if (
-      mapHook.map &&
-      !drawToolsInitialized.current
-    ) {
-      
+    if (mapHook.map && !drawToolsInitialized.current) {
       drawToolsInitialized.current = true;
 
       if (
@@ -96,34 +85,47 @@ const MlFeatureEditor = (props:MlFeatureEditorProps) => {
         ),
       });
 
-      mapHook.map.on("draw.modechange", modeChangeHandler, mapHook.componentId);
-
       mapHook.map.addControl(draw.current, "top-left", mapHook.componentId);
 
-      mapHook.map.on("mouseup", mouseUpHandler, mapHook.componentId);
+
+      mapHook.map.on("draw.modechange", modeChangeHandler, mapHook.componentId);
 
       setDrawToolsReady(true);
     }
-  }, [mapHook.map,  props, drawToolsInitialized]);
+  }, [mapHook.map, props, drawToolsInitialized]);
 
   useEffect(() => {
-    if (
-      draw.current &&
-      props.geojson?.geometry
-    ) {
-      draw.current.set({ type: "FeatureCollection", features: [props.geojson] });
+    if (!mapHook.map || !drawToolsReady) return;
+
+    const changeHandler = () => {
+      if (draw.current) {
+        // update drawnFeatures state object
+        if (typeof props.onChange === "function") {
+          let currentFeatureCollection = draw.current.getAll?.();
+          props.onChange(currentFeatureCollection?.features);
+        }
+      }
+    };
+
+    mapHook.map.on("mouseup", changeHandler);
+
+    mapHook.map.on("touchend", changeHandler);
+
+    return () => {
+      if (!mapHook.map) return;
+
+      mapHook.map.map.off("mouseup", changeHandler);
+
+      mapHook.map.map.off("touchend", changeHandler);
     }
-  }, [props.geojson, drawToolsReady]);
+
+  }, [drawToolsReady, mapHook.map])
 
   useEffect(() => {
-    if (draw.current && mouseUpTrigger) {
-      // update drawnFeatures state object
-      let currentFeatureCollection = draw.current.getAll();
-      if (typeof onChangeRef.current === "function") {
-        onChangeRef.current(currentFeatureCollection.features);
-      }
+    if (draw.current && props.geojson?.geometry) {
+      draw.current.set({ type: "FeatureCollection", features: [props.geojson] });
     }
-  }, [mouseUpTrigger]);
+  }, [props.geojson, drawToolsReady]);
 
   useEffect(() => {
     if (props.mode && draw.current) {
@@ -132,7 +134,7 @@ const MlFeatureEditor = (props:MlFeatureEditorProps) => {
     }
   }, [props.mode]);
 
-  return (<></>);
-}
+  return <></>;
+};
 
 export default MlFeatureEditor;

package/src/components/MlFeatureEditor/lib/utils.js

@@ -39,8 +39,7 @@ const drawUtils = {
   getDrawInstance: (map) => {
     for (var i = map._controls.length - 1; i >= 0; i--) {
       if (
-        map._controls[i].options &&
-        map._controls[i].options.defaultMode === "custom_select"
+        map._controls[i]?.modes?.SIMPLE_SELECT === "simple_select"
       ) {
         return map._controls[i];
       }

package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.tsx

@@ -8,6 +8,9 @@ import getDefaultPaintPropsByType from "./util/getDefaultPaintPropsByType";
 import getDefaulLayerTypeByGeometry from "./util/getDefaultLayerTypeByGeometry";
 import { Feature, FeatureCollection } from "@turf/turf";
 
+
+import { LineLayerSpecification, CircleLayerSpecification, FillLayerSpecification,MapLayerMouseEvent, LayerSpecification } from "maplibre-gl";
+
 type MlGeoJsonLayerProps = {
   /**
    * Id of the target MapLibre instance in mapContext
@@ -16,6 +19,8 @@ type MlGeoJsonLayerProps = {
   /**
    * 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.
+   * This layer will not be added to the maplibre-gl instance until a layer with an 
+   * id that matches the value of insertBeforeLayer is created.
    */
   insertBeforeLayer?: string;
   /**
@@ -30,7 +35,7 @@ type MlGeoJsonLayerProps = {
    * Type of the layer that will be added to the MapLibre instance.
    * Possible values: "line", "circle", "fill"
    */
-  type?: string;
+  type?: "fill" | "line" | "circle";
   /**
    * Paint property object, that is passed to the addLayer call.
    * Possible props depend on the layer type.
@@ -38,7 +43,7 @@ type MlGeoJsonLayerProps = {
    * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
    * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
    */
-  paint?: any;
+  paint?: CircleLayerSpecification['paint'] | FillLayerSpecification['paint'] | LineLayerSpecification['paint'];
   /**
    * Layout property object, that is passed to the addLayer call.
    * Possible props depend on the layer type.
@@ -46,28 +51,28 @@ type MlGeoJsonLayerProps = {
    * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
    * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
    */
-  layout?: any;
+  layout?: CircleLayerSpecification['layout'] | FillLayerSpecification['layout'] | LineLayerSpecification['layout'];
   /**
    * Javascript object that is spread into the addLayer commands first parameter.
    */
-  options?: any;
+  options?: CircleLayerSpecification | FillLayerSpecification | LineLayerSpecification;
   /**
    * Javascript object with optional properties "fill", "line", "circle" to override implicit layer type default paint properties.
    */
-  defaultPaintOverrides?: any;
+  defaultPaintOverrides?: { circle?: CircleLayerSpecification['paint'], fill?: FillLayerSpecification['paint'], line?: LineLayerSpecification['paint'] };
   /**
    * Hover event handler that is executed whenever a geometry rendered by this component is hovered.
    */
-  onHover?: Function;
+  onHover?: MapLayerMouseEvent;
   /**
    * Click event handler that is executed whenever a geometry rendered by this component is clicked.
    */
-  onClick?: Function;
+  onClick?: MapLayerMouseEvent;
   /**
    * Leave event handler that is executed whenever a geometry rendered by this component is
    * left/unhovered.
    */
-  onLeave?: Function;
+  onLeave?: MapLayerMouseEvent;
 }
 
 /**
@@ -91,7 +96,7 @@ const MlGeoJsonLayer = (props: MlGeoJsonLayerProps) => {
         ),
       layout: props.layout || {},
       ...props.options,
-      type: layerType,
+      type: layerType as LayerSpecification['type'],
     },
     insertBeforeLayer: props.insertBeforeLayer,
     onHover: props.onHover,

package/src/components/MlGeoJsonLayer/util/getDefaultLayerTypeByGeometry.ts

@@ -1,4 +1,5 @@
 import { Feature, FeatureCollection } from "@turf/turf";
+import { LayerSpecification } from "maplibre-gl";
 
 const mapGeometryTypesToLayerTypes = {
   Position: "circle",
@@ -13,7 +14,7 @@ const mapGeometryTypesToLayerTypes = {
 
 const getDefaulLayerTypeByGeometry: Function = (
   geojson: Feature | FeatureCollection
-): string => {
+): LayerSpecification['type'] => {
   if (geojson?.type === "Feature") {
     return mapGeometryTypesToLayerTypes?.[geojson?.geometry?.type]
       ? mapGeometryTypesToLayerTypes[geojson.geometry.type]

package/src/components/MlNavigationTools/MlNavigationTools.stories.js

@@ -15,8 +15,9 @@ const storyoptions = {
 };
 export default storyoptions;
 
-const Template = (args) => <MlNavigationTools />;
+const Template = (args) => <MlNavigationTools {...args} />;
 
 export const ExampleConfig = Template.bind({});
 ExampleConfig.parameters = {};
-ExampleConfig.args = {};
+ExampleConfig.args = {
+};