@mapcomponents/react-maplibre 0.1.49 → 0.1.53

package/dist/components/MlCenterPosition/MlCenterPosition.d.ts

@@ -0,0 +1,50 @@
+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
+ *
+ */
+declare const MlCenterPosition: {
+    (props: MlCenterPositionProps): JSX.Element;
+    defaultProps: {
+        mapId: undefined;
+        style: {
+            minWidth: string;
+            minHeight: string;
+            width: string;
+            height: string;
+            backgroundColor: string;
+            borderRadius: string;
+            margin: number;
+            fontSize: string;
+            ":hover": {
+                backgroundColor: string;
+                color: string;
+            };
+        };
+        onColor: string;
+        offColor: string;
+    };
+};
+export default MlCenterPosition;

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

@@ -0,0 +1,17 @@
+export default storyoptions;
+export const ExampleConfig: any;
+declare namespace storyoptions {
+    export const title: string;
+    export { MlCenterPosition as component };
+    export const argTypes: {};
+    export { mapContextDecorator as decorators };
+    export namespace parameters {
+        namespace docs {
+            namespace source {
+                const type: string;
+            }
+        }
+    }
+}
+import MlCenterPosition from "./MlCenterPosition";
+import mapContextDecorator from "../../decorators/MapContextDecorator";

package/dist/components/MlGeoJsonLayer/MlGeoJsonLayer.d.ts

@@ -1,4 +1,5 @@
 import { Feature, FeatureCollection } from "@turf/turf";
+import { LineLayerSpecification, CircleLayerSpecification, FillLayerSpecification, MapLayerMouseEvent } from "maplibre-gl";
 declare type MlGeoJsonLayerProps = {
     /**
      * Id of the target MapLibre instance in mapContext
@@ -7,6 +8,8 @@ declare 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;
     /**
@@ -21,7 +24,7 @@ declare 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.
@@ -29,7 +32,7 @@ declare 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.
@@ -37,28 +40,32 @@ declare 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;
 };
 /**
  * Adds source and layer of types "line", "fill" or "circle" to display GeoJSON data on the map.

package/dist/components/MlNavigationTools/MlNavigationTools.d.ts

@@ -1,9 +1,45 @@
 interface MlNavigationToolsProps {
+    /**
+     * 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;
+    /**
+     * Show 3D button
+     */
+    show3DButton?: boolean;
+    /**
+     * Show zoom button
+     */
+    showZoomButtons?: boolean;
+    /**
+     * Show follow GPS button
+     */
+    showFollowGpsButton?: boolean;
+    /**
+     * Show center on current position button
+     */
+    showCenterLocationButton?: boolean;
+    /**
+     * Additional JSX Elements to be rendered below MlNavigationTools buttons
+     */
+    children?: JSX.Element;
 }
 /**
-* @component
-*/
-declare const MlNavigationTools: (props: MlNavigationToolsProps) => JSX.Element;
+ * @component
+ */
+declare const MlNavigationTools: {
+    (props: MlNavigationToolsProps): JSX.Element;
+    defaultProps: {
+        mapId: undefined;
+        show3DButton: boolean;
+        showFollowGpsButton: boolean;
+        showCenterLocationButton: boolean;
+        showZoomButtons: boolean;
+    };
+};
 export default MlNavigationTools;

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

@@ -1,5 +1,10 @@
 export default storyoptions;
-export const ExampleConfig: any;
+export const DefaultConfig: any;
+export const No3DButton: any;
+export const ShowCenterLocationButton: any;
+export const NoZoomButtons: any;
+export const NoFollowGpsButton: any;
+export const CustomButton: any;
 declare namespace storyoptions {
     export const title: string;
     export { MlNavigationTools as component };
@@ -7,7 +12,7 @@ declare namespace storyoptions {
         const url: {};
         const layer: {};
     }
-    export { mapContextDecorator as decorators };
+    export { noNavToolsDecorator as decorators };
 }
 import MlNavigationTools from "./MlNavigationTools";
-import mapContextDecorator from "../../decorators/MapContextDecorator";
+import noNavToolsDecorator from "../../decorators/NoNavToolsDecorator";

package/dist/components/MlTransitionGeoJsonLayer/MlTransitionGeoJsonLayer.d.ts

@@ -1,60 +1,65 @@
 import { Feature, FeatureCollection } from "@turf/turf";
+import { CircleLayerSpecification, FillLayerSpecification, LineLayerSpecification, MapLayerMouseEvent } from "maplibre-gl";
 interface MlTransitionGeoJsonLayerProps {
     /**
      * Id of the target MapLibre instance in mapContext
      */
     mapId: 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;
+    type?: "fill" | "line" | "circle";
     /**
-     * Layout property object, that is passed to the addLayer call.
+     * 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
      */
-    layout: any;
+    paint?: CircleLayerSpecification['paint'] | FillLayerSpecification['paint'] | LineLayerSpecification['paint'];
     /**
-     * Paint property object, that is passed to the addLayer call.
+     * 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
      */
-    paint: any;
-    /**
-     * Javascript object with optional properties "fill", "line", "circle" to override implicit layer type default paint properties.
-     */
-    defaultPaintOverrides: 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;
     /**
-     * GeoJSON data that is supposed to be rendered by this component.
+     * Javascript object with optional properties "fill", "line", "circle" to override implicit layer type default paint properties.
      */
-    geojson: Feature | FeatureCollection;
+    defaultPaintOverrides?: {
+        circle?: CircleLayerSpecification['paint'];
+        fill?: FillLayerSpecification['paint'];
+        line?: LineLayerSpecification['paint'];
+    };
     /**
      * 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.
+     * Hover event handler that is executed whenever a geometry rendered by this component is hovered.
      */
-    onClick: Function;
+    onHover?: MapLayerMouseEvent;
     /**
-     * Hover event handler that is executed whenever a geometry rendered by this component is hovered.
+     * Click event handler that is executed whenever a geometry rendered by this component is clicked.
      */
-    onHover: Function;
+    onClick?: MapLayerMouseEvent;
     /**
      * Leave event handler that is executed whenever a geometry rendered by this component is
      * left/unhovered.
      */
-    onLeave: Function;
+    onLeave?: MapLayerMouseEvent;
     /**
      * Creates transition animation whenever the geojson prop changes.
      * Only works with layer type "line" and LineString GeoJSON data.

package/dist/decorators/NoNavToolsDecorator.d.ts

@@ -0,0 +1,2 @@
+export default decorators;
+declare const decorators: ((Story: any) => JSX.Element)[];

package/dist/hooks/useLayer.d.ts

@@ -1,6 +1,8 @@
 import { useMapType } from "./useMap";
 import { LayerSpecification } from "maplibre-gl";
 import MapLibreGlWrapper from "../components/MapLibreMap/lib/MapLibreGlWrapper";
+import { MapLayerMouseEvent } from "maplibre-gl";
+import { GeoJSONObject } from "@turf/turf";
 declare type useLayerType = {
     map: MapLibreGlWrapper | undefined;
     layer: LayerSpecification;
@@ -14,11 +16,11 @@ interface useLayerProps {
     idPrefix?: string;
     insertBeforeLayer?: string;
     insertBeforeFirstSymbolLayer?: boolean;
-    geojson?: object;
-    options: LayerSpecification;
-    onHover?: Function;
-    onClick?: Function;
-    onLeave?: Function;
+    geojson?: GeoJSONObject;
+    options: Partial<LayerSpecification>;
+    onHover?: MapLayerMouseEvent;
+    onClick?: MapLayerMouseEvent;
+    onLeave?: MapLayerMouseEvent;
 }
 declare function useLayer(props: useLayerProps): useLayerType;
 export default useLayer;

package/dist/index.esm.js

@@ -13316,8 +13316,55 @@ function useMediaQuery(queryInput, options = {}) {
 }
 
 /**
-* @component
-*/
+ * Component template
+ *
+ */
+var MlCenterPosition = function (props) {
+    var _a, _b;
+    var mapHook = useMap({
+        mapId: props.mapId,
+        waitForLayer: props.insertBeforeLayer,
+    });
+    var _c = useState(false), locationAccessDenied = _c[0], setLocationAccessDenied = _c[1];
+    var centerCurrentLocation = function () {
+        navigator.geolocation.getCurrentPosition(getLocationSuccess, getLocationError);
+    };
+    var getLocationSuccess = useCallback(function (location) {
+        var _a, _b, _c;
+        (_c = (_a = mapHook.map) === null || _a === void 0 ? void 0 : (_b = _a.map).setCenter) === null || _c === void 0 ? void 0 : _c.call(_b, [location.coords.longitude, location.coords.latitude]);
+    }, [mapHook.map]);
+    var getLocationError = function () {
+        console.log("Access of user location denied");
+        setLocationAccessDenied(true);
+    };
+    return React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(Button$2, { sx: __assign({ zIndex: 1002, color: !locationAccessDenied ? props.onColor : props.offColor }, props.style), onClick: centerCurrentLocation, disabled: locationAccessDenied },
+            React__default.createElement(default_1$4, { sx: __assign({}, (((_a = props.style) === null || _a === void 0 ? void 0 : _a.fontSize) ? { fontSize: (_b = props.style) === null || _b === void 0 ? void 0 : _b.fontSize } : {})) }),
+            " "));
+};
+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",
+};
+
+/**
+ * @component
+ */
 var MlNavigationTools = function (props) {
     var mapHook = useMap({
         mapId: props.mapId,
@@ -13335,12 +13382,15 @@ var MlNavigationTools = function (props) {
         //border: "1px solid #bbb",
         //boxShadow: "0px 0px 4px rgba(0,0,0,.5)",
         margin: 0.15,
-        fontSize: mediaIsMobile ? "1.5em" : "1.2em",
+        fontSize: mediaIsMobile ? "1.4em" : "1.2em",
         ":hover": {
             backgroundColor: "#515151",
         },
         color: "#ececec",
     };
+    var iconStyle = {
+        fontSize: buttonStyle.fontSize,
+    };
     useEffect(function () {
         if (!mapHook.map)
             return;
@@ -13354,16 +13404,14 @@ var MlNavigationTools = function (props) {
     var zoomIn = function () {
         if (!mapHook.map)
             return;
-        if (mapHook.map.map.transform._zoom + 0.5 <=
-            mapHook.map.map.transform._maxZoom) {
+        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 });
         }
     };
     var zoomOut = function () {
         if (!mapHook.map)
             return;
-        if (mapHook.map.map.transform._zoom - 0.5 >=
-            mapHook.map.map.transform._minZoom) {
+        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 });
         }
     };
@@ -13393,21 +13441,36 @@ var MlNavigationTools = function (props) {
             }, backgroundStyle: {
                 boxShadow: "0px 0px 18px rgba(0,0,0,.5)",
             } }),
-        React__default.createElement(Button$1, { sx: __assign(__assign({}, buttonStyle), { fontSize: mediaIsMobile ? '1.4em' : '1em', fontWeight: 600 }), onClick: adjustPitch }, pitch ? "2D" : "3D"),
-        React__default.createElement(MlFollowGps, { style: __assign({}, (function (_a) {
+        props.show3DButton && (React__default.createElement(Button$1, { sx: __assign(__assign({}, buttonStyle), { fontSize: mediaIsMobile ? "1.4em" : "1em", fontWeight: 600 }), onClick: adjustPitch }, pitch ? "2D" : "3D")),
+        props.showFollowGpsButton && (React__default.createElement(MlFollowGps, { style: __assign({}, (function (_a) {
                 _a.color; var rest = __rest(_a, ["color"]);
                 return rest;
-            })(buttonStyle)) }),
+            })(buttonStyle)) })),
+        props.showCenterLocationButton && (React__default.createElement(MlCenterPosition, { style: __assign({}, (function (_a) {
+                _a.color; var rest = __rest(_a, ["color"]);
+                return rest;
+            })(buttonStyle)) })),
         React__default.createElement(ButtonGroup$1, { orientation: "vertical", sx: {
                 width: "50px",
                 border: "none",
                 Button: { minWidth: "20px !important", border: "none", padding: 0 },
                 "Button:hover": { border: "none" },
-            } },
-            React__default.createElement(Button$1, { sx: __assign(__assign({}, buttonStyle), { color: "#ececec" }), onClick: zoomIn },
-                React__default.createElement(default_1$3, { sx: { fontSize: mediaIsMobile ? "1.5em" : "1.2em" } })),
-            React__default.createElement(Button$1, { sx: __assign(__assign({}, buttonStyle), { color: "#ececec" }), onClick: zoomOut },
-                React__default.createElement(default_1$2, { sx: { fontSize: mediaIsMobile ? "1.5em" : "1.2em" } })))));
+            } }, props.showZoomButtons && (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(Button$1, { sx: __assign({}, buttonStyle), onClick: zoomIn },
+                React__default.createElement(default_1$3, { sx: __assign({}, iconStyle) })),
+            React__default.createElement(Button$1, { sx: __assign({}, buttonStyle), onClick: zoomOut },
+                React__default.createElement(default_1$2, { sx: __assign({}, iconStyle) }))))),
+        props.children &&
+            React__default.cloneElement(props.children, {
+                sx: __assign({}, buttonStyle),
+            })));
+};
+MlNavigationTools.defaultProps = {
+    mapId: undefined,
+    show3DButton: true,
+    showFollowGpsButton: true,
+    showCenterLocationButton: false,
+    showZoomButtons: true,
 };
 
 /**