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

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: 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/layers/MapLayerGroup.d.ts

@@ -0,0 +1,8 @@
+import { type PropsWithChildren } from 'react';
+export type MapLayerGroupProps = {
+    isVisible?: boolean;
+    minZoom?: number;
+    maxZoom?: number;
+};
+declare const MapLayerGroup: (props: PropsWithChildren<MapLayerGroupProps>) => import("react/jsx-runtime").JSX.Element;
+export default MapLayerGroup;

package/components/map/components/features/layers/MapLayerGroup.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect, useContext } from 'react';
+import { MapContext } from '../../MapContext';
+// TODO: apparently it is not used
+// Consider Using a Group Layer: If you have additional map objects or want to
+// control visibility/z-index of the cluster layer separately, using a group layer can be beneficial.
+const MapLayerGroup = (props) => {
+    const { minZoom = Number.NEGATIVE_INFINITY, maxZoom = Number.POSITIVE_INFINITY, isVisible = true, children, } = props;
+    const context = useContext(MapContext);
+    const api = context.api;
+    const [group, setGroup] = useState();
+    const [childApi, setChildApi] = useState();
+    useEffect(() => {
+        var _a;
+        const newGroup = new H.map.Group({
+            min: minZoom,
+            max: maxZoom,
+        });
+        newGroup.setVisibility(isVisible);
+        (_a = api.map) === null || _a === void 0 ? void 0 : _a.addObject(newGroup);
+        setGroup(newGroup);
+        setChildApi(Object.assign(Object.assign({}, context), { api: Object.assign(Object.assign({}, api), { group: newGroup }) }));
+        return () => {
+            var _a, _b;
+            if ((_a = api.map) === null || _a === void 0 ? void 0 : _a.getObjects().includes(newGroup)) {
+                (_b = api.map) === null || _b === void 0 ? void 0 : _b.removeObject(newGroup);
+            }
+            newGroup.dispose();
+        };
+    }, [api.map]);
+    useEffect(() => {
+        if (group) {
+            group.setVisibility(isVisible);
+        }
+    }, [isVisible]);
+    return (_jsx("div", Object.assign({ className: 'MapLayerGroup' }, { children: childApi && _jsx(MapContext.Provider, Object.assign({ value: childApi }, { children: children })) })));
+};
+export default MapLayerGroup;

package/components/map/components/features/layers/MapOverlayLayers.d.ts

@@ -0,0 +1,5 @@
+export type MapOverlayLayersProps = {
+    layers: string[];
+};
+declare const MapOverlayLayers: (props: MapOverlayLayersProps) => import("react/jsx-runtime").JSX.Element;
+export default MapOverlayLayers;

package/components/map/components/features/layers/MapOverlayLayers.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import 'react';
+import map from 'lodash/fp/map';
+import { MAP_LAYER_INCIDENTS, MAP_LAYER_ROAD_RESTRICTIONS, MAP_LAYER_TRAFFIC } from '../../constants';
+import IncidentsLayer from './overlayLayers/IncidentsLayer';
+import RoadRestrictionLayer from './overlayLayers/RoadRestrictionLayer';
+import TrafficLayer from './overlayLayers/TrafficLayer';
+const MapOverlayLayers = (props) => {
+    const { layers } = props;
+    const layersToRender = map(layer => {
+        switch (layer) {
+            case MAP_LAYER_TRAFFIC:
+                return _jsx(TrafficLayer, { id: MAP_LAYER_TRAFFIC }, layer);
+            case MAP_LAYER_INCIDENTS:
+                return _jsx(IncidentsLayer, {}, layer);
+            case MAP_LAYER_ROAD_RESTRICTIONS:
+                return _jsx(RoadRestrictionLayer, { id: MAP_LAYER_ROAD_RESTRICTIONS }, layer);
+            default:
+                return null;
+        }
+    }, layers);
+    return _jsx(_Fragment, { children: layersToRender });
+};
+export default MapOverlayLayers;

package/components/map/components/features/layers/MarkerLayer.d.ts

@@ -1,14 +1,10 @@
+import React from 'react';
+import ClusterLayer, { type ClusterTheme } from './clustering/ClusterLayer';
+export type MarkerLayerProps = React.ComponentProps<typeof ClusterLayer> & {
+    simpleTheme?: ClusterTheme;
+    clusterDissolvable?: boolean;
+    clusterStrategy?: 'FASTGRID' | 'GRID' | 'DYNAMICGRID';
+    eps?: number;
+};
+declare const MarkerLayer: (props: MarkerLayerProps) => import("react/jsx-runtime").JSX.Element;
 export default MarkerLayer;
-declare function MarkerLayer(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace MarkerLayer {
-    namespace propTypes {
-        const simpleTheme: PropTypes.Requireable<PropTypes.InferProps<{
-            getNoisePresentation: PropTypes.Validator<(...args: any[]) => any>;
-            getClusterPresentation: PropTypes.Validator<(...args: any[]) => any>;
-        }>>;
-        const clusterDissolvable: PropTypes.Requireable<boolean>;
-        const clusterStrategy: PropTypes.Requireable<string>;
-        const eps: PropTypes.Requireable<number>;
-    }
-}
-import PropTypes from "prop-types";

package/components/map/components/features/layers/MarkerLayer.js

@@ -1,27 +1,19 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useContext } from 'react';
-import PropTypes from 'prop-types';
-import getOr from 'lodash/fp/getOr';
-import mapProps from '../../../utils/proptypes';
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
 import ClusterLayer from './clustering/ClusterLayer';
 import { wrapSimpleTheme } from '../../../utils/clustering';
-import { MapContext } from '../../context';
+import { useMapContext } from '../../MapContext';
 /*
  * Not very different to the SimpleClusterLayer, but with a different intention.
  */
-const MarkerLayer = props => {
-    const { api } = useContext(MapContext);
+const MarkerLayer = (props) => {
+    const mapContext = useMapContext();
     const { simpleTheme, clusterDissolvable = true } = props, rest = __rest(props, ["simpleTheme", "clusterDissolvable"]);
     // Norbert: Not an ideal solution
-    const showCluster = !clusterDissolvable || getOr(true, 'settings.showCluster', api);
+    const showCluster = !clusterDissolvable || mapContext.showCluster;
     const newProps = Object.assign({ clusterTheme: simpleTheme && wrapSimpleTheme(simpleTheme) }, rest);
     return _jsx(ClusterLayer, Object.assign({}, newProps, { minWeight: showCluster ? undefined : 1000000000 }));
 };
-MarkerLayer.propTypes = {
-    simpleTheme: mapProps.clusterTheme,
-    clusterDissolvable: PropTypes.bool,
-    clusterStrategy: PropTypes.oneOf(['FASTGRID', 'GRID', 'DYNAMICGRID']),
-    eps: PropTypes.number,
-};
 export default MarkerLayer;