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

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

@@ -3,63 +3,64 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TO_LESS_LINE_WIDTH_EXCEPTION_MSG = exports.MISSING_POSITIONS_EXCEPTION_MSG = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable no-undef */
-const react_1 = tslib_1.__importStar(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
-const proptypes_1 = tslib_1.__importDefault(require("../../utils/proptypes"));
+const react_1 = require("react");
 const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
 const isArray_1 = tslib_1.__importDefault(require("lodash/fp/isArray"));
 const Polyline_1 = tslib_1.__importDefault(require("./basics/Polyline"));
-const Marker_1 = tslib_1.__importDefault(require("./basics/marker/Marker"));
+const Marker_1 = tslib_1.__importDefault(require("./basics/Marker"));
 const MapException_1 = tslib_1.__importDefault(require("../../exceptions/MapException"));
 exports.MISSING_POSITIONS_EXCEPTION_MSG = 'Route requires a minimum of 1 positions';
 exports.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] = (0, react_1.useState)();
     const [routeStyle, setRouteStyle] = (0, react_1.useState)();
-    const [borderStyle, setBorderStyle] = (0, react_1.useState)(defaultStyle.borderColor);
-    const [borderWidth, setBorderWidth] = (0, react_1.useState)(defaultStyle.borderWidth);
+    const [borderStyle, setBorderStyle] = (0, react_1.useState)();
+    const [borderWidth, setBorderWidth] = (0, react_1.useState)(DEFAULT_BORDER_WIDTH);
     (0, react_1.useEffect)(() => {
         updateGeometry(positions);
         updateStyle(style, isReduced, isRouteAlternative);
     }, []);
     (0, react_1.useEffect)(() => {
         updateGeometry(positions);
+    }, [positions]);
+    (0, react_1.useEffect)(() => {
         updateStyle(style, isReduced, isRouteAlternative);
-    }, [positions, style, isReduced, isRouteAlternative]);
-    const updateGeometry = pos => {
+    }, [style, isReduced, isRouteAlternative]);
+    const updateGeometry = (pos) => {
         if ((0, isEmpty_1.default)(pos)) {
             throw new MapException_1.default(exports.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_1.default(exports.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) {
@@ -67,32 +68,4 @@ const Route = props => {
     }
     return ((0, jsx_runtime_1.jsxs)("div", { children: [borderWidth > 0 && ((0, jsx_runtime_1.jsx)(Polyline_1.default, { eventListenerMap: eventListenerMap, geometry: lineString, style: borderStyle })), (0, jsx_runtime_1.jsx)(Polyline_1.default, { hasArrows: hasArrows, arrowStyle: arrowStyle, eventListenerMap: eventListenerMap, geometry: lineString, style: routeStyle }), startIcon && (0, jsx_runtime_1.jsx)(Marker_1.default, { position: positions[0], icon: startIcon }, 'startIcon'), middleIcon && ((0, jsx_runtime_1.jsx)(Marker_1.default, { position: positions[Math.floor(positions.length / 2)], icon: middleIcon }, 'middleIcon')), endIcon && (0, jsx_runtime_1.jsx)(Marker_1.default, { position: positions[positions.length - 1], icon: endIcon }, 'endIcon'), (0, isArray_1.default)(markers) && markers.map(marker => marker)] }));
 };
-Route.defaultProps = {
-    hasArrows: true,
-    arrowStyle: {},
-    isReduced: false,
-    isRouteAlternative: false,
-    markers: [],
-};
-Route.propTypes = {
-    arrowStyle: prop_types_1.default.object,
-    hasArrows: prop_types_1.default.bool,
-    positions: proptypes_1.default.positions.isRequired,
-    style: prop_types_1.default.shape({
-        width: prop_types_1.default.number,
-        color: prop_types_1.default.string,
-        borderWidth: prop_types_1.default.number,
-        borderColor: prop_types_1.default.string,
-        isBorderIncludedInWidth: prop_types_1.default.bool,
-        lineDash: prop_types_1.default.arrayOf(prop_types_1.default.number),
-    }),
-    eventListenerMap: prop_types_1.default.object,
-    isReduced: prop_types_1.default.bool,
-    isRouteAlternative: prop_types_1.default.bool,
-    startIcon: proptypes_1.default.icon,
-    middleIcon: proptypes_1.default.icon,
-    endIcon: prop_types_1.default.object,
-    markers: prop_types_1.default.array,
-    api: proptypes_1.default.api,
-};
 exports.default = Route;

package/lib/es/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/lib/es/components/map/components/features/basics/Circle.js

@@ -1,25 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-/* eslint-disable no-undef */
 const react_1 = require("react");
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
-const proptypes_1 = tslib_1.__importDefault(require("../../../utils/proptypes"));
-const context_1 = require("../../context");
+const MapContext_1 = require("../../MapContext");
 const hooks_1 = require("../../../utils/hooks");
-const Circle = ({ position, radius = 100, precision = 60, style, eventListenerMap }) => {
-    const { api } = (0, react_1.useContext)(context_1.MapContext);
+const Circle = (props) => {
+    const { position, radius = 100, precision = 60, style, eventListenerMap } = props;
+    const { api } = (0, MapContext_1.useMapContext)();
     const [circle, setCircle] = (0, react_1.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.
     (0, react_1.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();
         };
@@ -31,11 +30,4 @@ const Circle = ({ position, radius = 100, precision = 60, style, eventListenerMa
     (0, hooks_1.useUpdateEventListenerMap)(circle, eventListenerMap);
     return null;
 };
-Circle.propTypes = {
-    position: proptypes_1.default.position.isRequired,
-    eventListenerMap: prop_types_1.default.object,
-    style: prop_types_1.default.object,
-    radius: prop_types_1.default.oneOfType([prop_types_1.default.number, prop_types_1.default.string]),
-    precision: prop_types_1.default.oneOfType([prop_types_1.default.number, prop_types_1.default.string]),
-};
 exports.default = Circle;

package/lib/es/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/lib/es/components/map/components/features/basics/InfoBubble.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+// @ts-ignore-next-line importsNotUsedAsValues
+const react_1 = tslib_1.__importStar(require("react"));
+const server_1 = tslib_1.__importDefault(require("react-dom/server"));
+const noop_1 = tslib_1.__importDefault(require("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_1.default } = props;
+    const handleStateChange = (event) => {
+        if (event.target.getState() === 'closed') {
+            onClose();
+        }
+    };
+    (0, react_1.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_1.default.isValidElement(content)
+                    ? server_1.default.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;
+};
+exports.default = InfoBubble;

package/lib/es/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/lib/es/components/map/components/features/basics/Marker.js

@@ -0,0 +1,99 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getOrCreateIcon = exports.isDomMakerNeeded = exports.isHMapIcon = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const server_1 = tslib_1.__importDefault(require("react-dom/server"));
+const eventHandling_1 = require("../../../utils/eventHandling");
+const MapContext_1 = require("../../MapContext");
+const isHMapIcon = (icon) => icon instanceof H.map.Icon;
+exports.isHMapIcon = isHMapIcon;
+const isDomMakerNeeded = (icon) => (!icon ? false : !(0, exports.isHMapIcon)(icon));
+exports.isDomMakerNeeded = isDomMakerNeeded;
+// 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.
+const getOrCreateIcon = (icon) => {
+    if ((0, exports.isHMapIcon)(icon) || icon instanceof H.map.DomIcon) {
+        return icon || '';
+    }
+    const renderedIcon = react_1.default.isValidElement(icon) ? server_1.default.renderToStaticMarkup(icon) : icon;
+    return new H.map.DomIcon(renderedIcon);
+};
+exports.getOrCreateIcon = getOrCreateIcon;
+const setupMarker = (props, api) => {
+    var _a;
+    const { position, customData, icon, draggable, eventListenerMap } = props;
+    const MarkerConstructor = (0, exports.isDomMakerNeeded)(icon) ? H.map.DomMarker : H.map.Marker;
+    const marker = new MarkerConstructor(position, {
+        icon: (0, exports.getOrCreateIcon)(icon),
+    });
+    marker.setData(customData);
+    marker.draggable = !!draggable;
+    (_a = api.map) === null || _a === void 0 ? void 0 : _a.addObject(marker);
+    (0, eventHandling_1.addEventListenerMap)(marker, eventListenerMap, api.map);
+    return marker;
+};
+const destroyMarker = (marker, api) => {
+    var _a;
+    (0, eventHandling_1.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 } = (0, MapContext_1.useMapContext)();
+    const markerRef = (0, react_1.useRef)();
+    (0, react_1.useEffect)(() => {
+        markerRef.current = setupMarker(props, api);
+        return () => {
+            if (markerRef.current) {
+                destroyMarker(markerRef.current, api);
+                markerRef.current = undefined;
+            }
+        };
+    }, []);
+    // Update marker position
+    (0, react_1.useEffect)(() => {
+        if (markerRef.current) {
+            markerRef.current.setGeometry(position);
+        }
+    }, [position, markerRef.current]);
+    // Update marker custom data
+    (0, react_1.useEffect)(() => {
+        if (markerRef.current) {
+            markerRef.current.setData(customData);
+        }
+    }, [customData, markerRef.current]);
+    // Update EventListenerMap
+    (0, react_1.useEffect)(() => {
+        if (markerRef.current) {
+            // use exports to make methods accessible for stubbing
+            const mapApi = (0, eventHandling_1.removeEventListenerMap)(markerRef.current);
+            (0, eventHandling_1.addEventListenerMap)(markerRef.current, eventListenerMap, mapApi);
+        }
+    }, [eventListenerMap, markerRef.current]);
+    // If icon type changed, we need to change the marker type
+    (0, react_1.useEffect)(() => {
+        if (!(markerRef.current && icon)) {
+            return;
+        }
+        if ((0, exports.isDomMakerNeeded)(icon)) {
+            destroyMarker(markerRef.current, api);
+            markerRef.current = setupMarker(props, api);
+        }
+        else {
+            const domIcon = (0, exports.getOrCreateIcon)(icon);
+            domIcon && markerRef.current.setIcon(domIcon);
+        }
+    }, [icon, markerRef.current]);
+    return null;
+};
+exports.default = Marker;

package/lib/es/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/lib/es/components/map/components/features/basics/Polygon.js

@@ -1,33 +1,33 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-/* eslint-disable no-undef */
 const react_1 = require("react");
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
 const isNil_1 = tslib_1.__importDefault(require("lodash/fp/isNil"));
-const proptypes_1 = tslib_1.__importDefault(require("../../../utils/proptypes"));
-const context_1 = require("../../context");
+const MapContext_1 = require("../../MapContext");
 const hooks_1 = require("../../../utils/hooks");
-function createGeometry(points) {
+const createGeometry = (points) => {
     const lineString = new H.geo.LineString();
     points.forEach(p => {
-        if ((0, isNil_1.default)(p.lat) || (0, isNil_1.default)(p.lng) || isNaN(p.lat) || isNaN(p.lng)) {
+        if ((0, isNil_1.default)(p.lat) || (0, isNil_1.default)(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 } = (0, react_1.useContext)(context_1.MapContext);
+};
+const Polygon = (props) => {
+    const { points, style = H.map.SpatialStyle.DEFAULT_STYLE, eventListenerMap } = props;
+    const { api } = (0, MapContext_1.useMapContext)();
     const [polygon, setPolygon] = (0, react_1.useState)();
     (0, react_1.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();
         };
@@ -41,9 +41,4 @@ const Polygon = ({ points, style = H.map.SpatialStyle.DEFAULT_STYLE, eventListen
     (0, hooks_1.useUpdateEventListenerMap)(polygon, eventListenerMap);
     return null;
 };
-Polygon.propTypes = {
-    points: proptypes_1.default.positions.isRequired,
-    style: prop_types_1.default.object,
-    eventListenerMap: prop_types_1.default.object,
-};
 exports.default = Polygon;

package/lib/es/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/lib/es/components/map/components/features/basics/Polyline.js

@@ -2,17 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.WRONG_GEOMETRY_PROPS_EXCEPTION_MSG = exports.MISSING_GEOMETRY_PROPS_EXCEPTION_MSG = void 0;
 const tslib_1 = require("tslib");
-/* eslint-disable no-undef */
 const react_1 = require("react");
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
-const context_1 = require("../../context");
+const MapContext_1 = require("../../MapContext");
 const MapException_1 = tslib_1.__importDefault(require("../../../exceptions/MapException"));
 const hooks_1 = require("../../../utils/hooks");
 const eventHandling_1 = require("../../../utils/eventHandling");
+const rendering_1 = require("../../../utils/rendering");
 exports.MISSING_GEOMETRY_PROPS_EXCEPTION_MSG = 'Error in Polyline: Polyline without geometry makes no sense';
 exports.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 } = (0, react_1.useContext)(context_1.MapContext);
+const Polyline = (props) => {
+    const { geometry, hasArrows, arrowStyle, style = H.map.SpatialStyle.DEFAULT_STYLE, eventListenerMap } = props;
+    const { api, enableWebGL, baseLayer } = (0, MapContext_1.useMapContext)();
     const [polyline, setPolyline] = (0, react_1.useState)();
     if (!geometry) {
         throw new MapException_1.default(exports.MISSING_GEOMETRY_PROPS_EXCEPTION_MSG);
@@ -21,17 +21,25 @@ const Polyline = ({ geometry, hasArrows, arrowStyle, style = H.map.SpatialStyle.
         throw new MapException_1.default(exports.WRONG_GEOMETRY_PROPS_EXCEPTION_MSG);
     }
     (0, react_1.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 ((0, rendering_1.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)',
@@ -53,15 +61,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;
             (0, eventHandling_1.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();
@@ -70,11 +79,4 @@ const Polyline = ({ geometry, hasArrows, arrowStyle, style = H.map.SpatialStyle.
     (0, hooks_1.useUpdateEventListenerMap)(polyline, eventListenerMap);
     return null;
 };
-Polyline.propTypes = {
-    hasArrows: prop_types_1.default.bool,
-    arrowStyle: prop_types_1.default.object,
-    geometry: prop_types_1.default.oneOfType([prop_types_1.default.instanceOf(H.geo.LineString)]).isRequired,
-    style: prop_types_1.default.instanceOf(H.map.SpatialStyle),
-    eventListenerMap: prop_types_1.default.object,
-};
 exports.default = Polyline;

package/lib/es/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/lib/es/components/map/components/features/basics/TextMarker.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.wrongTypeException = exports.emptyTextException = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-ignore-next-line importsNotUsedAsValues
+require("react");
+const Marker_1 = tslib_1.__importDefault(require("./Marker"));
+exports.emptyTextException = 'Error in TextMarker: TextMarker without text makes no sense';
+exports.wrongTypeException = 'Error in TextMarker: property text must be string type';
+const TextMarker = (props) => {
+    const { text } = props, remainingProps = tslib_1.__rest(props, ["text"]);
+    return ((0, jsx_runtime_1.jsx)(Marker_1.default, Object.assign({}, remainingProps, { icon: (0, jsx_runtime_1.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 })) })));
+};
+exports.default = TextMarker;

package/lib/es/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 {