@rio-cloud/rio-uikit 0.16.4-beta.7 → 1.0.0

package/lib/es/components/map/utils/mapTypes.d.ts

@@ -0,0 +1,166 @@
+/// <reference types="heremaps" />
+/// <reference types="react" />
+import type { ObjectValues } from '../../../utils/ObjectValues';
+import type { MapUtils } from './mapUtils';
+import type { EventListenerMap } from './eventHandling';
+export type Point = H.geo.Point;
+export type NoisePoint = H.clustering.INoisePoint;
+export type DataPoint = H.clustering.DataPoint;
+export type MapEvent = H.mapevents.Event & {};
+export type MapContextMenuEvent = H.mapevents.ContextMenuEvent;
+export type MapInfoBubble = H.ui.InfoBubble;
+export type MapUtilEvent = H.util.Event;
+export type Position = {
+    lat: number;
+    lng: number;
+};
+export type BoundingBox = {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+};
+export type MapBoundingBox = {
+    topLeft: {
+        lng: number | undefined;
+        lat: number | undefined;
+    };
+    bottomRight: {
+        lng: number | undefined;
+        lat: number | undefined;
+    };
+};
+export declare const MapTypeMap: {
+    readonly TYPE_DEFAULT: "DEFAULT";
+    readonly TYPE_FLEET_STYLE: "FLEET_STYLE";
+    readonly TYPE_SATELLITE: "SATELLITE";
+    readonly TYPE_TERRAIN: "TERRAIN";
+    readonly TYPE_NIGHT: "NIGHT";
+};
+export type MapType = ObjectValues<typeof MapTypeMap>;
+export declare const MapLayerMap: {
+    readonly MAP_LAYER_INCIDENTS: "INCIDENTS";
+    readonly MAP_LAYER_TRAFFIC: "TRAFFIC";
+    readonly MAP_LAYER_ROAD_RESTRICTIONS: "ROAD_RESTRICTIONS";
+};
+export type MapLayer = ObjectValues<typeof MapLayerMap>;
+export type MapCredentials = {
+    app_id?: string;
+    app_code?: string;
+    apikey?: string;
+};
+export type MapProps = {
+    credentials: MapCredentials;
+    height?: number;
+    width?: number;
+    language?: string;
+    center?: Position;
+    zoom?: number;
+    boundingBox?: BoundingBox;
+    disableMapEvents?: boolean;
+    disableBehavior?: boolean;
+    eventListenerMap?: EventListenerMap;
+    hideMapSettings?: boolean;
+    hideClusterSettings?: boolean;
+    hideMapLayerSettings?: boolean;
+    mapType?: MapType;
+    mapLayer?: MapLayer[];
+    showCluster?: boolean;
+    showScaleBar?: boolean;
+    onMapTypeChange?: (type: MapType, previousType?: MapType) => void;
+    onMapLayerChange?: (activeLayer: MapLayer[], previousLayer?: MapLayer[]) => void;
+    onShowClusterChange?: (show: boolean) => void;
+    onZoomIn?: (zoom: number) => void;
+    onZoomOut?: (zoom: number) => void;
+    onIncidentsChange?: (incidentsResult: MapIncidents) => void;
+    mapSettingsTooltip?: string | React.ReactNode;
+    mapSettings?: React.ReactNode;
+    zoomAnimation?: boolean;
+    enableWebGL?: boolean;
+    enableDevicePixelRatio?: boolean;
+    children?: React.ReactNode | ((api: MapApi, incidents?: MapIncidents) => React.ReactNode);
+};
+export type MapApi = {
+    credentials?: MapCredentials;
+    defaultLayers?: H.service.DefaultLayers;
+    map?: H.Map;
+    mapEvents?: false | H.mapevents.MapEvents;
+    behavior?: false | H.mapevents.Behavior;
+    platform?: H.service.Platform;
+    ui?: H.ui.UI;
+    utils?: MapUtils;
+    group?: H.map.Group;
+    settings?: {
+        enableWebGL?: boolean;
+        baseLayer?: MapType;
+        activeLayers?: MapLayer[];
+        showCluster?: boolean;
+    };
+};
+export type MapIncidents = {
+    sourceUpdated: string;
+    results: IncidentDataPoint[];
+};
+export type Incidents = {
+    sourceUpdated: string;
+    results: Incident[];
+};
+export type IncidentLocationPoint = {
+    length: number;
+    points: Position[];
+};
+export type IncidentLocationShape = {
+    links: IncidentLocationPoint[];
+};
+export type Incident = {
+    incidentDetails: IncidentDetails;
+    location: {
+        length: number;
+        shape: IncidentLocationShape;
+    };
+};
+export type IncidentDetails = {
+    id: string;
+    hrn: string;
+    originalId: string;
+    originalHrn: string;
+    startTime: string;
+    endTime: string;
+    entryTime: string;
+    roadClosed: boolean;
+    criticality: 'minor' | 'major' | 'critical';
+    type: 'roadClosure' | 'construction' | 'roadHazard' | 'other';
+    codes: number[];
+    comment: string | undefined;
+    description: {
+        value: string;
+        language?: string;
+    };
+    summary: {
+        value: string;
+        language?: string;
+    };
+    junctionTraversability: string;
+};
+export type IncidentDataPoint = {
+    id: string;
+    tooltipContent: string;
+    criticality: 'low' | 'minor' | 'major' | 'critical';
+    description: {
+        value: string;
+        language?: string;
+    };
+    summary: {
+        value: string;
+        language?: string;
+    };
+    comment: string | undefined;
+    type: 'accident' | 'construction' | 'congestion' | 'roadHazard' | 'roadClosure' | 'disabledVehicle' | 'massTransit' | 'plannedEvent' | 'weather' | 'laneRestriction' | 'other';
+    startTime: string;
+    endTime: string;
+    roadClosed: boolean;
+    position: Position;
+};
+export declare const markerColorOptions: readonly ["bg-map-marker-asset", "bg-map-marker-poi", "bg-map-marker-geofence", "bg-map-marker-route"];
+export type MarkerColor = (typeof markerColorOptions)[number];
+export declare const markerColorMapping: Record<MarkerColor, string>;

package/lib/es/components/map/utils/mapTypes.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.markerColorMapping = exports.markerColorOptions = exports.MapLayerMap = exports.MapTypeMap = void 0;
+exports.MapTypeMap = {
+    TYPE_DEFAULT: 'DEFAULT',
+    TYPE_FLEET_STYLE: 'FLEET_STYLE',
+    TYPE_SATELLITE: 'SATELLITE',
+    TYPE_TERRAIN: 'TERRAIN',
+    TYPE_NIGHT: 'NIGHT',
+};
+exports.MapLayerMap = {
+    MAP_LAYER_INCIDENTS: 'INCIDENTS',
+    MAP_LAYER_TRAFFIC: 'TRAFFIC',
+    MAP_LAYER_ROAD_RESTRICTIONS: 'ROAD_RESTRICTIONS',
+};
+exports.markerColorOptions = [
+    'bg-map-marker-asset',
+    'bg-map-marker-poi',
+    'bg-map-marker-geofence',
+    'bg-map-marker-route',
+];
+exports.markerColorMapping = {
+    'bg-map-marker-asset': 'map-marker-type-asset',
+    'bg-map-marker-poi': 'map-marker-type-poi',
+    'bg-map-marker-geofence': 'map-marker-type-geofence',
+    'bg-map-marker-route': 'map-marker-type-route',
+};

package/lib/es/components/map/utils/mapUi.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="heremaps" />
+export declare const getHereUi: (hereMap: H.Map, defaultLayers: H.service.DefaultLayers, showScaleBar: boolean, language: string) => H.ui.UI;

package/lib/es/components/map/utils/mapUi.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getHereUi = void 0;
+const getSupportedUiLocale = (language) => {
+    const supportedLocales = [
+        'en-US',
+        'de-DE',
+        'es-ES',
+        'fi-FI',
+        'fr-FR',
+        'it-IT',
+        'nl-NL',
+        'pl-PL',
+        'pt-BR',
+        'pt-PT',
+        'ru-RU',
+        'tr-TR',
+        'zh-CN',
+    ];
+    return language ? supportedLocales.find(locale => locale.startsWith(language)) : undefined;
+};
+const getHereUi = (hereMap, defaultLayers, showScaleBar, language) => {
+    const hereUi = H.ui.UI.createDefault(hereMap, defaultLayers, getSupportedUiLocale(language));
+    if (hereUi) {
+        hereUi.getControl('scalebar').setVisibility(showScaleBar);
+        hereUi.getControl('scalebar').setAlignment(H.ui.LayoutAlignment.BOTTOM_LEFT);
+        hereUi.getControl('mapsettings').setVisibility(false);
+        hereUi.removeControl('zoom');
+    }
+    return hereUi;
+};
+exports.getHereUi = getHereUi;

package/lib/es/components/map/utils/mapUtils.d.ts

@@ -0,0 +1,88 @@
+/// <reference types="heremaps" />
+import { calculateBoundingBox, isValidBoundingBox, parsePositionFromString } from './positions';
+import type { BoundingBox, MapBoundingBox, Position } from './mapTypes';
+export declare const getMapBounds: (boundingBox: BoundingBox) => H.geo.Rect;
+declare const getPosition: (marker: H.map.AbstractMarker) => H.geo.Point | H.geo.MultiPoint;
+export type MapUtils = {
+    getCenter: () => Position;
+    setCenter: (position: Position, animate: boolean) => void;
+    getZoom: () => number;
+    setZoom: (zoom: number, zoomAnimation: boolean) => void;
+    getViewPort: () => {
+        width: number;
+        height: number;
+        margin: number;
+        padding: {
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        };
+        center: {
+            x: number;
+            y: number;
+        };
+    };
+    getBounds: () => MapBoundingBox;
+    getObjects: () => H.map.Object[];
+    getLayers: () => H.map.DataModel[];
+    getBaseLayer: () => H.map.layer.Layer;
+    getGroups: () => H.map.Object[];
+    getMarkers: () => H.map.Object[];
+    getRoutePolylines: () => H.map.Object[];
+    getPosition: typeof getPosition;
+    calculateBoundingBox: typeof calculateBoundingBox;
+    isValidBoundingBox: typeof isValidBoundingBox;
+    parsePositionFromString: typeof parsePositionFromString;
+};
+export declare const createUtils: (mapApi: H.Map) => {
+    getCenter: () => {
+        lat: number;
+        lng: number;
+    };
+    setCenter: (position: Position, animate: boolean) => void;
+    getZoom: () => number;
+    setZoom: (zoom: number, zoomAnimation?: boolean) => void;
+    getViewPort: () => {
+        width: number;
+        height: number;
+        margin: number;
+        padding: {
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        };
+        center: {
+            x: number;
+            y: number;
+        };
+    };
+    getBounds: () => {
+        topLeft: {
+            lng: number | undefined;
+            lat: number | undefined;
+        };
+        bottomRight: {
+            lng: number | undefined;
+            lat: number | undefined;
+        };
+    };
+    getObjects: () => H.map.Object[];
+    getLayers: () => any[];
+    getBaseLayer: () => H.map.layer.Layer;
+    getGroups: () => H.map.Object[];
+    getMarkers: () => H.map.Object[];
+    getRoutePolylines: () => any;
+    getPosition: (marker: H.map.AbstractMarker) => H.geo.Point | H.geo.MultiPoint;
+    calculateBoundingBox: (positions: {
+        lat: number;
+        lng: number;
+    }[]) => BoundingBox;
+    isValidBoundingBox: (box: BoundingBox) => boolean;
+    parsePositionFromString: (value: string) => {
+        lat: number;
+        lng: number;
+    } | undefined;
+};
+export {};

package/lib/es/components/map/utils/mapUtils.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createUtils = exports.getMapBounds = void 0;
+const tslib_1 = require("tslib");
+const flatMap_1 = tslib_1.__importDefault(require("lodash/fp/flatMap"));
+const filter_1 = tslib_1.__importDefault(require("lodash/fp/filter"));
+const flow_1 = tslib_1.__importDefault(require("lodash/fp/flow"));
+const positions_1 = require("./positions");
+// Internal use for setting the map to a given bounding box
+const getMapBounds = (boundingBox) => {
+    const { top, left, bottom, right } = boundingBox;
+    return new H.geo.Rect(top, left, bottom, right);
+};
+exports.getMapBounds = getMapBounds;
+// 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();
+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: () => (0, filter_1.default)(groupFilterFunction)(mapApi.getObjects()),
+        getMarkers: () => (0, filter_1.default)(markerFilterFunction)(mapApi.getObjects()),
+        getRoutePolylines: () => (0, flow_1.default)((0, filter_1.default)(groupFilterFunction), (0, flatMap_1.default)((group) => group.getObjects()), (0, filter_1.default)(polylineFilterFunction))(mapApi.getObjects()),
+        getPosition,
+        calculateBoundingBox: positions_1.calculateBoundingBox,
+        isValidBoundingBox: positions_1.isValidBoundingBox,
+        parsePositionFromString: positions_1.parsePositionFromString,
+    };
+};
+exports.createUtils = createUtils;

package/lib/es/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/lib/es/components/map/utils/positions.js

@@ -1,40 +1,36 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PositionUtils = void 0;
-const BoundingBox = () => {
-    this.top = -Infinity;
-    this.right = -Infinity;
-    this.bottom = Infinity;
-    this.left = Infinity;
+exports.ease = exports.parsePositionFromString = exports.calculateBoundingBox = exports.isValidBoundingBox = void 0;
+const createBoundingBox = () => ({
+    top: Number.NEGATIVE_INFINITY,
+    right: Number.NEGATIVE_INFINITY,
+    bottom: Number.POSITIVE_INFINITY,
+    left: Number.POSITIVE_INFINITY,
+});
+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 => {
+exports.isValidBoundingBox = isValidBoundingBox;
+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());
 };
+exports.calculateBoundingBox = calculateBoundingBox;
 const COORDS_REGEX = /^\s*(-?\d+(\.\d+)?)\s*[,\s]\s*(-?\d+(\.\d+)?)\s*$/;
-const parsePositionFromString = value => {
+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,
@@ -43,7 +39,40 @@ const parsePositionFromString = value => {
         }
     }
 };
-exports.PositionUtils = {
-    calculateBoundingBox,
-    parsePositionFromString,
+exports.parsePositionFromString = 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
+ */
+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);
 };
+exports.ease = ease;

package/lib/es/components/map/utils/proptypes.d.ts

@@ -19,15 +19,15 @@ declare const positions: PropTypes.Requireable<(PropTypes.InferProps<{
     lat: PropTypes.Validator<number>;
     lng: PropTypes.Validator<number>;
 }> | null | undefined)[]>;
-declare const icon: PropTypes.Requireable<any>;
-declare const map: PropTypes.Requireable<any>;
-declare const group: PropTypes.Requireable<any>;
-declare const mapEvents: PropTypes.Requireable<any>;
+declare const icon: PropTypes.Requireable<H.map.DomIcon>;
+declare const map: PropTypes.Requireable<H.Map>;
+declare const group: PropTypes.Requireable<H.map.Group>;
+declare const mapEvents: PropTypes.Requireable<H.mapevents.MapEvents>;
 declare const api: PropTypes.Requireable<PropTypes.InferProps<{
-    map: PropTypes.Requireable<any>;
-    platform: PropTypes.Requireable<any>;
+    map: PropTypes.Requireable<H.Map>;
+    platform: PropTypes.Requireable<H.service.Platform>;
     defaultLayers: PropTypes.Requireable<object>;
-    group: PropTypes.Requireable<any>;
+    group: PropTypes.Requireable<NonNullable<H.Map | H.map.Group | null | undefined>>;
 }>>;
 declare const settings: PropTypes.Requireable<PropTypes.InferProps<{
     baseLayer: PropTypes.Requireable<string>;

package/lib/es/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;
+};