@rio-cloud/rio-uikit 1.10.1 → 1.12.0

package/src/components/map/components/features/ContextMenu.js

@@ -0,0 +1,148 @@
+/* eslint-disable no-undef */
+import { useRef, useLayoutEffect } from 'react';
+import isEmpty from 'lodash/fp/isEmpty';
+import noop from 'lodash/fp/noop';
+import { useMapContext } from '../MapContext';
+const HERE_ITEM_CLASS = 'H_context_menu_item';
+const centeredSpinner = 
+// eslint-disable-next-line max-len
+'<svg aria-labelledby="ggtrwic-aria" role="img" height="14" width="135px" class="ContentLoader  use-mix-blend-mode"><title id="ggtrwic-aria">Loading...</title><rect role="presentation" x="0" y="0" width="100%" height="100%" clip-path="url(#ggtrwic-diff)" style="fill: url(&quot;#ggtrwic-animated-diff&quot;);"></rect><defs><clipPath id="ggtrwic-diff"><rect width="100%" height="100%" rx="3" ry="3"></rect></clipPath><linearGradient id="ggtrwic-animated-diff"><stop offset="0%" stop-color="#f5f6f7" stop-opacity="1"><animate attributeName="offset" values="-2; -2; 1" keyTimes="0; 0.25; 1" dur="2s" repeatCount="indefinite"></animate></stop><stop offset="50%" stop-color="#aaaaaa" stop-opacity="1"><animate attributeName="offset" values="-1; -1; 2" keyTimes="0; 0.25; 1" dur="2s" repeatCount="indefinite"></animate></stop><stop offset="100%" stop-color="#f5f6f7" stop-opacity="1"><animate attributeName="offset" values="0; 0; 3" keyTimes="0; 0.25; 1" dur="2s" repeatCount="indefinite"></animate></stop></linearGradient></defs></svg>';
+const getDOMMenuItems = () => [...document.getElementsByClassName(HERE_ITEM_CLASS)];
+// Query DOM nodes for "H_context_menu_item" and update label when children label has changed.
+// This function allows to use HTML markup for the menu items in the second render
+const updateMenuItemLabels = (nodes, items) => {
+    // setTimeout(() => {
+    Array.from(nodes).forEach((itemNode, index) => {
+        const item = items[index];
+        if (!item) {
+            return;
+        }
+        const { hasSpinner, className, labelClassName = '', icon, label } = item.props;
+        const contentLabel = `<span class="${labelClassName}">${label}</span>`;
+        const labelWithIcon = `<span class="rioglyph ${icon} margin-right-5"></span>${contentLabel}`;
+        const content = icon ? labelWithIcon : contentLabel;
+        if (hasSpinner) {
+            itemNode.innerHTML = centeredSpinner;
+        }
+        else {
+            itemNode.innerHTML = content;
+        }
+        const wrapperClassList = itemNode.classList;
+        // Since classList.add() does not allow for space separated multiple classes, we have to add them separately
+        if (className) {
+            className.split(' ').map((singleClassName) => wrapperClassList.add(singleClassName));
+        }
+    });
+    // }, 0);
+};
+const addItemsToEvent = (items, event, map, targetPosition) => {
+    const amount = items.length - 1;
+    // FIXME: The imported typing is wrong and according to
+    // https://www.here.com/docs/bundle/maps-api-for-javascript-api-reference/page/H.mapevents.ContextMenuEvent.html#viewportX
+    // it is a number
+    const viewportX = event.viewportX;
+    // Get geo coordinates from the screen coordinates or use a fixed set to be returned when
+    // clicking the menu item.
+    const coord = targetPosition || map.screenToGeo(viewportX, event.viewportY);
+    items.map((item, index) => {
+        if (!item) {
+            return;
+        }
+        const { label, disabled, callback = noop } = item.props;
+        // @ts-ignore next-line FIXME: event.items is defined in the API but the imported types are wrong
+        event.items.push(new H.util.ContextItem({
+            label,
+            disabled,
+            callback: () => callback(coord),
+        }));
+        // add separator but for last element
+        if (index < amount) {
+            // @ts-ignore next-line FIXME: event.items is defined in the API but the imported types are wrong
+            event.items.push(H.util.ContextItem.SEPARATOR);
+        }
+    });
+};
+export const isContextMenuEvent = (event) => event.type === 'contextmenu';
+// Depending on the click target, it may be the map itself or individual parts of the map layer.
+// To check if the context menu click happened on a marker or polygon or circle, we need to check where
+// the user has clicked.
+//
+// Some map layer sources may be:
+// source_layer: "buildings", "landuse", "pois", "roads", "water", "places"
+// source_name: 'H-107';
+export const isMapTarget = (event, map) => {
+    return event.target === map || event.target?.data?.source_name?.startsWith('H-');
+};
+const ContextMenu = (props) => {
+    const { onOpen = noop, menuItems, contextMenuEvent, targetPosition } = props;
+    const { api, baseLayer } = useMapContext();
+    const { map: hereMap } = api;
+    // Use a ref to store the target position used when a map object was clicked with a fixed
+    // position to return that position in the onOpen callback instead of the dynamic map position
+    const targetPositionRef = useRef();
+    targetPositionRef.current = targetPosition;
+    useLayoutEffect(() => {
+        if (menuItems && hereMap) {
+            // @ts-ignore next-line FIXME: event.items is defined in the API but the imported types are wrong
+            const hasNoEventItems = isEmpty(contextMenuEvent?.items);
+            // Add the context menu item to the target event and not to the map event itself
+            // as every element on the map need to have context menu items added to the event they
+            // are triggered from
+            if (contextMenuEvent && !isMapTarget(contextMenuEvent, hereMap) && hasNoEventItems) {
+                addItemsToEvent(menuItems, contextMenuEvent, hereMap, targetPositionRef.current);
+            }
+            updateMenuItemLabels(getDOMMenuItems(), menuItems);
+        }
+    }, [menuItems, contextMenuEvent, targetPositionRef.current]);
+    const handleMapContextMenu = (event) => {
+        if (!isContextMenuEvent(event) || !hereMap) {
+            return;
+        }
+        // "contextmenu" event might be triggered not only by a pointer,
+        // but a keyboard button as well. That's why ContextMenuEvent
+        // doesn't have a "currentPointer" property.
+        // Instead it has "viewportX" and "viewportY" properties
+        // for the associates position.
+        // Reset previous target positions when the map was clicked
+        if (isMapTarget(event, hereMap)) {
+            targetPositionRef.current = undefined;
+        }
+        // FIXME: The imported typing is wrong and according to
+        // https://www.here.com/docs/bundle/maps-api-for-javascript-api-reference/page/H.mapevents.ContextMenuEvent.html#viewportX
+        // it is a number
+        const viewportX = event.viewportX;
+        // Get geo coordinates from the screen coordinates.
+        const coord = targetPositionRef.current || hereMap?.screenToGeo(viewportX, event.viewportY);
+        if (coord) {
+            onOpen(coord);
+        }
+        // As we already handle contextmenu event callback on map object like markers separately,
+        // we don't do anything if target is different than the map.
+        if (!isMapTarget(event, hereMap)) {
+            return;
+        }
+        if (!menuItems) {
+            return;
+        }
+        // @ts-ignore next-line FIXME: event.items is defined in the API but the imported types are wrong
+        if (isEmpty(event.items)) {
+            addItemsToEvent(menuItems, event, hereMap, targetPosition);
+            updateMenuItemLabels(getDOMMenuItems(), menuItems);
+        }
+    };
+    // The contextmenu event handler has to be registered in any case to handle context menu events and to
+    // trigger the callback when the menu opens. Take care to remove and add the event listener when the
+    // base map layer changes as the map get re-initialized. Otherwise the context menu cannot be opened anymore
+    // when switching to another map view.
+    useLayoutEffect(() => {
+        if (!hereMap) {
+            return;
+        }
+        hereMap.addEventListener('contextmenu', handleMapContextMenu);
+        return () => {
+            hereMap.removeEventListener('contextmenu', handleMapContextMenu);
+        };
+    }, [baseLayer, hereMap]);
+    return null;
+};
+export default ContextMenu;

package/src/components/map/components/features/ContextMenuItem.d.ts

@@ -0,0 +1,12 @@
+import type { Position } from '../../utils/mapTypes';
+export type ContextMenuItemProps = {
+    label: string;
+    disabled?: boolean;
+    callback?: (position: Position) => void;
+    hasSpinner?: boolean;
+    icon?: string;
+    className?: string;
+    labelClassName?: string;
+};
+declare const ContextMenuItem: (props: ContextMenuItemProps) => H.util.ContextItem;
+export default ContextMenuItem;

package/src/components/map/components/features/ContextMenuItem.js

@@ -0,0 +1,15 @@
+import noop from 'lodash/fp/noop';
+const ContextMenuItem = (props) => {
+    // Note: not all defined props are passed to the Here ContextItem are used in ContextMenu component
+    const { label = '', disabled = false, callback = noop,
+    // hasSpinner = false,
+    // className = '',
+    // labelClassName = '',
+     } = props;
+    return new H.util.ContextItem({
+        label,
+        disabled,
+        callback: callback,
+    });
+};
+export default ContextMenuItem;

package/src/components/map/components/features/MapSettings.d.ts

@@ -0,0 +1,6 @@
+export type MapSettingsProps = {
+    options?: JSX.Element[];
+    className?: string;
+};
+declare const MapSettings: (props: MapSettingsProps) => import("react/jsx-runtime").JSX.Element;
+export default MapSettings;

package/src/components/map/components/features/MapSettings.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import classNames from 'classnames';
+import map from 'lodash/fp/map';
+import MapTypeSettings from './settings/builtinSettings/MapTypeSettings';
+import MapLayerSettings from './settings/builtinSettings/MapLayerSettings';
+import MapClusterSettings from './settings/builtinSettings/MapClusterSettings';
+import { useMapContext } from '../MapContext';
+const isMapTypeSettings = (option) => option.type === MapTypeSettings;
+const isMapLayerSettings = (option) => option.type === MapLayerSettings;
+const isMapClusterSettings = (option) => option.type === MapClusterSettings;
+const MapSettings = (props) => {
+    const { options, className = '' } = props;
+    const { baseLayer, activeLayers, showCluster, onMapTypeChange, onMapLayerChange, onShowClusterChange } = useMapContext();
+    const mapSettingsClasses = classNames('MapSettingsWrapper', className);
+    return (_jsx("div", { className: mapSettingsClasses, children: map(option => {
+            if (isMapTypeSettings(option)) {
+                return React.cloneElement(option, {
+                    key: option?.key ?? crypto.randomUUID(),
+                    mapType: baseLayer,
+                    onMapTypeChange,
+                });
+            }
+            if (isMapLayerSettings(option)) {
+                return React.cloneElement(option, {
+                    key: option?.key ?? crypto.randomUUID(),
+                    activeBuiltinLayers: activeLayers,
+                    onMapLayerChange,
+                });
+            }
+            if (isMapClusterSettings(option)) {
+                return React.cloneElement(option, {
+                    key: option?.key ?? crypto.randomUUID(),
+                    showCluster,
+                    onShowClusterChange,
+                });
+            }
+            return React.cloneElement(option, {
+                key: option?.key ?? `MapSettingsOption_${crypto.randomUUID()}`,
+            });
+        }, options) }));
+};
+export default MapSettings;

package/src/components/map/components/features/MapZoom.d.ts

@@ -0,0 +1,9 @@
+export type MapZoomProps = {
+    zoom?: number;
+    hideZoomButtons: boolean;
+    zoomAnimation: boolean;
+    onZoomIn: (zoom: number) => void;
+    onZoomOut: (zoom: number) => void;
+};
+declare const MapZoom: (props: MapZoomProps) => import("react/jsx-runtime").JSX.Element | null;
+export default MapZoom;

package/src/components/map/components/features/MapZoom.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import ZoomButtons from './settings/ZoomButtons';
+import { useMapContext } from '../MapContext';
+const MapZoom = (props) => {
+    const { zoom, hideZoomButtons, zoomAnimation, onZoomIn, onZoomOut } = props;
+    const { api } = useMapContext();
+    // Update Zoom from outside if value is different
+    useEffect(() => {
+        if (!api) {
+            return;
+        }
+        const currentMapZoom = api.utils?.getZoom();
+        if (zoom && currentMapZoom !== zoom) {
+            api.utils?.setZoom(zoom, zoomAnimation);
+        }
+    }, [zoom]);
+    const handleZoomIn = () => {
+        const currentZoom = api?.utils?.getZoom() ?? 0;
+        const newZoom = currentZoom + 1;
+        onZoomIn(newZoom);
+        api?.utils?.setZoom(newZoom, zoomAnimation);
+    };
+    const handleZoomOut = () => {
+        const currentZoom = api?.utils?.getZoom() ?? 0;
+        const newZoom = currentZoom - 1;
+        onZoomOut(newZoom);
+        api?.utils?.setZoom(newZoom, zoomAnimation);
+    };
+    if (hideZoomButtons) {
+        return null;
+    }
+    return _jsx(ZoomButtons, { onZoomIn: handleZoomIn, onZoomOut: handleZoomOut });
+};
+export default MapZoom;

package/src/components/map/components/features/Route.d.ts

@@ -0,0 +1,39 @@
+import { type ArrowStyle } from './basics/Polyline';
+import type { Position } from '../../utils/mapTypes';
+import type { EventListenerMap } from '../../utils/eventHandling';
+export declare const MISSING_POSITIONS_EXCEPTION_MSG = "Route requires a minimum of 1 positions";
+export declare const TO_LESS_LINE_WIDTH_EXCEPTION_MSG = "If isBorderIncludedInWidth is set to true than width has to be greater than twice of borderWidth";
+export declare const DEFAULT_LINE_STROKE_COLOR = "rgba(48, 194, 255, 1)";
+export declare const DEFAULT_LINE_STROKE_COLOR_REDUCED = "rgba(48, 194, 255, 0.5)";
+export declare const DEFAULT_LINE_STROKE_COLOR_ALTERNATIVE = "rgb(200, 243, 247)";
+export declare const DEFAULT_BORDER_STROKE_COLOR = "rgba(22, 100, 141, 1)";
+export declare const DEFAULT_BORDER_STROKE_COLOR_REDUCED = "rgba(255, 255, 255, 0)";
+export declare const ROUTE_COLOR_DANGER = "#e22837";
+export declare const ROUTE_COLOR_WARNING = "#ff8e3c";
+export declare const ROUTE_COLOR_SUCCESS = "#5cb85c";
+export declare const ROUTE_COLOR_WHITE = "rgba(255, 255, 255, 1)";
+export declare const ARROW_COLOR_WARNING = "rgba(167, 83, 25, 1)";
+export type RouteStyle = {
+    width?: number;
+    color?: string;
+    borderWidth?: number;
+    borderColor?: string;
+    isBorderIncludedInWidth?: boolean;
+    lineDash?: number[];
+};
+export type RouteProps = {
+    arrowStyle?: ArrowStyle;
+    hasArrows?: boolean;
+    positions: Position[];
+    style?: RouteStyle;
+    eventListenerMap?: EventListenerMap;
+    isReduced?: boolean;
+    isRouteAlternative?: boolean;
+    startIcon?: JSX.Element;
+    middleIcon?: JSX.Element;
+    endIcon?: JSX.Element;
+    markers?: JSX.Element[];
+    customData?: object;
+};
+declare const Route: (props: RouteProps) => import("react/jsx-runtime").JSX.Element | null;
+export default Route;

package/src/components/map/components/features/Route.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import isEmpty from 'lodash/fp/isEmpty';
+import isArray from 'lodash/fp/isArray';
+import Polyline from './basics/Polyline';
+import Marker from './basics/Marker';
+import MapException from '../../exceptions/MapException';
+export const MISSING_POSITIONS_EXCEPTION_MSG = 'Route requires a minimum of 1 positions';
+export const TO_LESS_LINE_WIDTH_EXCEPTION_MSG = 'If isBorderIncludedInWidth is set to true than width has to be greater than twice of borderWidth';
+export const DEFAULT_LINE_STROKE_COLOR = 'rgba(48, 194, 255, 1)';
+export const DEFAULT_LINE_STROKE_COLOR_REDUCED = 'rgba(48, 194, 255, 0.5)';
+export const DEFAULT_LINE_STROKE_COLOR_ALTERNATIVE = 'rgb(200, 243, 247)';
+export const DEFAULT_BORDER_STROKE_COLOR = 'rgba(22, 100, 141, 1)';
+export const DEFAULT_BORDER_STROKE_COLOR_REDUCED = 'rgba(255, 255, 255, 0)';
+// Both works, rgb or hex - keep in mind that these state colors may change
+// so use this constants instead of actual color values in the service
+export const ROUTE_COLOR_DANGER = '#e22837';
+export const ROUTE_COLOR_WARNING = '#ff8e3c';
+export const ROUTE_COLOR_SUCCESS = '#5cb85c';
+export const ROUTE_COLOR_WHITE = 'rgba(255, 255, 255, 1)';
+export const ARROW_COLOR_WARNING = 'rgba(167, 83, 25, 1)';
+const DEFAULT_WIDTH = 5;
+const DEFAULT_BORDER_WIDTH = 2;
+const defaultStyle = {
+    width: DEFAULT_WIDTH,
+    color: DEFAULT_LINE_STROKE_COLOR,
+    borderWidth: DEFAULT_BORDER_WIDTH,
+    borderColor: DEFAULT_BORDER_STROKE_COLOR,
+    isBorderIncludedInWidth: false,
+};
+const alternativeRouteStyle = {
+    ...defaultStyle,
+    color: DEFAULT_LINE_STROKE_COLOR_ALTERNATIVE,
+};
+const Route = (props) => {
+    const { style, isReduced = false, isRouteAlternative = false, positions, startIcon, middleIcon, endIcon, arrowStyle = {}, hasArrows = true, markers = [], customData, eventListenerMap, } = props;
+    const [lineString, setLineString] = useState();
+    const [routeStyle, setRouteStyle] = useState();
+    const [borderStyle, setBorderStyle] = useState();
+    const [borderWidth, setBorderWidth] = useState(DEFAULT_BORDER_WIDTH);
+    useEffect(() => {
+        updateGeometry(positions);
+        updateStyle(style, isReduced, isRouteAlternative);
+    }, []);
+    useEffect(() => {
+        updateGeometry(positions);
+    }, [positions]);
+    useEffect(() => {
+        updateStyle(style, isReduced, isRouteAlternative);
+    }, [style, isReduced, isRouteAlternative]);
+    const updateGeometry = (pos) => {
+        if (isEmpty(pos)) {
+            throw new MapException(MISSING_POSITIONS_EXCEPTION_MSG);
+        }
+        /* keep reference to shared geometry to prevent recalculation if other values than points change */
+        const lineStringData = new H.geo.LineString();
+        pos.forEach((singlePos) => lineStringData.pushLatLngAlt(singlePos.lat, singlePos.lng, 0));
+        if (pos.length === 1) {
+            const [position] = pos;
+            lineStringData.pushLatLngAlt(position.lat, position.lng, 0);
+        }
+        setLineString(lineStringData);
+    };
+    const updateStyle = (updatedStyle, isReducedStyle, isRouteAlternativeStyle) => {
+        const mergedStyle = {
+            ...(isRouteAlternativeStyle ? alternativeRouteStyle : defaultStyle),
+            ...updatedStyle,
+        };
+        const { color, width = DEFAULT_WIDTH, borderColor, borderWidth: mergedBorderWidth = 0, isBorderIncludedInWidth, lineDash, } = mergedStyle;
+        setBorderWidth(isReducedStyle ? 0 : mergedBorderWidth);
+        if (isBorderIncludedInWidth && mergedBorderWidth >= width) {
+            throw new MapException(TO_LESS_LINE_WIDTH_EXCEPTION_MSG);
+        }
+        setRouteStyle(new H.map.SpatialStyle({
+            strokeColor: isReducedStyle ? DEFAULT_LINE_STROKE_COLOR_REDUCED : color,
+            lineWidth: isReducedStyle ? mergedBorderWidth + width : width,
+            lineCap: 'round',
+            lineJoin: 'bevel',
+            ...(lineDash && { lineDash }),
+        }));
+        setBorderStyle(new H.map.SpatialStyle({
+            strokeColor: isReduced ? DEFAULT_BORDER_STROKE_COLOR_REDUCED : borderColor,
+            lineWidth: mergedBorderWidth + width,
+            lineCap: 'round',
+            lineJoin: 'bevel',
+            ...(lineDash && { lineDash }),
+        }));
+    };
+    if (!lineString) {
+        return null;
+    }
+    return (_jsxs("div", { children: [borderWidth > 0 && (_jsx(Polyline, { eventListenerMap: eventListenerMap, geometry: lineString, style: borderStyle, customData: customData })), _jsx(Polyline, { hasArrows: hasArrows, arrowStyle: arrowStyle, eventListenerMap: eventListenerMap, geometry: lineString, style: routeStyle, customData: customData }), startIcon && _jsx(Marker, { position: positions[0], icon: startIcon }, 'startIcon'), middleIcon && (_jsx(Marker, { position: positions[Math.floor(positions.length / 2)], icon: middleIcon }, 'middleIcon')), endIcon && _jsx(Marker, { position: positions[positions.length - 1], icon: endIcon }, 'endIcon'), isArray(markers) && markers.map(marker => marker)] }));
+};
+export default Route;

package/src/components/map/components/features/basics/Circle.d.ts

@@ -0,0 +1,12 @@
+import type { Position } from '../../../utils/mapTypes';
+import type { EventListenerMap } from '../../../utils/eventHandling';
+export type CirclePosition = Position & Record<string, any>;
+export type CircleProps = {
+    position: CirclePosition;
+    radius?: number;
+    precision?: number;
+    style?: H.map.SpatialStyle;
+    eventListenerMap?: EventListenerMap;
+};
+declare const Circle: (props: CircleProps) => null;
+export default Circle;

package/src/components/map/components/features/basics/Circle.js

@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+import { useMapContext } from '../../MapContext';
+import { useUpdateProp, useUpdateEventListenerMap } from '../../../utils/hooks';
+const Circle = (props) => {
+    const { position, radius = 100, precision = 60, style, eventListenerMap } = props;
+    const { api } = useMapContext();
+    const [circle, setCircle] = useState();
+    // Create a new circle and check for changes on the map itself.
+    // The map instance may change due to rendering changes like webgl vs raster.
+    // In this case, add the circle to the new map instance otherwise it will be gone.
+    useEffect(() => {
+        const newCircle = new H.map.Circle(position, radius, { style, precision });
+        setCircle(newCircle);
+        api.map?.addObject(newCircle);
+        return () => {
+            if (api.map?.getObjects().includes(newCircle)) {
+                api.map?.removeObject(newCircle);
+            }
+            newCircle.dispose();
+        };
+    }, [api.map]);
+    useUpdateProp(circle, 'setCenter', position);
+    useUpdateProp(circle, 'setStyle', style);
+    useUpdateProp(circle, 'setRadius', radius);
+    useUpdateProp(circle, 'setPrecision', precision);
+    useUpdateEventListenerMap(circle, eventListenerMap);
+    return null;
+};
+export default Circle;

package/src/components/map/components/features/basics/InfoBubble.d.ts

@@ -0,0 +1,13 @@
+import type { MapApi, Position } from '../../../utils/mapTypes';
+export type InfoBubbleProps = {
+    api: MapApi | undefined;
+    position: Position;
+    markerOffset?: {
+        x: number;
+        y: number;
+    };
+    content: string | JSX.Element | Node;
+    onClose?: () => void;
+};
+declare const InfoBubble: (props: InfoBubbleProps) => null;
+export default InfoBubble;

package/src/components/map/components/features/basics/InfoBubble.js

@@ -0,0 +1,44 @@
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
+import React, { useEffect } from 'react';
+import ReactDomServer from 'react-dom/server';
+import noop from 'lodash/fp/noop';
+// Default offset is defined according to the incidents layer marker
+const DEFAULT_OFFSET_X = 0;
+const DEFAULT_OFFSET_Y = 0;
+const InfoBubble = (props) => {
+    const { api, content, position, markerOffset, onClose = noop } = props;
+    const handleStateChange = (event) => {
+        if (event.target.getState() === 'closed') {
+            onClose();
+        }
+    };
+    useEffect(() => {
+        let infoBubble;
+        if (api?.map && api?.ui) {
+            // Fix the position so the info bubble doesn't overlap the marker
+            const screenPosition = api.map.geoToScreen(position);
+            screenPosition.x += markerOffset?.x ?? DEFAULT_OFFSET_X;
+            screenPosition.y += markerOffset?.y ?? DEFAULT_OFFSET_Y;
+            infoBubble = new H.ui.InfoBubble(api.map.screenToGeo(screenPosition.x, screenPosition.y), {
+                onStateChange: handleStateChange,
+                content: React.isValidElement(content)
+                    ? ReactDomServer.renderToStaticMarkup(content)
+                    : content,
+            });
+            api.ui.addBubble(infoBubble);
+        }
+        return () => {
+            if (infoBubble) {
+                try {
+                    api?.ui?.removeBubble(infoBubble);
+                }
+                catch (error) {
+                    // silence error that is cased when switching map types and the bubble cannot be removed
+                    // from the old map instance
+                }
+            }
+        };
+    }, [api]);
+    return null;
+};
+export default InfoBubble;

package/src/components/map/components/features/basics/Marker.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { type EventListenerMap } from '../../../utils/eventHandling';
+import type { Position } from '../../../utils/mapTypes';
+export type MarkerIcon = string | React.ReactElement;
+export declare const isHMapIcon: (icon: MarkerIcon | H.map.DomIcon | undefined) => icon is H.map.Icon;
+export declare const isDomMakerNeeded: (icon: MarkerIcon | H.map.DomIcon | undefined) => boolean;
+export declare const getOrCreateIcon: (icon: MarkerIcon | H.map.DomIcon | undefined) => H.map.DomIcon | H.map.Icon;
+export type MarkerProps = {
+    position: Position;
+    icon?: MarkerIcon;
+    eventListenerMap?: EventListenerMap;
+    customData?: object;
+    draggable?: boolean;
+};
+declare const Marker: (props: MarkerProps) => null;
+export default Marker;

package/src/components/map/components/features/basics/Marker.js

@@ -0,0 +1,90 @@
+import React, { useEffect, useRef } from 'react';
+import ReactDomServer from 'react-dom/server';
+import { addEventListenerMap, removeEventListenerMap } from '../../../utils/eventHandling';
+import { useMapContext } from '../../MapContext';
+export const isHMapIcon = (icon) => icon instanceof H.map.Icon;
+export const isDomMakerNeeded = (icon) => (!icon ? false : !isHMapIcon(icon));
+// Note:
+// H.map.Marker:    A "normal" marker that uses a static image as an icon.
+//                  Large numbers of markers of this types can be added to the map very quickly and efficiently.
+// H.map.Dom:       A marker which supports HTML (and SVG) content, which can be dynamic.
+//                  Markers of this type are best displayed individually or in small sets.
+// It is also important to note that Markers and DomMarkers are rendered in separate rendering steps.
+// Markers are rendered in the map scene and therefore appear behind any DomMarkers which are rendered
+// as an overlay on top of the map.
+export const getOrCreateIcon = (icon) => {
+    if (isHMapIcon(icon) || icon instanceof H.map.DomIcon) {
+        return icon || '';
+    }
+    const renderedIcon = React.isValidElement(icon) ? ReactDomServer.renderToStaticMarkup(icon) : icon;
+    return new H.map.DomIcon(renderedIcon);
+};
+const setupMarker = (props, api) => {
+    const { position, customData, icon, draggable, eventListenerMap } = props;
+    const MarkerConstructor = isDomMakerNeeded(icon) ? H.map.DomMarker : H.map.Marker;
+    const marker = new MarkerConstructor(position, {
+        icon: icon && getOrCreateIcon(icon),
+    });
+    marker.setData(customData);
+    marker.draggable = !!draggable;
+    api.map?.addObject(marker);
+    addEventListenerMap(marker, eventListenerMap, api.map);
+    return marker;
+};
+const destroyMarker = (marker, api) => {
+    removeEventListenerMap(marker);
+    if (api.map?.getObjects().includes(marker)) {
+        api.map.removeObject(marker);
+    }
+    marker.dispose();
+};
+const Marker = (props) => {
+    const { position, customData, icon, eventListenerMap } = props;
+    const { api } = useMapContext();
+    const markerRef = useRef();
+    useEffect(() => {
+        markerRef.current = setupMarker(props, api);
+        return () => {
+            if (markerRef.current) {
+                destroyMarker(markerRef.current, api);
+                markerRef.current = undefined;
+            }
+        };
+    }, []);
+    // Update marker position
+    useEffect(() => {
+        if (markerRef.current) {
+            markerRef.current.setGeometry(position);
+        }
+    }, [position, markerRef.current]);
+    // Update marker custom data
+    useEffect(() => {
+        if (markerRef.current) {
+            markerRef.current.setData(customData);
+        }
+    }, [customData, markerRef.current]);
+    // Update EventListenerMap
+    useEffect(() => {
+        if (markerRef.current) {
+            // use exports to make methods accessible for stubbing
+            const mapApi = removeEventListenerMap(markerRef.current);
+            addEventListenerMap(markerRef.current, eventListenerMap, mapApi);
+        }
+    }, [eventListenerMap, markerRef.current]);
+    // If icon type changed, we need to change the marker type
+    useEffect(() => {
+        if (!(markerRef.current && icon)) {
+            return;
+        }
+        if (isDomMakerNeeded(icon)) {
+            destroyMarker(markerRef.current, api);
+            markerRef.current = setupMarker(props, api);
+        }
+        else {
+            const domIcon = getOrCreateIcon(icon);
+            domIcon && markerRef.current.setIcon(domIcon);
+        }
+    }, [icon, markerRef.current]);
+    return null;
+};
+export default Marker;

package/src/components/map/components/features/basics/Polygon.d.ts

@@ -0,0 +1,11 @@
+import type { Position } from '../../../utils/mapTypes';
+import type { EventListenerMap } from '../../../utils/eventHandling';
+export { colorMapColdplay, colorMapWarmup, colorMapGray, colorMapBrand, colorMapStatus, colorMapMarker, colorMapRating, colorMapHighlight, } from './polygonColors';
+export type PolygonPoints = Position[] & Record<string, any>;
+export type PolygonProps = {
+    points: PolygonPoints;
+    style?: H.map.SpatialStyle;
+    eventListenerMap?: EventListenerMap;
+};
+declare const Polygon: (props: PolygonProps) => null;
+export default Polygon;