@mapcomponents/react-maplibre 0.1.48 → 0.1.52

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

@@ -0,0 +1,13 @@
+export default storyoptions;
+export const ExampleConfig: any;
+declare namespace storyoptions {
+    export const title: string;
+    export { MlWmsFeatureInfoPopup as component };
+    export namespace argTypes {
+        const url: {};
+        const layer: {};
+    }
+    export { mapContextDecorator as decorators };
+}
+import MlWmsFeatureInfoPopup from "./MlWmsFeatureInfoPopup";
+import mapContextDecorator from "../../decorators/MapContextDecorator";

package/dist/components/MlWmsLayer/MlWmsLayer.d.ts

@@ -0,0 +1,100 @@
+import PropTypes from "prop-types";
+interface MlWmsLayerProps {
+    urlParameters?: any;
+    url: string;
+    visible?: boolean;
+    attribution?: string;
+    mapId?: string;
+    sourceOptions?: any;
+    layerOptions?: any;
+    insertBeforeLayer?: string;
+    layerId?: string;
+}
+/**
+ * Adds a WMS raster source & layer to the maplibre-gl instance
+ *
+ * @param {object} props
+ * @param {object} props.urlParameters URL query parameters that will be added to the WMS URL. A layers property (string) is mandatory. Any value defined on this attribute will extend the default object
+ * @param {string} props.url WMS URL
+ * @param {bool}   props.visible Sets layer "visibility" property to "visible" if true or "none" if false
+ * @param {string} props.attribution MapLibre attribution shown in the bottom right of the map, if this layer is visible
+ * @param {string} props.mapId Id of the target MapLibre instance in mapContext
+ * @param {object} props.sourceOptions Object that is passed to the MapLibre.addSource call as config option parameter
+ * @param {object} props.layerOptions Object that is passed to the MapLibre.addLayer call as config option parameter
+ * @param {string} props.insertBeforeLayer 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
+ *
+ * @component
+ */
+declare const MlWmsLayer: {
+    (props: MlWmsLayerProps): JSX.Element;
+    defaultProps: {
+        visible: boolean;
+        urlParameters: {
+            bbox: string;
+            format: string;
+            service: string;
+            version: string;
+            request: string;
+            srs: string;
+            width: number;
+            height: number;
+            styles: string;
+        };
+        attribution: string;
+        sourceOptions: {
+            minZoom: number;
+            maxZoom: number;
+        };
+        layerOptions: {
+            minZoom: number;
+            maxZoom: number;
+        };
+    };
+    propTypes: {
+        /**
+         * WMS URL
+         */
+        url: PropTypes.Validator<string>;
+        /**
+         * URL query parameters that will be added to the WMS URL. A layers property (string) is mandatory. Any value defined on this attribute will extend the default object.
+         */
+        urlParameters: PropTypes.Requireable<PropTypes.InferProps<{
+            layers: PropTypes.Validator<string>;
+            bbox: PropTypes.Requireable<string>;
+            format: PropTypes.Requireable<string>;
+            service: PropTypes.Requireable<string>;
+            version: PropTypes.Requireable<string>;
+            request: PropTypes.Requireable<string>;
+            srs: PropTypes.Requireable<string>;
+            width: PropTypes.Requireable<number>;
+            height: PropTypes.Requireable<number>;
+        }>>;
+        /**
+         * Id of the target MapLibre instance in mapContext
+         */
+        mapId: PropTypes.Requireable<string>;
+        /**
+         * MapLibre attribution shown in the bottom right of the map, if this layer is visible
+         */
+        attribution: PropTypes.Requireable<string>;
+        /**
+         * Object that is passed to the MapLibre.addLayer call as config option parameter
+         */
+        layerOptions: PropTypes.Requireable<object>;
+        /**
+         * Object that is passed to the MapLibre.addSource call as config option parameter
+         */
+        sourceOptions: PropTypes.Requireable<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.Requireable<string>;
+        /**
+         * Sets layer "visibility" property to "visible" if true or "none" if false
+         */
+        visible: PropTypes.Requireable<boolean>;
+    };
+};
+export default MlWmsLayer;

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

@@ -0,0 +1,13 @@
+export default storyoptions;
+export const ExampleConfig: any;
+declare namespace storyoptions {
+    export const title: string;
+    export { MlWmsLayer as component };
+    export namespace argTypes {
+        const url: {};
+        const layer: {};
+    }
+    export { mapContextDecorator as decorators };
+}
+import MlWmsLayer from "./MlWmsLayer";
+import mapContextDecorator from "../../decorators/MapContextDecorator";

package/dist/components/MlWmsLayer/MlWmsLayer.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/MlWmsLoader/MlWmsLoader.d.ts

@@ -0,0 +1,48 @@
+import { LngLat } from "maplibre-gl";
+interface MlWmsLoaderProps {
+    /**
+     * WMS URL
+     */
+    url: string;
+    /**
+     * Id of the target MapLibre instance in mapContext
+     */
+    mapId: string;
+    /**
+     * URL parameters that will be used in the getCapabilities request
+     */
+    urlParameters: object;
+    /**
+     * URL parameters that will be added when requesting WMS capabilities
+     */
+    wmsUrlParameters: object;
+    /**
+     * URL parameters that will be added when requesting tiles
+     */
+    layerUrlParameters: object;
+    lngLat: LngLat;
+    idPrefix: string;
+}
+/**
+ * Loads a WMS getCapabilities xml document and adds a MlWmsLayer component for each layer that is
+ * offered by the WMS.
+ *
+ * TODO: EaseTo the extend offered by the WMS in a zoom level that is supported
+ *
+ * @component
+ */
+declare const MlWmsLoader: {
+    (props: MlWmsLoaderProps): JSX.Element;
+    defaultProps: {
+        url: string;
+        urlParameters: {
+            SERVICE: string;
+            VERSION: string;
+            REQUEST: string;
+        };
+        wmsUrlParameters: {
+            TRANSPARENT: string;
+        };
+    };
+};
+export default MlWmsLoader;

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

@@ -0,0 +1,13 @@
+export default storyoptions;
+export const ExampleConfig: any;
+declare namespace storyoptions {
+    export const title: string;
+    export { MlWmsLoader as component };
+    export namespace argTypes {
+        const url: {};
+        const layer: {};
+    }
+    export { mapContextDecorator as decorators };
+}
+import MlWmsLoader from "./MlWmsLoader";
+import mapContextDecorator from "../../decorators/MapContextDecorator";

package/dist/contexts/MapComponentsProvider.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/contexts/MapContext.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+declare const MapContext: React.Context<MapContextType>;
+/**
+ * MapComponentsProvider must be imported and wrapped around component where at least one of its child nodes requires access to a MapLibre-gl or openlayers instance that is registered in this mapContext.
+MapComponentsProvider must be used one level higher than the first use of MapContext.
+ *
+ * MapComponentsProvider requires at least one use of the MapLibreMap component somewhere down the component tree that will create the MapLibre-gl object and set the reference at MapContext.map. For MapLibre maps it is a good idea to provide a mapId attribute to the MapLibreMap Component even if you are only using a single map instance at start. It will make a later transition to using multiple instances within the same project much easier.
+ */
+declare const MapComponentsProvider: ({ children }: {
+    children: any;
+}) => JSX.Element;
+export { MapComponentsProvider };
+export default MapContext;

package/dist/contexts/SimpleDataContext.d.ts

@@ -0,0 +1,4 @@
+export const SimpleDataContextProvider: React.Provider<{}>;
+export default SimpleDataContext;
+import React from "react";
+declare const SimpleDataContext: React.Context<{}>;

package/dist/contexts/SimpleDataProvider.d.ts

@@ -0,0 +1,8 @@
+export default SimpleDataProvider;
+declare function SimpleDataProvider(props: any): JSX.Element;
+declare namespace SimpleDataProvider {
+    namespace propTypes {
+        const children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+    }
+}
+import PropTypes from "prop-types";

package/dist/contexts/SimpleDataProvider.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/custom.d.d.ts

@@ -0,0 +1,22 @@
+declare module "*.svg" {
+    const content: any;
+    export default content;
+    export { content as ReactComponent };
+}
+declare module "*.js" {
+    const content: any;
+    export default content;
+}
+declare type MapContextType = {
+    mapIds: [string?];
+    mapExists: Function;
+    maps: [];
+    map: any;
+    getMap: Function;
+    setMap: Function;
+};
+interface GeoJSON {
+    type: string;
+    features?: any;
+    geometry?: any;
+}

package/dist/decorators/MapContextDecorator.d.ts

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

package/dist/decorators/MultiMapContextDecorator.d.ts

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

package/dist/hooks/useLayer.d.ts

@@ -0,0 +1,26 @@
+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;
+    layerId: string;
+    componentId: string;
+    mapHook: useMapType;
+};
+interface useLayerProps {
+    mapId?: string;
+    layerId?: string;
+    idPrefix?: string;
+    insertBeforeLayer?: string;
+    insertBeforeFirstSymbolLayer?: boolean;
+    geojson?: GeoJSONObject;
+    options: Partial<LayerSpecification>;
+    onHover?: MapLayerMouseEvent;
+    onClick?: MapLayerMouseEvent;
+    onLeave?: MapLayerMouseEvent;
+}
+declare function useLayer(props: useLayerProps): useLayerType;
+export default useLayer;

package/dist/hooks/useLayer.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/hooks/useMap.d.ts

@@ -0,0 +1,14 @@
+import MapLibreGlWrapper, { LayerState } from "../components/MapLibreMap/lib/MapLibreGlWrapper";
+declare type useMapType = {
+    map: MapLibreGlWrapper | undefined;
+    mapIsReady: boolean;
+    componentId: string;
+    layers: (LayerState | undefined)[];
+    cleanup: Function;
+};
+declare function useMap(props: {
+    mapId?: string;
+    waitForLayer?: string;
+}): useMapType;
+export default useMap;
+export type { useMapType };

package/dist/hooks/useMapState.d.ts

@@ -0,0 +1,62 @@
+import PropTypes from "prop-types";
+import { LayerState, ViewportState } from "../components/MapLibreMap/lib/MapLibreGlWrapper";
+declare type useMapStateType = {
+    layers: (LayerState | undefined)[];
+    viewport: ViewportState | undefined;
+};
+/**
+ * React hook that allows subscribing to map state changes
+ *
+ * @component
+ */
+declare function useMapState(props: {
+    mapId?: string;
+    watch?: {
+        layers?: boolean;
+        sources?: boolean;
+        viewport?: boolean;
+    };
+    filter?: {
+        includeBaseLayers?: boolean;
+        matchLayerIds?: RegExp | string;
+        matchSourceIds?: RegExp | string;
+    };
+}): useMapStateType;
+declare namespace useMapState {
+    var defaultProps: {
+        mapId: undefined;
+        watch: {
+            layers: boolean;
+            sources: boolean;
+            viewport: boolean;
+        };
+        filter: {
+            includeBaseLayers: boolean;
+        };
+    };
+    var propTypes: {
+        /**
+         * Id of the target MapLibre instance in mapContext
+         */
+        mapId: PropTypes.Requireable<string>;
+        /**
+         * Defines map Resources to watch
+         */
+        watch: PropTypes.Requireable<PropTypes.InferProps<{
+            layers: PropTypes.Requireable<boolean>;
+            sources: PropTypes.Requireable<boolean>;
+            viewport: PropTypes.Requireable<boolean>;
+        }>>;
+        /**
+         * Filter string or RegExp to more explicitly define the elements watched and increase performance
+         * strings will be matched using layerId.includes(matchString)
+         * RegExps will be matched using matchRegExp.test(layerId)
+         */
+        filter: PropTypes.Requireable<PropTypes.InferProps<{
+            includeBaseLayers: PropTypes.Requireable<boolean>;
+            matchLayerIds: PropTypes.Requireable<string | RegExp>;
+            matchSourceIds: PropTypes.Requireable<string | RegExp>;
+        }>>;
+    };
+}
+export default useMapState;

package/dist/hooks/useMapState.stories.d.ts

@@ -0,0 +1,14 @@
+export default storyoptions;
+export const ViewportOnly: any;
+export const IncludeBaseLayers: any;
+export const MatchLayerIdString: any;
+export const MatchLayerIdRegexp: any;
+export const NonBaseLayersOnly: any;
+declare namespace storyoptions {
+    export const title: string;
+    export { useMapState as component };
+    export const argTypes: {};
+    export { mapContextDecorator as decorators };
+}
+import useMapState from "./useMapState";
+import mapContextDecorator from "../decorators/MapContextDecorator";

package/dist/hooks/useWms.d.ts

@@ -0,0 +1,18 @@
+export default useWms;
+declare function useWms(props: any): {
+    capabilities: undefined;
+    getFeatureInfoUrl: undefined;
+    wmsUrl: string;
+    error: undefined;
+    setUrl: import("react").Dispatch<any>;
+};
+declare namespace useWms {
+    namespace defaultProps {
+        const url: string;
+        namespace urlParameters {
+            const SERVICE: string;
+            const VERSION: string;
+            const REQUEST: string;
+        }
+    }
+}

package/dist/index.d.ts

@@ -0,0 +1,32 @@
+export { default as MapLibreMap } from "./components/MapLibreMap/MapLibreMap";
+export { default as MlComponentTemplate } from "./components/MlComponentTemplate/MlComponentTemplate";
+export { default as MlCreatePdfButton } from "./components/MlCreatePdfButton/MlCreatePdfButton";
+export { default as MlFeatureEditor } from "./components/MlFeatureEditor/MlFeatureEditor";
+export { default as MlFillExtrusionLayer } from "./components/MlFillExtrusionLayer/MlFillExtrusionLayer";
+export { default as MlFollowGps } from "./components/MlFollowGps/MlFollowGps";
+export { default as MlGeoJsonLayer } from "./components/MlGeoJsonLayer/MlGeoJsonLayer";
+export { default as MlImageMarkerLayer } from "./components/MlImageMarkerLayer/MlImageMarkerLayer";
+export { default as MlMeasureTool } from "./components/MlMeasureTool/MlMeasureTool";
+export { default as MlNavigationTools } from "./components/MlNavigationTools/MlNavigationTools";
+export { default as MlNavigationCompass } from "./components/MlNavigationCompass/MlNavigationCompass";
+export { default as MlLayer } from "./components/MlLayer/MlLayer";
+export { default as MlVectorTileLayer } from "./components/MlVectorTileLayer/MlVectorTileLayer";
+export { default as MlWmsLayer } from "./components/MlWmsLayer/MlWmsLayer";
+export { default as MlLayerMagnify } from "./components/MlLayerMagnify/MlLayerMagnify";
+export { default as MlLayerSwipe } from "./components/MlLayerSwipe/MlLayerSwipe";
+export { default as MlTransitionGeoJsonLayer } from "./components/MlTransitionGeoJsonLayer/MlTransitionGeoJsonLayer";
+export { default as MlMarker } from "./components/MlMarker/MlMarker";
+export { default as MlGPXViewer } from "./components/MlGPXViewer/MlGPXViewer";
+export { default as GeoJsonProvider } from "./components/MlGPXViewer/util/GeoJsonProvider";
+export { default as GeoJsonContext } from "./components/MlGPXViewer/util/GeoJsonContext";
+export { default as MlSpatialElevationProfile } from "./components/MlSpatialElevationProfile/MlSpatialElevationProfile.js";
+export { default as MlOsmLayer } from "./components/MlOsmLayer/MlOsmLayer.js";
+export { default as MlBasicComponent } from "./components/MlBasicComponent.js";
+export { default as useLayer } from "./hooks/useLayer";
+export { default as useMapState } from "./hooks/useMapState";
+export { default as useMap } from "./hooks/useMap";
+export { default as useWms } from "./hooks/useWms.js";
+export { MapComponentsProvider } from "./contexts/MapContext";
+export { default as MapContext } from "./contexts/MapContext";
+export { default as SimpleDataProvider } from "./contexts/SimpleDataProvider";
+export { default as SimpleDataContext } from "./contexts/SimpleDataContext";

package/dist/index.esm.js

@@ -11859,7 +11859,9 @@ var drawUtils = {
   },
   getDrawInstance: function getDrawInstance(map) {
     for (var i = map._controls.length - 1; i >= 0; i--) {
-      if (map._controls[i].options && map._controls[i].options.defaultMode === "custom_select") {
+      var _map$_controls$i, _map$_controls$i$mode;
+
+      if (((_map$_controls$i = map._controls[i]) === null || _map$_controls$i === void 0 ? void 0 : (_map$_controls$i$mode = _map$_controls$i.modes) === null || _map$_controls$i$mode === void 0 ? void 0 : _map$_controls$i$mode.SIMPLE_SELECT) === "simple_select") {
         return map._controls[i];
       }
     }
@@ -12143,21 +12145,15 @@ var MlFeatureEditor = function (props) {
         mapId: props.mapId,
         waitForLayer: props.insertBeforeLayer,
     });
-    var onChangeRef = useRef(props.onChange);
     var drawToolsInitialized = useRef(false);
     var _a = useState(false), drawToolsReady = _a[0], setDrawToolsReady = _a[1];
-    var _b = useState(0), mouseUpTrigger = _b[0], setMouseUpTrigger = _b[1];
     var modeChangeHandler = function (e) {
         console.log("MlFeatureEditor mode change to " + e.mode);
         //setDrawMode(e.mode);
     };
-    var mouseUpHandler = function () {
-        setMouseUpTrigger(Math.random());
-    };
     useEffect(function () {
         var _a;
-        if (mapHook.map &&
-            !drawToolsInitialized.current) {
+        if (mapHook.map && !drawToolsInitialized.current) {
             drawToolsInitialized.current = true;
             if (mapHook.map.map.style &&
                 mapHook.map.map.getSource("mapbox-gl-draw-cold") &&
@@ -12176,35 +12172,46 @@ var MlFeatureEditor = function (props) {
                     custom_direct_select: DirectSelect,
                 }, MapboxDraw.modes),
             });
-            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]);
+    useEffect(function () {
+        if (!mapHook.map || !drawToolsReady)
+            return;
+        var changeHandler = function () {
+            var _a, _b;
+            if (draw.current) {
+                // update drawnFeatures state object
+                if (typeof props.onChange === "function") {
+                    var currentFeatureCollection = (_b = (_a = draw.current).getAll) === null || _b === void 0 ? void 0 : _b.call(_a);
+                    props.onChange(currentFeatureCollection === null || currentFeatureCollection === void 0 ? void 0 : currentFeatureCollection.features);
+                }
+            }
+        };
+        mapHook.map.on("mouseup", changeHandler);
+        mapHook.map.on("touchend", changeHandler);
+        return function () {
+            if (!mapHook.map)
+                return;
+            mapHook.map.map.off("mouseup", changeHandler);
+            mapHook.map.map.off("touchend", changeHandler);
+        };
+    }, [drawToolsReady, mapHook.map]);
     useEffect(function () {
         var _a;
-        if (draw.current &&
-            ((_a = props.geojson) === null || _a === void 0 ? void 0 : _a.geometry)) {
+        if (draw.current && ((_a = props.geojson) === null || _a === void 0 ? void 0 : _a.geometry)) {
             draw.current.set({ type: "FeatureCollection", features: [props.geojson] });
         }
     }, [props.geojson, drawToolsReady]);
-    useEffect(function () {
-        if (draw.current && mouseUpTrigger) {
-            // update drawnFeatures state object
-            var currentFeatureCollection = draw.current.getAll();
-            if (typeof onChangeRef.current === "function") {
-                onChangeRef.current(currentFeatureCollection.features);
-            }
-        }
-    }, [mouseUpTrigger]);
     useEffect(function () {
         if (props.mode && draw.current) {
             // @ts-ignore
             draw.current.changeMode(props.mode);
         }
     }, [props.mode]);
-    return (React__default.createElement(React__default.Fragment, null));
+    return React__default.createElement(React__default.Fragment, null);
 };
 
 var legalLayerTypes = [
@@ -13309,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,
@@ -13347,16 +13401,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 });
         }
     };
@@ -13386,11 +13438,17 @@ 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) {
-                _a.color; var rest = __rest(_a, ["color"]);
-                return rest;
-            })(buttonStyle)) }),
+        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)) }),
+        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",
@@ -13401,6 +13459,11 @@ var MlNavigationTools = function (props) {
                 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" } })))));
+};
+MlNavigationTools.defaultProps = {
+    mapId: undefined,
+    showFollowGpsButton: true,
+    showCenterLocationButton: false,
 };
 
 /**