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

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

@@ -1,61 +1,62 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable no-undef */
-import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import mapProps from '../../utils/proptypes';
+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/Marker';
+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';
 const LINE_STROKE_COLOR = 'rgba(48, 194, 255, 1)';
 const LINE_STROKE_COLOR_REDUCED = 'rgba(48, 194, 255, 0.5)';
 const BORDER_STROKE_COLOR_REDUCED = 'rgba(255, 255, 255, 0)';
+const DEFAULT_WIDTH = 5;
+const DEFAULT_BORDER_WIDTH = 2;
 const defaultStyle = {
-    width: 5,
+    width: DEFAULT_WIDTH,
     color: LINE_STROKE_COLOR,
-    borderWidth: 2,
+    borderWidth: DEFAULT_BORDER_WIDTH,
     borderColor: 'rgba(54, 144, 174, 1)',
     isBorderIncludedInWidth: false,
 };
 const alternativeRouteStyle = Object.assign(Object.assign({}, defaultStyle), { color: 'rgb(218,253,255)' });
-const Route = props => {
-    const { style, isReduced, isRouteAlternative, positions, startIcon, middleIcon, endIcon, arrowStyle, hasArrows, markers, eventListenerMap, } = props;
+const Route = (props) => {
+    const { style, isReduced = false, isRouteAlternative = false, positions, startIcon, middleIcon, endIcon, arrowStyle = {}, hasArrows = true, markers = [], eventListenerMap, } = props;
     const [lineString, setLineString] = useState();
     const [routeStyle, setRouteStyle] = useState();
-    const [borderStyle, setBorderStyle] = useState(defaultStyle.borderColor);
-    const [borderWidth, setBorderWidth] = useState(defaultStyle.borderWidth);
+    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);
-    }, [positions, style, isReduced, isRouteAlternative]);
-    const updateGeometry = pos => {
+    }, [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));
+        pos.forEach((singlePos) => lineStringData.pushLatLngAlt(singlePos.lat, singlePos.lng, 0));
         if (pos.length === 1) {
             const [position] = pos;
-            lineStringData.pushLatLngAlt(position.lat, position.lng);
+            lineStringData.pushLatLngAlt(position.lat, position.lng, 0);
         }
         setLineString(lineStringData);
     };
-    const updateStyle = (style, isReduced, isRouteAlternative) => {
-        const mergedStyle = Object.assign(Object.assign({}, (isRouteAlternative ? alternativeRouteStyle : defaultStyle)), style);
-        const { color, width, borderColor, borderWidth: mergedBorderWidth, isBorderIncludedInWidth, lineDash, } = mergedStyle;
-        setBorderWidth(isReduced ? 0 : mergedBorderWidth);
+    const updateStyle = (updatedStyle, isReducedStyle, isRouteAlternativeStyle) => {
+        const mergedStyle = Object.assign(Object.assign({}, (isRouteAlternativeStyle ? alternativeRouteStyle : defaultStyle)), updatedStyle);
+        const { color, 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(Object.assign({ strokeColor: isReduced ? LINE_STROKE_COLOR_REDUCED : color, lineWidth: isReduced ? mergedBorderWidth + width : width, lineCap: 'round', lineJoin: 'bevel' }, (lineDash && lineDash))));
+        setRouteStyle(new H.map.SpatialStyle(Object.assign({ strokeColor: isReducedStyle ? LINE_STROKE_COLOR_REDUCED : color, lineWidth: isReducedStyle ? mergedBorderWidth + width : width, lineCap: 'round', lineJoin: 'bevel' }, (lineDash && lineDash))));
         setBorderStyle(new H.map.SpatialStyle(Object.assign({ strokeColor: isReduced ? BORDER_STROKE_COLOR_REDUCED : borderColor, lineWidth: mergedBorderWidth + width, lineCap: 'round', lineJoin: 'bevel' }, (lineDash && lineDash))));
     };
     if (!lineString) {
@@ -63,32 +64,4 @@ const Route = props => {
     }
     return (_jsxs("div", { children: [borderWidth > 0 && (_jsx(Polyline, { eventListenerMap: eventListenerMap, geometry: lineString, style: borderStyle })), _jsx(Polyline, { hasArrows: hasArrows, arrowStyle: arrowStyle, eventListenerMap: eventListenerMap, geometry: lineString, style: routeStyle }), 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)] }));
 };
-Route.defaultProps = {
-    hasArrows: true,
-    arrowStyle: {},
-    isReduced: false,
-    isRouteAlternative: false,
-    markers: [],
-};
-Route.propTypes = {
-    arrowStyle: PropTypes.object,
-    hasArrows: PropTypes.bool,
-    positions: mapProps.positions.isRequired,
-    style: PropTypes.shape({
-        width: PropTypes.number,
-        color: PropTypes.string,
-        borderWidth: PropTypes.number,
-        borderColor: PropTypes.string,
-        isBorderIncludedInWidth: PropTypes.bool,
-        lineDash: PropTypes.arrayOf(PropTypes.number),
-    }),
-    eventListenerMap: PropTypes.object,
-    isReduced: PropTypes.bool,
-    isRouteAlternative: PropTypes.bool,
-    startIcon: mapProps.icon,
-    middleIcon: mapProps.icon,
-    endIcon: PropTypes.object,
-    markers: PropTypes.array,
-    api: mapProps.api,
-};
 export default Route;

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

@@ -1,21 +1,13 @@
+/// <reference types="heremaps" />
+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;
-declare function Circle({ position, radius, precision, style, eventListenerMap }: {
-    position: any;
-    radius?: number | undefined;
-    precision?: number | undefined;
-    style: any;
-    eventListenerMap: any;
-}): null;
-declare namespace Circle {
-    namespace propTypes {
-        const position: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
-            lat: PropTypes.Validator<number>;
-            lng: PropTypes.Validator<number>;
-        }>>>;
-        const eventListenerMap: PropTypes.Requireable<object>;
-        const style: PropTypes.Requireable<object>;
-        const radius: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-        const precision: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-    }
-}
-import PropTypes from "prop-types";

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

@@ -1,22 +1,22 @@
-/* eslint-disable no-undef */
-import { useContext, useState, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import mapProps from '../../../utils/proptypes';
-import { MapContext } from '../../context';
+import { useState, useEffect } from 'react';
+import { useMapContext } from '../../MapContext';
 import { useUpdateProp, useUpdateEventListenerMap } from '../../../utils/hooks';
-const Circle = ({ position, radius = 100, precision = 60, style, eventListenerMap }) => {
-    const { api } = useContext(MapContext);
+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: parseFloat(precision) });
+        var _a;
+        const newCircle = new H.map.Circle(position, radius, { style, precision });
         setCircle(newCircle);
-        api.map.addObject(newCircle);
+        (_a = api.map) === null || _a === void 0 ? void 0 : _a.addObject(newCircle);
         return () => {
-            if (api.map.getObjects().includes(newCircle)) {
-                api.map.removeObject(newCircle);
+            var _a, _b;
+            if ((_a = api.map) === null || _a === void 0 ? void 0 : _a.getObjects().includes(newCircle)) {
+                (_b = api.map) === null || _b === void 0 ? void 0 : _b.removeObject(newCircle);
             }
             newCircle.dispose();
         };
@@ -28,11 +28,4 @@ const Circle = ({ position, radius = 100, precision = 60, style, eventListenerMa
     useUpdateEventListenerMap(circle, eventListenerMap);
     return null;
 };
-Circle.propTypes = {
-    position: mapProps.position.isRequired,
-    eventListenerMap: PropTypes.object,
-    style: PropTypes.object,
-    radius: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    precision: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-};
 export default Circle;

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+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/components/map/components/features/basics/InfoBubble.js

@@ -0,0 +1,46 @@
+// @ts-ignore-next-line importsNotUsedAsValues
+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(() => {
+        var _a, _b;
+        let infoBubble;
+        if ((api === null || api === void 0 ? void 0 : api.map) && (api === null || api === void 0 ? void 0 : api.ui)) {
+            // Fix the position so the info bubble doesn't overlap the marker
+            const screenPosition = api.map.geoToScreen(position);
+            screenPosition.x += (_a = markerOffset === null || markerOffset === void 0 ? void 0 : markerOffset.x) !== null && _a !== void 0 ? _a : DEFAULT_OFFSET_X;
+            screenPosition.y += (_b = markerOffset === null || markerOffset === void 0 ? void 0 : markerOffset.y) !== null && _b !== void 0 ? _b : 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 () => {
+            var _a;
+            if (infoBubble) {
+                try {
+                    (_a = api === null || api === void 0 ? void 0 : api.ui) === null || _a === void 0 ? void 0 : _a.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/components/map/components/features/basics/Marker.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="heremaps" />
+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) => boolean;
+export declare const isDomMakerNeeded: (icon: MarkerIcon | H.map.DomIcon | undefined) => boolean;
+export declare const getOrCreateIcon: (icon: MarkerIcon | H.map.DomIcon | undefined) => H.map.DomIcon;
+export type MarkerProps = {
+    position: Position;
+    icon?: MarkerIcon;
+    eventListenerMap?: EventListenerMap;
+    customData?: object;
+    draggable?: boolean;
+};
+declare const Marker: (props: MarkerProps) => null;
+export default Marker;

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

@@ -0,0 +1,92 @@
+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) => {
+    var _a;
+    const { position, customData, icon, draggable, eventListenerMap } = props;
+    const MarkerConstructor = isDomMakerNeeded(icon) ? H.map.DomMarker : H.map.Marker;
+    const marker = new MarkerConstructor(position, {
+        icon: getOrCreateIcon(icon),
+    });
+    marker.setData(customData);
+    marker.draggable = !!draggable;
+    (_a = api.map) === null || _a === void 0 ? void 0 : _a.addObject(marker);
+    addEventListenerMap(marker, eventListenerMap, api.map);
+    return marker;
+};
+const destroyMarker = (marker, api) => {
+    var _a;
+    removeEventListenerMap(marker);
+    if ((_a = api.map) === null || _a === void 0 ? void 0 : _a.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/components/map/components/features/basics/Polygon.d.ts

@@ -1,17 +1,11 @@
+/// <reference types="heremaps" />
+import type { Position } from '../../../utils/mapTypes';
+import type { EventListenerMap } from '../../../utils/eventHandling';
+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;
-declare function Polygon({ points, style, eventListenerMap }: {
-    points: any;
-    style?: any;
-    eventListenerMap: any;
-}): null;
-declare namespace Polygon {
-    namespace propTypes {
-        const points: PropTypes.Validator<(PropTypes.InferProps<{
-            lat: PropTypes.Validator<number>;
-            lng: PropTypes.Validator<number>;
-        }> | null | undefined)[]>;
-        const style: PropTypes.Requireable<object>;
-        const eventListenerMap: PropTypes.Requireable<object>;
-    }
-}
-import PropTypes from "prop-types";

package/components/map/components/features/basics/Polygon.js

@@ -1,30 +1,30 @@
-/* eslint-disable no-undef */
-import { useState, useEffect, useContext } from 'react';
-import PropTypes from 'prop-types';
+import { useState, useEffect } from 'react';
 import isNil from 'lodash/fp/isNil';
-import mapProps from '../../../utils/proptypes';
-import { MapContext } from '../../context';
+import { useMapContext } from '../../MapContext';
 import { useUpdateProp, useUpdateEventListenerMap } from '../../../utils/hooks';
-function createGeometry(points) {
+const createGeometry = (points) => {
     const lineString = new H.geo.LineString();
     points.forEach(p => {
-        if (isNil(p.lat) || isNil(p.lng) || isNaN(p.lat) || isNaN(p.lng)) {
+        if (isNil(p.lat) || isNil(p.lng) || Number.isNaN(p.lat) || Number.isNaN(p.lng)) {
             return;
         }
-        lineString.pushLatLngAlt(p.lat, p.lng);
+        lineString.pushLatLngAlt(p.lat, p.lng, 0);
     });
     return new H.geo.Polygon(lineString);
-}
-const Polygon = ({ points, style = H.map.SpatialStyle.DEFAULT_STYLE, eventListenerMap }) => {
-    const { api } = useContext(MapContext);
+};
+const Polygon = (props) => {
+    const { points, style = H.map.SpatialStyle.DEFAULT_STYLE, eventListenerMap } = props;
+    const { api } = useMapContext();
     const [polygon, setPolygon] = useState();
     useEffect(() => {
+        var _a;
         const newPolygon = new H.map.Polygon(createGeometry(points), { style });
-        api.map.addObject(newPolygon);
+        (_a = api.map) === null || _a === void 0 ? void 0 : _a.addObject(newPolygon);
         setPolygon(newPolygon);
         return () => {
-            if (api.map.getObjects().includes(newPolygon)) {
-                api.map.removeObject(newPolygon);
+            var _a, _b;
+            if ((_a = api.map) === null || _a === void 0 ? void 0 : _a.getObjects().includes(newPolygon)) {
+                (_b = api.map) === null || _b === void 0 ? void 0 : _b.removeObject(newPolygon);
             }
             newPolygon.dispose();
         };
@@ -38,9 +38,4 @@ const Polygon = ({ points, style = H.map.SpatialStyle.DEFAULT_STYLE, eventListen
     useUpdateEventListenerMap(polygon, eventListenerMap);
     return null;
 };
-Polygon.propTypes = {
-    points: mapProps.positions.isRequired,
-    style: PropTypes.object,
-    eventListenerMap: PropTypes.object,
-};
 export default Polygon;

package/components/map/components/features/basics/Polyline.d.ts

@@ -1,20 +1,13 @@
-export const MISSING_GEOMETRY_PROPS_EXCEPTION_MSG: "Error in Polyline: Polyline without geometry makes no sense";
-export const WRONG_GEOMETRY_PROPS_EXCEPTION_MSG: "Error in Polyline: property geometry must be of type H.geo.LineString";
+/// <reference types="heremaps" />
+import { type EventListenerMap } from '../../../utils/eventHandling';
+export declare const MISSING_GEOMETRY_PROPS_EXCEPTION_MSG = "Error in Polyline: Polyline without geometry makes no sense";
+export declare const WRONG_GEOMETRY_PROPS_EXCEPTION_MSG = "Error in Polyline: property geometry must be of type H.geo.LineString";
+export type PolylineProps = {
+    hasArrows?: boolean;
+    arrowStyle?: object;
+    geometry: H.geo.LineString;
+    style?: H.map.SpatialStyle;
+    eventListenerMap?: EventListenerMap;
+};
+declare const Polyline: (props: PolylineProps) => null;
 export default Polyline;
-declare function Polyline({ geometry, hasArrows, arrowStyle, style, eventListenerMap }: {
-    geometry: any;
-    hasArrows: any;
-    arrowStyle: any;
-    style?: any;
-    eventListenerMap: any;
-}): null;
-declare namespace Polyline {
-    namespace propTypes {
-        const hasArrows: PropTypes.Requireable<boolean>;
-        const arrowStyle: PropTypes.Requireable<object>;
-        const geometry: PropTypes.Validator<any>;
-        const style: PropTypes.Requireable<any>;
-        const eventListenerMap: PropTypes.Requireable<object>;
-    }
-}
-import PropTypes from "prop-types";

package/components/map/components/features/basics/Polyline.js

@@ -1,14 +1,14 @@
-/* eslint-disable no-undef */
-import { useState, useEffect, useContext } from 'react';
-import PropTypes from 'prop-types';
-import { MapContext } from '../../context';
+import { useState, useEffect } from 'react';
+import { useMapContext } from '../../MapContext';
 import MapException from '../../../exceptions/MapException';
 import { useUpdateEventListenerMap } from '../../../utils/hooks';
 import { removeEventListenerMap } from '../../../utils/eventHandling';
+import { isVectorBased } from '../../../utils/rendering';
 export const MISSING_GEOMETRY_PROPS_EXCEPTION_MSG = 'Error in Polyline: Polyline without geometry makes no sense';
 export const WRONG_GEOMETRY_PROPS_EXCEPTION_MSG = 'Error in Polyline: property geometry must be of type H.geo.LineString';
-const Polyline = ({ geometry, hasArrows, arrowStyle, style = H.map.SpatialStyle.DEFAULT_STYLE, eventListenerMap }) => {
-    const { api } = useContext(MapContext);
+const Polyline = (props) => {
+    const { geometry, hasArrows, arrowStyle, style = H.map.SpatialStyle.DEFAULT_STYLE, eventListenerMap } = props;
+    const { api, enableWebGL, baseLayer } = useMapContext();
     const [polyline, setPolyline] = useState();
     if (!geometry) {
         throw new MapException(MISSING_GEOMETRY_PROPS_EXCEPTION_MSG);
@@ -17,17 +17,25 @@ const Polyline = ({ geometry, hasArrows, arrowStyle, style = H.map.SpatialStyle.
         throw new MapException(WRONG_GEOMETRY_PROPS_EXCEPTION_MSG);
     }
     useEffect(() => {
+        var _a;
         const lineGroup = new H.map.Group();
         const line = new H.map.Polyline(geometry, { style });
         if (hasArrows) {
             let routeArrows;
-            if (api.settings.enableWebGL) {
-                // Create a patterned polyline
-                const arrowLineStyle = new H.map.SpatialStyle(Object.assign(Object.assign({}, arrowStyle), { lineWidth: 10, strokeColor: 'rgba(0, 0, 0, 0.8)', lineDash: [0, 3], lineDashOffset: 1.6, lineTailCap: 'arrow-tail', lineHeadCap: 'arrow-head' }));
-                routeArrows = new H.map.Polyline(geometry, { style: arrowLineStyle });
+            if (isVectorBased(enableWebGL, baseLayer)) {
+                // WebGL way - Create a patterned polyline
+                routeArrows = new H.map.Polyline(geometry, {
+                    style: {
+                        strokeColor: 'rgba(42, 55, 64, 1)',
+                        lineWidth: 5,
+                        lineDash: [1.8, 4],
+                        // @ts-ignore-next-line - the types are outdated here
+                        lineDashImage: H.map.SpatialStyle.DashImage.ARROW,
+                    },
+                });
             }
             else {
-                // Non WebGL way - Create a patterned polyline
+                // Pixel map way - Create a patterned polyline
                 const defaultArrowStyle = {
                     lineWidth: 2,
                     fillColor: 'rgba(42, 55, 64, 1)',
@@ -49,15 +57,16 @@ const Polyline = ({ geometry, hasArrows, arrowStyle, style = H.map.SpatialStyle.
         else {
             lineGroup.addObjects([line]);
         }
-        api.map.addObject(lineGroup);
+        (_a = api.map) === null || _a === void 0 ? void 0 : _a.addObject(lineGroup);
         setPolyline(lineGroup);
         return () => {
+            var _a;
             removeEventListenerMap(lineGroup);
             lineGroup.forEach(singleLine => {
                 lineGroup.removeObject(singleLine);
                 singleLine.dispose();
             });
-            if (api.map.getObjects().includes(lineGroup)) {
+            if ((_a = api.map) === null || _a === void 0 ? void 0 : _a.getObjects().includes(lineGroup)) {
                 api.map.removeObject(lineGroup);
             }
             lineGroup.dispose();
@@ -66,11 +75,4 @@ const Polyline = ({ geometry, hasArrows, arrowStyle, style = H.map.SpatialStyle.
     useUpdateEventListenerMap(polyline, eventListenerMap);
     return null;
 };
-Polyline.propTypes = {
-    hasArrows: PropTypes.bool,
-    arrowStyle: PropTypes.object,
-    geometry: PropTypes.oneOfType([PropTypes.instanceOf(H.geo.LineString)]).isRequired,
-    style: PropTypes.instanceOf(H.map.SpatialStyle),
-    eventListenerMap: PropTypes.object,
-};
 export default Polyline;

package/components/map/components/features/basics/TextMarker.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import Marker from './Marker';
+import type { Position } from '../../../utils/mapTypes';
+export declare const emptyTextException = "Error in TextMarker: TextMarker without text makes no sense";
+export declare const wrongTypeException = "Error in TextMarker: property text must be string type";
+export type TextMarkerProps = React.ComponentProps<typeof Marker> & {
+    position: Position;
+    text: string;
+};
+declare const TextMarker: (props: TextMarkerProps) => import("react/jsx-runtime").JSX.Element;
+export default TextMarker;

package/components/map/components/features/basics/TextMarker.js

@@ -0,0 +1,12 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
+import Marker from './Marker';
+export const emptyTextException = 'Error in TextMarker: TextMarker without text makes no sense';
+export const wrongTypeException = 'Error in TextMarker: property text must be string type';
+const TextMarker = (props) => {
+    const { text } = props, remainingProps = __rest(props, ["text"]);
+    return (_jsx(Marker, Object.assign({}, remainingProps, { icon: _jsx("div", Object.assign({ className: 'bg-white padding-x-10 padding-y-5 rounded border border-color-light shadow-default user-select-none cursor-default' }, { children: text })) })));
+};
+export default TextMarker;

package/components/map/components/features/basics/marker/DomMarker.d.ts

@@ -1,7 +1,7 @@
 export default DomMarker;
 declare class DomMarker extends React.Component<any, any, any> {
     constructor(props: any, context: any);
-    marker: any;
+    marker: H.map.DomMarker;
     UNSAFE_componentWillReceiveProps(nextProps: any): void;
     shouldComponentUpdate(): boolean;
     componentWillUnmount(): void;
@@ -11,10 +11,10 @@ declare class DomMarker extends React.Component<any, any, any> {
 declare namespace DomMarker {
     namespace contextTypes {
         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>>;
         }>>;
     }
     namespace propTypes {

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

@@ -1,4 +1,4 @@
-export function getOrCreateIcon(icon: any): any;
+export function getOrCreateIcon(icon: any): H.map.DomIcon | undefined;
 export function isHMapIcon(icon: any): boolean;
 export function isDomMakerNeeded(icon: any): boolean;
 export default Marker;
@@ -12,7 +12,7 @@ declare namespace Marker {
             lat: PropTypes.Validator<number>;
             lng: PropTypes.Validator<number>;
         }> | null | undefined)[] | null | undefined>>>;
-        const icon: PropTypes.Requireable<any>;
+        const icon: PropTypes.Requireable<H.map.DomIcon>;
         const eventListenerMap: PropTypes.Requireable<object>;
         const customData: PropTypes.Requireable<object>;
         const draggable: PropTypes.Requireable<boolean>;