@rio-cloud/rio-uikit 0.16.4-beta.8 → 1.1.0

package/components/map/utils/mapUtils.js

@@ -0,0 +1,79 @@
+import flatMap from 'lodash/fp/flatMap';
+import filter from 'lodash/fp/filter';
+import flow from 'lodash/fp/flow';
+import { calculateBoundingBox, isValidBoundingBox, parsePositionFromString } from './positions';
+// Internal use for setting the map to a given bounding box
+export const getMapBounds = (boundingBox) => {
+    const { top, left, bottom, right } = boundingBox;
+    return new H.geo.Rect(top, left, bottom, right);
+};
+// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+const typeFilterFunction = (hereType) => (obj) => obj instanceof hereType;
+const markerFilterFunction = typeFilterFunction(H.map.AbstractMarker);
+const groupFilterFunction = typeFilterFunction(H.map.Group);
+const polylineFilterFunction = typeFilterFunction(H.map.Polyline);
+const getPosition = (marker) => marker.getGeometry();
+export const createUtils = (mapApi) => {
+    return {
+        getCenter: () => {
+            const center = mapApi.getCenter();
+            return {
+                lat: center.lat,
+                lng: center.lng,
+            };
+        },
+        setCenter: (position, animate) => {
+            mapApi.getViewModel().setLookAtData({ position }, animate);
+        },
+        getZoom: () => {
+            const { zoom } = mapApi.getViewModel().getLookAtData();
+            return Math.round(zoom === undefined ? 0 : zoom);
+        },
+        setZoom: (zoom, zoomAnimation = false) => {
+            mapApi.getViewModel().setLookAtData({ zoom }, zoomAnimation);
+        },
+        getViewPort: () => {
+            const viewPort = mapApi.getViewPort();
+            return {
+                width: viewPort.width,
+                height: viewPort.height,
+                margin: viewPort.margin,
+                padding: {
+                    top: viewPort.padding.top,
+                    right: viewPort.padding.right,
+                    bottom: viewPort.padding.bottom,
+                    left: viewPort.padding.left,
+                },
+                center: {
+                    x: viewPort.center.x,
+                    y: viewPort.center.y,
+                },
+            };
+        },
+        getBounds: () => {
+            const { bounds } = mapApi.getViewModel().getLookAtData();
+            // HERE Maps API for JavaScript 3.1
+            const boundingBox = bounds === null || bounds === void 0 ? void 0 : bounds.getBoundingBox();
+            return {
+                topLeft: {
+                    lng: boundingBox === null || boundingBox === void 0 ? void 0 : boundingBox.getTopLeft().lng,
+                    lat: boundingBox === null || boundingBox === void 0 ? void 0 : boundingBox.getTopLeft().lat,
+                },
+                bottomRight: {
+                    lng: boundingBox === null || boundingBox === void 0 ? void 0 : boundingBox.getBottomRight().lng,
+                    lat: boundingBox === null || boundingBox === void 0 ? void 0 : boundingBox.getBottomRight().lat,
+                },
+            };
+        },
+        getObjects: () => mapApi.getObjects(),
+        getLayers: () => mapApi.getLayers().asArray(),
+        getBaseLayer: () => mapApi.getBaseLayer(),
+        getGroups: () => filter(groupFilterFunction)(mapApi.getObjects()),
+        getMarkers: () => filter(markerFilterFunction)(mapApi.getObjects()),
+        getRoutePolylines: () => flow(filter(groupFilterFunction), flatMap((group) => group.getObjects()), filter(polylineFilterFunction))(mapApi.getObjects()),
+        getPosition,
+        calculateBoundingBox,
+        isValidBoundingBox,
+        parsePositionFromString,
+    };
+};

package/components/map/utils/positions.d.ts

@@ -1,10 +1,28 @@
-export namespace PositionUtils {
-    export { calculateBoundingBox };
-    export { parsePositionFromString };
-}
-declare function calculateBoundingBox(positions: any): any;
-declare function parsePositionFromString(value: any): {
+import type { BoundingBox, Position } from '../../../mapTypes';
+export declare const isValidBoundingBox: (box: BoundingBox) => boolean;
+export declare const calculateBoundingBox: (positions: {
+    lat: number;
+    lng: number;
+}[]) => BoundingBox;
+export declare const parsePositionFromString: (value: string) => {
     lat: number;
     lng: number;
 } | undefined;
-export {};
+/**
+ * Ease function that can be used to animate positions on the map.
+ *
+ * See: https://developer.here.com/documentation/examples/maps-js/markers/markers-update-position-with-animation
+ *
+ * @param   {H.geo.IPoint} startCoord   start geo coordinate
+ * @param   {H.geo.IPoint} endCoord     end geo coordinate
+ * @param   number durationMs           duration of animation between start & end coordinates
+ * @param   function onStep             callback executed each step
+ * @param   function onStep             callback executed at the end
+ */
+export declare const ease: (startCoord?: {
+    lat: number;
+    lng: number;
+}, endCoord?: {
+    lat: number;
+    lng: number;
+}, durationMs?: number, onStep?: (pos: Position) => void, onComplete?: () => void) => void;

package/components/map/utils/positions.js

@@ -1,37 +1,31 @@
-const BoundingBox = () => {
-    this.top = -Infinity;
-    this.right = -Infinity;
-    this.bottom = Infinity;
-    this.left = Infinity;
+const createBoundingBox = () => ({
+    top: Number.NEGATIVE_INFINITY,
+    right: Number.NEGATIVE_INFINITY,
+    bottom: Number.POSITIVE_INFINITY,
+    left: Number.POSITIVE_INFINITY,
+});
+export const isValidBoundingBox = (box) => {
+    return (box.top !== Number.NEGATIVE_INFINITY &&
+        box.bottom !== Number.POSITIVE_INFINITY &&
+        box.left !== Number.POSITIVE_INFINITY &&
+        box.right !== Number.NEGATIVE_INFINITY);
 };
-BoundingBox.prototype = {
-    isValid: () => {
-        return this.top !== -Infinity && this.bottom !== Infinity && this.left !== Infinity && this.right !== -Infinity;
-    },
-};
-const calculateBoundingBox = positions => {
+export const calculateBoundingBox = (positions) => {
     return positions.reduce((acc, cur) => {
-        if (cur.lat > acc.top) {
-            acc.top = cur.lat;
-        }
-        if (cur.lat < acc.bottom) {
-            acc.bottom = cur.lat;
-        }
-        if (cur.lng < acc.left) {
-            acc.left = cur.lng;
-        }
-        if (cur.lng > acc.right) {
-            acc.right = cur.lng;
-        }
-        return acc;
-    }, new BoundingBox());
+        return {
+            top: Math.max(acc.top, cur.lat),
+            right: Math.max(acc.right, cur.lng),
+            bottom: Math.min(acc.bottom, cur.lat),
+            left: Math.min(acc.left, cur.lng),
+        };
+    }, createBoundingBox());
 };
 const COORDS_REGEX = /^\s*(-?\d+(\.\d+)?)\s*[,\s]\s*(-?\d+(\.\d+)?)\s*$/;
-const parsePositionFromString = value => {
+export const parsePositionFromString = (value) => {
     const match = COORDS_REGEX.exec(value);
     if (match) {
-        const lat = parseFloat(match[1]);
-        const lng = parseFloat(match[3]);
+        const lat = Number.parseFloat(match[1]);
+        const lng = Number.parseFloat(match[3]);
         if (lat >= -90 && lat <= 90 && lng >= -180 && lng <= 180) {
             return {
                 lat,
@@ -40,7 +34,38 @@ const parsePositionFromString = value => {
         }
     }
 };
-export const PositionUtils = {
-    calculateBoundingBox,
-    parsePositionFromString,
+/**
+ * Ease function that can be used to animate positions on the map.
+ *
+ * See: https://developer.here.com/documentation/examples/maps-js/markers/markers-update-position-with-animation
+ *
+ * @param   {H.geo.IPoint} startCoord   start geo coordinate
+ * @param   {H.geo.IPoint} endCoord     end geo coordinate
+ * @param   number durationMs           duration of animation between start & end coordinates
+ * @param   function onStep             callback executed each step
+ * @param   function onStep             callback executed at the end
+ */
+export const ease = (startCoord = { lat: 0, lng: 0 }, endCoord = { lat: 1, lng: 1 }, durationMs = 200, onStep = (pos) => { }, onComplete = () => { }) => {
+    const raf = window.requestAnimationFrame;
+    const stepCount = durationMs / 16;
+    const valueIncrementLat = (endCoord.lat - startCoord.lat) / stepCount;
+    const valueIncrementLng = (endCoord.lng - startCoord.lng) / stepCount;
+    const sinValueIncrement = Math.PI / stepCount;
+    let currentValueLat = startCoord.lat;
+    let currentValueLng = startCoord.lng;
+    let currentSinValue = 0;
+    const step = () => {
+        currentSinValue += sinValueIncrement;
+        currentValueLat += valueIncrementLat * Math.pow(Math.sin(currentSinValue), 2) * 2;
+        currentValueLng += valueIncrementLng * Math.pow(Math.sin(currentSinValue), 2) * 2;
+        if (currentSinValue < Math.PI) {
+            onStep({ lat: currentValueLat, lng: currentValueLng });
+            raf(step);
+        }
+        else {
+            onStep(endCoord);
+            onComplete();
+        }
+    };
+    raf(step);
 };

package/components/map/utils/rendering.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="heremaps" />
+import type { MapCredentials, MapType } from './mapTypes';
+export declare const getPPI: () => 100 | 200;
+export declare const isVectorBased: (enableWebGL: boolean, baseLayer: MapType) => boolean;
+export declare const getPlatform: (credentials: MapCredentials) => H.service.Platform;
+export declare const getBaseTileLayer: <T>(rasterTileService: T, engineType: H.Map.EngineType) => H.map.layer.TileLayer;
+export declare const getBaseRasterTileService: (platform: H.service.Platform, style: string, features: string, lang: string) => any;
+export declare const getEngineType: (baseLayerName: string, enableWebGL: boolean) => any;
+export type BaseLayer = {
+    baseLayerName: string;
+    defaultLayers: H.service.DefaultLayers;
+    enableWebGL: boolean;
+    platform: H.service.Platform;
+    engineType: H.Map.EngineType;
+    language: string;
+    vehicleRestrictions: boolean;
+};
+export declare const getBaseLayer: ({ baseLayerName, defaultLayers, enableWebGL, platform, engineType, language, vehicleRestrictions, }: BaseLayer) => {
+    baseLayer: H.map.layer.Layer;
+    overlayLayer?: H.map.layer.Layer;
+};

package/components/map/utils/rendering.js

@@ -0,0 +1,123 @@
+import { DEFAULT_RASTER_LAYER_FORMAT, MAP_TYPE_FLEET_STYLE, MAP_TYPE_TERRAIN, ENGINE_TYPE_P2D, ENGINE_TYPE_HARP, MAP_TYPE_DEFAULT, MAP_TYPE_NIGHT, MAP_TYPE_SATELLITE, } from '../components/constants';
+// https://www.here.com/docs/bundle/raster-tile-api-migration-guide/page/README.html#6-pixels-per-inch-ppi
+// Note: higher PPI image tiles result in larger label size and show more label on the map
+// HERE Raster Tile API v3: 100, 200, 200 or 400, 400
+export const getPPI = () => (window.devicePixelRatio >= 1.7 ? 200 : 100);
+// Even if webgl is enabled, some base layer cannot be rendered in HARP properly
+export const isVectorBased = (enableWebGL, baseLayer) => enableWebGL && baseLayer !== MAP_TYPE_TERRAIN && baseLayer !== MAP_TYPE_FLEET_STYLE;
+// See Migration guide: https://developer.here.com/documentation/maps/3.1.37.0/dev_guide/topics/migration.html
+export const getPlatform = (credentials) => {
+    var _a;
+    // Initiate and authenticate your connection to the HERE platform:
+    return new H.service.Platform({
+        apikey: (_a = credentials.apikey) !== null && _a !== void 0 ? _a : '',
+        useHTTPS: location.protocol === 'https:' ? true : false,
+    });
+};
+export const getBaseTileLayer = (rasterTileService, engineType) => {
+    // @ts-ignore-next-line "H.service.rasterTile" is newer that the types
+    const rasterTileProvider = new H.service.rasterTile.Provider(rasterTileService, {
+        engineType,
+        tileSize: 512,
+    });
+    return new H.map.layer.TileLayer(rasterTileProvider);
+};
+export const getBaseRasterTileService = (platform, style, features, lang) => {
+    // @ts-ignore-next-line "getRasterTileService" is newer that the types
+    return platform === null || platform === void 0 ? void 0 : platform.getRasterTileService({
+        format: DEFAULT_RASTER_LAYER_FORMAT,
+        queryParams: {
+            // https://www.here.com/docs/bundle/raster-tile-api-migration-guide/page/README.html#5-language
+            lang,
+            ppi: getPPI(),
+            style,
+            features,
+        },
+    });
+};
+export const getEngineType = (baseLayerName, enableWebGL) => {
+    switch (baseLayerName) {
+        case MAP_TYPE_FLEET_STYLE:
+        case MAP_TYPE_TERRAIN:
+            return ENGINE_TYPE_P2D;
+        default:
+            return enableWebGL ? ENGINE_TYPE_HARP : ENGINE_TYPE_P2D;
+    }
+};
+export const getBaseLayer = ({ baseLayerName, defaultLayers, enableWebGL, platform, engineType, language, vehicleRestrictions, }) => {
+    const restriction = 'disabled'; // vehicleRestrictions ? 'active_and_inactive' : 'disabled';
+    const features = `pois:all,environmental_zones:all,congestion_zones:all,vehicle_restrictions:${restriction}`;
+    if (enableWebGL && baseLayerName === MAP_TYPE_DEFAULT) {
+        // const rasterTileService = platform?.getRasterTileService({
+        //     format: 'png', // 'png', // or jpg, png8
+        //     queryParams: {
+        //         lang: 'en',
+        //         ppi: window.devicePixelRatio >= 1.7 ? 400 : 100,
+        //         // style: 'explore.day',
+        //         features: 'environmental_zones:all',
+        //     },
+        // });
+        // const rasterTileProvider = new H.service.rasterTile.Provider(rasterTileService, {
+        //     engineType: enableWebGL ? H.Map.EngineType['HARP'] : H.Map.EngineType['P2D'],
+        //     tileSize: 512,
+        // });
+        // const rasterTileLayer = new H.map.layer.TileLayer(rasterTileProvider);
+        // const envLayer = rasterTileLayer;
+        // // create a service that calls the custom endpoint
+        // const service = platform.getOMVService({ path: 'v2/vectortiles/core/mc' });
+        // // create a provider and a layer that use the custom service and a custom style
+        // const provider = new H.service.omv.Provider(
+        //     service,
+        //     new H.map.Style('https://js.api.here.com/v3/3.1/styles/omv/oslo/japan/normal.day.yaml')
+        // );
+        // const layer = new H.map.layer.TileLayer(provider, { max: 22 });
+        return {
+            baseLayer: defaultLayers === null || defaultLayers === void 0 ? void 0 : defaultLayers.vector.normal.map,
+            // baseLayer: layer,
+            // overlayLayer: envLayer,
+        };
+    }
+    switch (baseLayerName) {
+        case MAP_TYPE_SATELLITE: {
+            if (enableWebGL) {
+                return {
+                    // @ts-ignore-next-line "hybrid.liteday.raster" is newer that the types
+                    baseLayer: defaultLayers.hybrid.liteday.raster,
+                    // @ts-ignore-next-line "hybrid.day.vector" is newer that the types
+                    overlayLayer: defaultLayers.hybrid.day.vector,
+                };
+            }
+            return {
+                baseLayer: getBaseTileLayer(getBaseRasterTileService(platform, 'explore.satellite.day', features, language), engineType),
+            };
+        }
+        case MAP_TYPE_TERRAIN: {
+            return {
+                baseLayer: getBaseTileLayer(getBaseRasterTileService(platform, 'topo.day', features, language), engineType),
+            };
+        }
+        case MAP_TYPE_FLEET_STYLE: {
+            return {
+                baseLayer: getBaseTileLayer(getBaseRasterTileService(platform, 'logistics.day', features, language), ENGINE_TYPE_P2D),
+            };
+        }
+        case MAP_TYPE_NIGHT: {
+            if (enableWebGL) {
+                return {
+                    // @ts-ignore-next-line "vector.normal.mapnight" is newer that the types
+                    baseLayer: defaultLayers.vector.normal.mapnight,
+                };
+            }
+            return {
+                baseLayer: getBaseTileLayer(getBaseRasterTileService(platform, 'explore.night', features, language), engineType),
+            };
+        }
+        default: {
+            // As a replacement for "defaultLayers?.raster.normal.map" which uses the old and deprecated
+            // H.service.MapTileService, we use the Raster Tile Service v3 instead
+            return {
+                baseLayer: getBaseTileLayer(getBaseRasterTileService(platform, 'explore.day', features, language), engineType),
+            };
+        }
+    }
+};

package/components/mapMarker/ClusterMapMarker.d.ts

@@ -1,26 +1,53 @@
+import { type MarkerColor } from '../map/utils/mapTypes';
+export type ClusterMapMarkerProps = {
+    /**
+     * Number displayed in the center.
+     */
+    count?: number;
+    /**
+     * Displayed in the orange badge if more than 0.
+     *
+     * @default 0
+     */
+    warningCount?: number;
+    /**
+     * Displayed in the red badge if more than 0.
+     *
+     * @default 0
+     */
+    exceptionCount?: number;
+    /**
+     * Defines if marker is selected or not.
+     *
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * Defines if marker is clickable or not.
+     *
+     * @default true
+     */
+    clickable?: boolean;
+    /**
+     * Defines the color of the marker.
+     *
+     * Possible values are:
+     * - `bg-map-marker-asset`
+     * - `bg-map-marker-poi`
+     * - `bg-map-marker-geofence`
+     * - `bg-map-marker-route`
+     * - `bg-map-marker-info`
+     * - `bg-map-marker-success`
+     * - `bg-map-marker-warning`
+     * - `bg-map-marker-danger`
+     *
+     * @default 'bg-map-marker-asset'
+     */
+    markerColor?: MarkerColor;
+    /**
+     * Name of a rioglyph icon.
+     */
+    iconName?: string;
+};
+declare const ClusterMapMarker: (props: ClusterMapMarkerProps) => import("react/jsx-runtime").JSX.Element;
 export default ClusterMapMarker;
-declare function ClusterMapMarker(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace ClusterMapMarker {
-    namespace defaultProps {
-        const warningCount: number;
-        const exceptionCount: number;
-        const active: boolean;
-        const markerColor: string;
-        const clickable: boolean;
-    }
-    namespace propTypes {
-        export const count: PropTypes.Requireable<number>;
-        const warningCount_1: PropTypes.Requireable<number>;
-        export { warningCount_1 as warningCount };
-        const exceptionCount_1: PropTypes.Requireable<number>;
-        export { exceptionCount_1 as exceptionCount };
-        const clickable_1: PropTypes.Requireable<boolean>;
-        export { clickable_1 as clickable };
-        const active_1: PropTypes.Requireable<boolean>;
-        export { active_1 as active };
-        const markerColor_1: PropTypes.Requireable<string>;
-        export { markerColor_1 as markerColor };
-        export const iconName: PropTypes.Requireable<string>;
-    }
-}
-import PropTypes from "prop-types";

package/components/mapMarker/ClusterMapMarker.js

@@ -1,47 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import PropTypes from 'prop-types';
+import 'react';
 import classNames from 'classnames';
-const getColorMapping = markerColor => {
-    switch (markerColor) {
-        case 'bg-map-marker-asset':
-            return 'map-marker-type-asset';
-        case 'bg-map-marker-poi':
-            return 'map-marker-type-poi';
-        case 'bg-map-marker-geofence':
-            return 'map-marker-type-geofence';
-        case 'bg-map-marker-route':
-            return 'map-marker-type-route';
-        default:
-            return 'map-marker-type-asset';
-    }
-};
-const ClusterMapMarker = props => {
-    const { count, exceptionCount, markerColor, warningCount, active, clickable, iconName } = props;
-    const classes = classNames(active && 'active', 'rio-map-marker', 'rio-map-marker-center-center', !clickable && 'pointer-events-none');
-    const clusterClasses = classNames('rio-map-cluster-cirlce');
-    const markerType = getColorMapping(markerColor);
-    return (_jsx("div", Object.assign({ className: classes }, { children: _jsx("div", Object.assign({ className: 'rio-map-marker-translate' }, { children: _jsxs("div", Object.assign({ className: 'rio-map-cluster' }, { children: [_jsx("div", Object.assign({ className: `${clusterClasses} ${markerType} ${active ? 'active' : ''}` }, { children: _jsxs("div", Object.assign({ className: 'rio-map-cluster-content' }, { children: [iconName && _jsx("div", { className: `rio-map-icon rioglyph rioglyph-${iconName}` }), _jsx("div", Object.assign({ className: 'rio-map-count' }, { children: count }))] })) })), _jsx("div", Object.assign({ className: 'rio-map-bubble exception' }, { children: exceptionCount > 0 && exceptionCount })), _jsx("div", Object.assign({ className: 'rio-map-bubble warning' }, { children: warningCount > 0 && warningCount }))] })) })) })));
-};
-ClusterMapMarker.defaultProps = {
-    warningCount: 0,
-    exceptionCount: 0,
-    active: false,
-    markerColor: 'bg-map-marker-asset',
-    clickable: true,
-};
-ClusterMapMarker.propTypes = {
-    count: PropTypes.number,
-    warningCount: PropTypes.number,
-    exceptionCount: PropTypes.number,
-    clickable: PropTypes.bool,
-    active: PropTypes.bool,
-    markerColor: PropTypes.oneOf([
-        'bg-map-marker-asset',
-        'bg-map-marker-poi',
-        'bg-map-marker-route',
-        'bg-map-marker-geofence',
-    ]),
-    iconName: PropTypes.string,
+import { markerColorMapping } from '../map/utils/mapTypes';
+const ClusterMapMarker = (props) => {
+    const { count, exceptionCount = 0, markerColor = 'bg-map-marker-asset', warningCount = 0, active = false, clickable = true, iconName, } = props;
+    const clusterClasses = classNames('rio-map-cluster-circle', active && 'active');
+    const classes = classNames(active && 'active', 'rio-map-marker', 'rio-map-marker-center-center', !clickable && 'not-clickable');
+    const markerBackgroundColor = `var(${markerColorMapping[markerColor]})`;
+    return (_jsx("div", Object.assign({ className: classes, style: { color: markerBackgroundColor }, "data-marker-type": markerColor.replace('bg-', 'cluster-') }, { children: _jsx("div", Object.assign({ className: 'rio-map-marker-translate' }, { children: _jsxs("div", Object.assign({ className: 'rio-map-cluster' }, { children: [_jsx("div", Object.assign({ className: clusterClasses }, { children: _jsxs("div", Object.assign({ className: 'rio-map-cluster-content' }, { children: [iconName && _jsx("div", { className: `rio-map-icon rioglyph rioglyph-${iconName}` }), _jsx("div", Object.assign({ className: 'rio-map-count' }, { children: count }))] })) })), exceptionCount > 0 && _jsx("div", Object.assign({ className: 'rio-map-bubble exception' }, { children: exceptionCount })), warningCount > 0 && _jsx("div", Object.assign({ className: 'rio-map-bubble warning' }, { children: warningCount }))] })) })) })));
 };
 export default ClusterMapMarker;

package/components/mapMarker/SingleMapMarker.d.ts

@@ -1,35 +1,119 @@
+import { type ReactNode } from 'react';
+import { type MarkerColor } from '../map/utils/mapTypes';
+export type SingleMapMarkerProps = {
+    /**
+     * Defines the rotation of the arrow in deg.
+     *
+     * @default 60
+     */
+    bearing?: number;
+    /**
+     * Text for the marker.
+     */
+    name?: string | ReactNode;
+    /**
+     * Displayed in the orange badge if more than 0.
+     *
+     * @default 0
+     */
+    warningCount?: number;
+    /**
+     * Displayed in the red badge if more than 0.
+     *
+     * @default 0
+     */
+    exceptionCount?: number;
+    /**
+     * Defines if marker is selected.
+     *
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * Defines if marker is clickable or not.
+     *
+     * @default true
+     */
+    clickable?: boolean;
+    /**
+     * Defines if marker is fixed and has no centering point.
+     *
+     * @default false
+     */
+    fixed?: boolean;
+    /**
+     * Defines whether the direction icon is displayed or not.
+     *
+     * @default false
+     */
+    moving?: boolean;
+    /**
+     * Optional icon that is shown in the state indicator and used instead of the moving direction arrow.
+     */
+    stateIconName?: string;
+    /**
+     * Defines if marker is displayed with pinging animation.
+     *
+     * @default false
+     */
+    pinging?: boolean;
+    /**
+     * List of rioglyph icon names.
+     */
+    iconNames?: string[];
+    /**
+     * Defines the color of the marker.
+     *
+     * Possible values are:
+     * - `bg-map-marker-asset`
+     * - `bg-map-marker-poi`
+     * - `bg-map-marker-geofence`
+     * - `bg-map-marker-route`
+     * - `bg-map-marker-info`
+     * - `bg-map-marker-success`
+     * - `bg-map-marker-warning`
+     * - `bg-map-marker-danger`
+     *
+     * @default 'bg-map-marker-asset'
+     */
+    markerColor?: MarkerColor;
+    /**
+     * Can be used to add a text-color class to the marker div.
+     */
+    textColor?: string;
+    /**
+     * @deprecated please use `anchorSize`
+     */
+    size?: 'md' | 'lg';
+    /**
+     * Used to control the marker's anchor size.
+     *
+     * Possible values are:
+     * - `md`
+     * - `lg`
+     *
+     * @default 'md'
+     */
+    anchorSize?: 'md' | 'lg';
+    /**
+     * @deprecated please use `markerOnHover`
+     */
+    visibleOnHover?: boolean;
+    /**
+     * Whether the marker is only visible on hover.
+     *
+     * @default false
+     */
+    markerOnHover?: boolean;
+    /**
+     * Optional icon that is shown on the anchor of the DOM marker.
+     * Use this when no marker content is shown.
+     */
+    anchorIconName?: string;
+    /**
+     * Shows only the anchor without the rest of the marker.
+     */
+    anchorOnly?: boolean;
+};
+declare const SingleMapMarker: (props: SingleMapMarkerProps) => import("react/jsx-runtime").JSX.Element;
 export default SingleMapMarker;
-declare function SingleMapMarker(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace SingleMapMarker {
-    namespace defaultProps {
-        const warningCount: number;
-        const exceptionCount: number;
-        const active: boolean;
-        const markerColor: string;
-        const clickable: boolean;
-        const size: string;
-        const visibleOnHover: boolean;
-    }
-    namespace propTypes {
-        export const bearing: PropTypes.Requireable<number>;
-        export const name: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        const warningCount_1: PropTypes.Requireable<number>;
-        export { warningCount_1 as warningCount };
-        const exceptionCount_1: PropTypes.Requireable<number>;
-        export { exceptionCount_1 as exceptionCount };
-        const active_1: PropTypes.Requireable<boolean>;
-        export { active_1 as active };
-        export const fixed: PropTypes.Requireable<boolean>;
-        const clickable_1: PropTypes.Requireable<boolean>;
-        export { clickable_1 as clickable };
-        export const iconNames: PropTypes.Requireable<(string | null | undefined)[]>;
-        export const moving: PropTypes.Requireable<boolean>;
-        const markerColor_1: PropTypes.Requireable<string>;
-        export { markerColor_1 as markerColor };
-        const size_1: PropTypes.Requireable<string>;
-        export { size_1 as size };
-        const visibleOnHover_1: PropTypes.Requireable<boolean>;
-        export { visibleOnHover_1 as visibleOnHover };
-    }
-}
-import PropTypes from "prop-types";