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

package/components/map/components/features/layers/clustering/ClusterLayer.d.ts

@@ -1,29 +1,22 @@
+/// <reference types="heremaps" />
+import type { EventListenerMap } from '../../../../utils/eventHandling';
+export type ClusterStrategy = 'FASTGRID' | 'GRID' | 'DYNAMICGRID';
+export type ClusterTheme = H.clustering.ITheme;
+export type Position = {
+    lat: number;
+    lng: number;
+};
+export type DataConverter = (data: Position, index: number) => H.clustering.DataPoint;
+export type ClusterLayerProps = {
+    data: object[];
+    dataConverter?: DataConverter;
+    minWeight?: string | number;
+    minZoom?: string | number;
+    maxZoom?: string | number;
+    clusterTheme?: ClusterTheme | undefined;
+    eventListenerMap?: EventListenerMap;
+    clusterStrategy?: ClusterStrategy;
+    eps?: number;
+};
+declare const ClusterLayer: (props: ClusterLayerProps) => null;
 export default ClusterLayer;
-declare function ClusterLayer({ data, dataConverter, minWeight, minZoom, maxZoom, clusterTheme, eventListenerMap, clusterStrategy, eps, }: {
-    data: any;
-    dataConverter: any;
-    minWeight: any;
-    minZoom: any;
-    maxZoom: any;
-    clusterTheme?: any;
-    eventListenerMap: any;
-    clusterStrategy: any;
-    eps?: number | undefined;
-}): null;
-declare namespace ClusterLayer {
-    namespace propTpyes {
-        const data: PropTypes.Validator<any[]>;
-        const dataConverter: PropTypes.Requireable<(...args: any[]) => any>;
-        const minWeight: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-        const minZoom: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-        const maxZoom: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-        const clusterTheme: PropTypes.Requireable<PropTypes.InferProps<{
-            getNoisePresentation: PropTypes.Validator<(...args: any[]) => any>;
-            getClusterPresentation: PropTypes.Validator<(...args: any[]) => any>;
-        }>>;
-        const eventListenerMap: PropTypes.Requireable<object>;
-        const clusterStrategy: PropTypes.Requireable<string>;
-        const eps: PropTypes.Requireable<number>;
-    }
-}
-import PropTypes from "prop-types";

package/components/map/components/features/layers/clustering/ClusterLayer.js

@@ -1,13 +1,11 @@
-/* eslint-disable no-undef */
-import { useContext, useState, useEffect, useLayoutEffect } from 'react';
-import PropTypes from 'prop-types';
-import mapProps from '../../../../utils/proptypes';
-import { MapContext } from '../../../context';
+import { useState, useEffect, useLayoutEffect } from 'react';
+// import ReactDomServer from 'react-dom/server';
+import { useMapContext } from '../../../MapContext';
 import { useUpdateProp, useUpdateEventListenerMap } from '../../../../utils/hooks';
-const DEFAULT_DATA_CONVERTER = d => new H.clustering.DataPoint(d.lat, d.lng, 1, d);
-const convertData = (data, converterFunc) => data.map(converterFunc ? converterFunc : DEFAULT_DATA_CONVERTER);
+const DEFAULT_DATA_CONVERTER = (pos, index) => new H.clustering.DataPoint(pos.lat, pos.lng, 1, pos);
+const convertData = (data, converterFunc = DEFAULT_DATA_CONVERTER) => data.map((value, index) => converterFunc(value, index));
 const DEFAULT_CLUSTER_THEME = new H.clustering.Provider([]).getTheme();
-const getClusterStrategy = strategy => {
+const getClusterStrategy = (strategy) => {
     switch (strategy) {
         case 'GRID':
             return H.clustering.Provider.Strategy.GRID;
@@ -17,28 +15,91 @@ const getClusterStrategy = strategy => {
             return H.clustering.Provider.Strategy.FASTGRID;
     }
 };
-const ClusterLayer = ({ data, dataConverter, minWeight, minZoom, maxZoom, clusterTheme = DEFAULT_CLUSTER_THEME, eventListenerMap, clusterStrategy, eps = 100, }) => {
-    const { api } = useContext(MapContext);
+// TODO: replace some cluster marker like for POIs with SVG MarkerIcons instead of rendering DomMarker
+// to increase rendering performance, especially, when rendering hundreds of marker like for charging stations
+// const noiseSvg =
+//     '<svg xmlns="http://www.w3.org/2000/svg" height="20px" width="20px"><circle cx="5px" cy="5px" r="5px" fill="green" /></svg>';
+// Create an icon to represent the noise points
+// Note that same icon will be used for all noise points
+// const noiseIcon = new H.map.Icon(noiseSvg, {
+//     size: { w: 20, h: 20 },
+//     anchor: { x: 10, y: 10 },
+// });
+// SVG template to use for cluster icons
+// const clusterSvgTemplate = `<svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" style="cursor: pointer">
+//     <circle cx="20" cy="20" r="19.5" fill="#B23672" stroke="#B23672"/>
+//     <g transform="translate(20,24.6)">
+//         <text fill="white" font-family="'Source Sans Pro', Helvetica, sans-serif" font-size="15" font-weight="500" text-anchor="middle">
+//             {text}
+//         </text>
+//     </g>
+// </svg>`;
+const ClusterLayer = (props) => {
+    const { data, dataConverter, minWeight, minZoom, maxZoom, clusterTheme = DEFAULT_CLUSTER_THEME, eventListenerMap, clusterStrategy, eps = 100, } = props;
+    const { api } = useMapContext();
     const [provider, setProvider] = useState();
     useEffect(() => {
-        const newProviderOptions = {
+        // const reactIcon = new H.map.DomIcon(
+        //     ReactDomServer.renderToStaticMarkup(
+        //         <div className='bg-info padding-x-5 padding-y-2 border rounded shadow-default'>test</div>
+        //     )
+        // );
+        var _a;
+        const clusterProviderOptions = {
             clusteringOptions: {
                 strategy: getClusterStrategy(clusterStrategy),
                 eps,
-                minWeight: minWeight ? parseInt(minWeight, 10) : 2,
+                minWeight: minWeight ? Number.parseInt(minWeight, 10) : 2,
             },
-            min: minZoom ? parseInt(minZoom, 10) : 0,
-            max: maxZoom ? parseInt(maxZoom, 10) : 22,
-            // Note: set cluster theme every time the provider changes but leave it out of the hook dependency
-            // to avoid recreation of the provider and it's items
+            min: minZoom ? Number.parseInt(minZoom, 10) : 0,
+            max: maxZoom ? Number.parseInt(maxZoom, 10) : 22,
             theme: clusterTheme,
+            // theme: {
+            //     getClusterPresentation: cluster => {
+            //         // Use cluster weight to change the icon size
+            //         const weight = cluster.getWeight();
+            //         // Calculate circle size
+            //         const radius = weight; // * 5;
+            //         const diameter = radius * 2;
+            //         // Replace variables in the icon template
+            //         const svgString = clusterSvgTemplate.replace(/\{text\}/g, String(weight));
+            //         // .replace(/\{diameter\}/g, String(diameter));
+            //         // Create an icon
+            //         // Note that we create a different icon depending from the weight of the cluster
+            //         const clusterIcon = new H.map.Icon(svgString);
+            //         // Create a marker for the cluster
+            //         const clusterMarker = new H.map.Marker(cluster.getPosition(), {
+            //             icon: clusterIcon,
+            //             // Set min/max zoom with values from the cluster, otherwise
+            //             // clusters will be shown at all zoom levels
+            //             min: cluster.getMinZoom(),
+            //             max: cluster.getMaxZoom(),
+            //         });
+            //         // Bind cluster data to the marker
+            //         clusterMarker.setData(cluster);
+            //         return clusterMarker;
+            //     },
+            //     getNoisePresentation: noisePoint => {
+            //         // Create a marker for noise points:
+            //         const noiseMarker = new H.map.DomMarker(noisePoint.getPosition(), {
+            //             // icon: noiseIcon,
+            //             icon: reactIcon,
+            //             // Use min zoom from a noise point to show it correctly at certain zoom levels
+            //             min: noisePoint.getMinZoom(),
+            //         });
+            //         // Bind noise point data to the marker:
+            //         noiseMarker.setData(noisePoint);
+            //         return noiseMarker;
+            //     },
+            // },
         };
-        const newProvider = new H.clustering.Provider(convertData(data, dataConverter), newProviderOptions);
+        const newProvider = new H.clustering.Provider(convertData(data, dataConverter), clusterProviderOptions);
         const objectLayer = new H.map.layer.ObjectLayer(newProvider);
-        api.map.addLayer(objectLayer);
+        (_a = api.map) === null || _a === void 0 ? void 0 : _a.addLayer(objectLayer);
         setProvider(newProvider);
         return () => {
-            api.map.removeLayer(objectLayer);
+            var _a;
+            (_a = api.map) === null || _a === void 0 ? void 0 : _a.removeLayer(objectLayer);
             objectLayer.dispose();
             newProvider.dispose();
         };
@@ -50,18 +111,7 @@ const ClusterLayer = ({ data, dataConverter, minWeight, minZoom, maxZoom, cluste
         }
     }, [data, dataConverter]);
     useUpdateProp(provider, 'setTheme', clusterTheme);
-    useUpdateEventListenerMap(provider, eventListenerMap, api.map);
+    useUpdateEventListenerMap(provider, eventListenerMap);
     return null;
 };
-ClusterLayer.propTpyes = {
-    data: PropTypes.array.isRequired,
-    dataConverter: PropTypes.func,
-    minWeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    minZoom: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    maxZoom: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    clusterTheme: mapProps.clusterTheme,
-    eventListenerMap: PropTypes.object,
-    clusterStrategy: PropTypes.oneOf(['FASTGRID', 'GRID', 'DYNAMICGRID']),
-    eps: PropTypes.number,
-};
 export default ClusterLayer;

package/components/map/components/features/layers/clustering/SimpleClusterLayer.d.ts

@@ -1,10 +1,6 @@
+import { type ClusterTheme, type ClusterLayerProps } from './ClusterLayer';
+export type SimpleClusterLayerProps = Omit<ClusterLayerProps, 'clusterTheme'> & {
+    simpleTheme?: ClusterTheme;
+};
+declare const SimpleClusterLayer: (props: SimpleClusterLayerProps) => import("react/jsx-runtime").JSX.Element;
 export default SimpleClusterLayer;
-declare function SimpleClusterLayer(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace SimpleClusterLayer {
-    namespace propTypes {
-        const simpleTheme: import("prop-types").Requireable<import("prop-types").InferProps<{
-            getNoisePresentation: import("prop-types").Validator<(...args: any[]) => any>;
-            getClusterPresentation: import("prop-types").Validator<(...args: any[]) => any>;
-        }>>;
-    }
-}

package/components/map/components/features/layers/clustering/SimpleClusterLayer.js

@@ -1,15 +1,10 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import mapProps from '../../../../utils/proptypes';
+import 'react';
 import ClusterLayer from './ClusterLayer';
 import { wrapSimpleTheme } from '../../../../utils/clustering';
-const SimpleClusterLayer = props => {
+const SimpleClusterLayer = (props) => {
     const { simpleTheme } = props, rest = __rest(props, ["simpleTheme"]);
-    const newProps = Object.assign({ clusterTheme: simpleTheme && wrapSimpleTheme(simpleTheme) }, rest);
-    return _jsx(ClusterLayer, Object.assign({}, newProps));
-};
-SimpleClusterLayer.propTypes = {
-    simpleTheme: mapProps.clusterTheme,
+    return _jsx(ClusterLayer, Object.assign({}, rest, { clusterTheme: simpleTheme && wrapSimpleTheme(simpleTheme) }));
 };
 export default SimpleClusterLayer;

package/components/map/components/features/layers/overlayLayers/IncidentsLayer.d.ts

@@ -0,0 +1,6 @@
+export declare const CLUSTER_ICON_WIDTH = 34;
+export declare const CLUSTER_ICON_HEIGHT = 38;
+export declare const MARKER_ICON_WIDTH = 26;
+export declare const MARKER_ICON_HEIGHT = 31;
+declare const IncidentsLayer: () => null;
+export default IncidentsLayer;

package/components/map/components/features/layers/overlayLayers/IncidentsLayer.js

@@ -0,0 +1,273 @@
+/* eslint-disable max-len */
+/* eslint-disable prefer-arrow/prefer-arrow-functions */
+// @ts-ignore-next-line importsNotUsedAsValues
+import { useEffect, useState } from 'react';
+import { useMapContext } from '../../../MapContext';
+import { MAP_LAYER_INCIDENTS } from '../../../constants';
+export const CLUSTER_ICON_WIDTH = 34;
+export const CLUSTER_ICON_HEIGHT = 38;
+export const MARKER_ICON_WIDTH = 26;
+export const MARKER_ICON_HEIGHT = 31;
+const getIncidentGenericSvg = (color) => `<svg width="${MARKER_ICON_WIDTH}" height="${MARKER_ICON_HEIGHT}" xmlns="http://www.w3.org/2000/svg" baseProfile="tiny" viewBox="0 0 26 31">
+        <path fill="#868686" d="M16.995 28.98c0 1.115-1.79 2.02-4 2.02s-4-.905-4-2.02c0-1.118 1.79-2.026 4-2.026s4 .907 4 2.025"/>
+        <path fill="${color}" d="M1.702 17.693C.13 16.127.118 13.837 1.675 11.995l8.41-10.098c.772-.9 1.806-1.394 2.914-1.394 1.124 0 2.212.525 2.91 1.404l8.402 10.09c1.602 1.867 1.592 4.052-.027 5.693l-11.29 11.286L1.702 17.693z"/>
+        <path fill="#fff" d="M12.998 1.007c.97 0 1.91.445 2.516 1.213l8.41 10.1c1.375 1.602 1.494 3.503 0 5.016l-10.93 10.93-10.936-10.93c-1.392-1.384-1.39-3.374 0-5.016l8.41-10.1c.723-.84 1.642-1.213 2.53-1.213m0-1.007C11.74 0 10.57.555 9.703 1.563l-8.42 10.112c-1.732 2.047-1.708 4.61.063 6.374L12.28 28.976l.714.712.713-.713 10.93-10.93c1.8-1.82 1.818-4.324.055-6.383L16.288 1.576C15.514.596 14.278 0 12.998 0zM13.035 16.534c-.754 0-1.365.595-1.365 1.32 0 .73.613 1.326 1.365 1.326s1.363-.595 1.363-1.326c0-.725-.61-1.32-1.363-1.32zm0-1.332c.568 0 1.057-.448 1.088-.993l.365-5.916c.033-.548-.615-.996-1.455-.996-.832 0-1.49.448-1.453.996l.36 5.915c.034.544.526.992 1.095.992z"/>
+    </svg>`;
+const getIncidentCongestionSvg = (color) => `<svg width="${MARKER_ICON_WIDTH}" height="${MARKER_ICON_HEIGHT}" xmlns="http://www.w3.org/2000/svg">
+        <path fill="#878787" d="m 16.8,29.4 c 0,-1.1 -1.8,-2 -4,-2 -2.2,0 -4.01,0.9 -4.01,2 0,1.1 1.81,2 4.01,2 2.2,0 4,-0.9 4,-2"/>
+        <path fill="${color}" d="m 24.1,17.8 c 1.6,-1.6 1.6,-3.8 0,-5.7 L 15.8,1.9 C 15,0.998 14,0.498 12.9,0.498 11.8,0.498 10.7,1.1 10,1.9 L 1.7,12.1 c -1.6,1.9 -1.6,4.1 0,5.7 L 12.9,29 24.1,17.8 z" stroke="#fff" stroke-width="1" />
+        <path d="m 18,15 0,0 c 0,-0.1 0,-0.2 0,-0.4 l 0,-0.2 c 0,-0.1 0,-0.2 0,-0.4 0,0 0,0 0,0 0.6,0 1.1,-0.4 1.1,-1 0,-0.5 -0.5,-1 -1,-1 -0.7,0 -1.1,0.5 -1.1,1 -0.1,0 -0.3,-0.1 -0.4,-0.1 l -0.6,0 -0.3,-0.5 C 15.2,11.6 14.3,11 13.3,11 L 18,11 17.2,9.6 C 17,9.3 16.7,9 16.3,9 L 12.8,9 C 12.4,9 12,9.3 11.8,9.6 L 11.1,11 9.8,11 C 9.7,11 9.6,11 9.5,11 9.2,11 9,10.9 9,10.6 L 9,10.4 C 9,10.2 9.2,9.9 9.5,9.9 l 1.2,0 0.6,-1.04 c 0.3,-0.5 0.9,-0.9 1.5,-0.9 l 3.5,0 c 0.6,0 1.2,0.4 1.5,0.9 l 0.6,1.04 1.2,0 c 0.2,0 0.4,0.3 0.4,0.5 l 0,0.2 c 0,0.3 -0.2,0.5 -0.4,0.5 l -0.1,0 c 0.3,0.3 0.5,0.7 0.5,1.1 l 0,3.4 c 0,0.2 -0.2,0.4 -0.4,0.4 l -1.1,0 C 18.3,16 18,15.8 18,15.6 L 18,15 z M 8,18.1 c 0.6,0 1.1,-0.5 1.1,-1.1 0,-0.5 -0.5,-1 -1.1,-1 -0.6,0 -1.1,0.5 -1.1,1 0,0.6 0.5,1.1 1.1,1.1 m 7,0 c 0.6,0 1.1,-0.5 1.1,-1.1 0,-0.5 -0.5,-1 -1.1,-1 -0.5,0 -1,0.5 -1,1 0,0.6 0.5,1.1 1,1.1 M 14.2,13.6 C 14,13.3 13.7,13 13.3,13 L 9.8,13 C 9.4,13 9,13.3 8.8,13.6 L 8.1,15 15,15 14.2,13.6 z m -8.2,1 0,-0.2 c 0,-0.2 0.2,-0.5 0.5,-0.5 l 1.1,0 0.7,-1 C 8.6,12.4 9.2,12 9.8,12 l 3.5,0 c 0.6,0 1.2,0.4 1.5,0.9 l 0.6,1 1.2,0 c 0.2,0 0.4,0.3 0.4,0.5 l 0,0.2 c 0,0.3 -0.2,0.5 -0.4,0.5 l -0.1,0 c 0.3,0.3 0.5,0.7 0.5,1.1 l 0,3.4 c 0,0.2 -0.2,0.4 -0.4,0.4 l -1.1,0 C 15.3,20 15,19.8 15,19.6 L 15,19 8,19 8,19.6 C 8,19.8 7.8,20 7.5,20 l -1,0 C 6.2,20 6,19.8 6,19.6 l 0,-3.4 c 0,-0.4 0.2,-0.8 0.6,-1.1 l -0.1,0 C 6.2,15.1 6,14.9 6,14.6" fill="#ffffff" />
+    </svg>`;
+const getIncidentClosedSvg = (color) => `<svg width="${MARKER_ICON_WIDTH}" height="${MARKER_ICON_HEIGHT}" viewBox="0 0 26 32" xmlns="http://www.w3.org/2000/svg">
+        <g fill="none">
+            <g>
+                <path fill="#868686" d="M16.995 28.98c0 1.116-1.79 2.02-4 2.02s-4-.904-4-2.02c0-1.118 1.79-2.023 4-2.023 2.21-.004 4 .904 4 2.022" />
+                <path fill="${color}" id="Shape" d="M1.675 11.995l8.41-10.098c.772-.9 1.806-1.394 2.914-1.394 1.124 0 2.212.525 2.91 1.404l8.402 10.09c1.602 1.867 1.592 4.052-.027 5.692l-11.29 11.286L1.702 17.693C.13 16.127.118 13.837 1.675 11.995z" />
+                <path fill="#fff" id="Shape" d="M12.998 1.007c.97 0 1.91.445 2.516 1.213l8.41 10.1c1.375 1.602 1.494 3.503 0 5.016l-10.93 10.93-10.936-10.93c-1.392-1.384-1.39-3.374 0-5.016l8.41-10.1c.723-.84 1.642-1.213 2.53-1.213zm0-1.007C11.74 0 10.57.555 9.703 1.563l-8.42 10.112c-1.732 2.047-1.708 4.61.063 6.374L12.28 28.976l.714.713.713-.713 10.93-10.93c1.8-1.82 1.818-4.324.055-6.383L16.288 1.576C15.514.596 14.278 0 12.998 0z" />
+                <path fill="#fff" d="M9 15h1.5v3.8H9zM16 15h1.5v3.8H16z" />
+                <path fill="#fff" id="Shape" d="M20.01 13.965c0 .276-.225.5-.5.5h-13c-.275 0-.5-.224-.5-.5v-2.637c0-.276.225-.5.5-.5h13c.275 0 .5.224.5.5v2.637z" />
+                <path fill="#D5232F" d="M9.565 11.33l-2.638 2.634h3.107l2.635-2.635H9.564zM16.004 11.33l-2.634 2.634h3.105l2.634-2.635h-3.106z" />
+            </g>
+        </g>
+    </svg>`;
+const getIncidentConstructionSvg = (color) => `<svg width="${MARKER_ICON_WIDTH}" height="${MARKER_ICON_HEIGHT}" xmlns="http://www.w3.org/2000/svg">
+        <path fill="#878787" d="m 16.8,29.4 c 0,-1.1 -1.8,-2 -4,-2 -2.2,0 -4.01,0.9 -4.01,2 0,1.1 1.81,2 4.01,2 2.2,0 4,-0.9 4,-2" />
+        <path fill="${color}" stroke="#fff" stroke-width="1" d="m 24.1,17.8 c 1.6,-1.6 1.6,-3.8 0,-5.7 L 15.8,1.9 C 15,0.998 14,0.498 12.9,0.498 11.8,0.498 10.7,1.1 10,1.9 L 1.7,12.1 c -1.6,1.9 -1.6,4.1 0,5.7 L 12.9,29 24.1,17.8 z" />
+        <path fill="#ffffff" d="m 9.24,13.2 -3.7,6.8 1.3,0 2.8,-5.1 1.36,1.5 0,3.6 1.1,0 0,-4 -1.4,-1.6 -1.46,-1.2 z M 14.2,9.5 c 0.7,0 1.3,-0.5 1.3,-1.21 0,-0.7 -0.6,-1.2 -1.3,-1.2 -0.7,0 -1.2,0.5 -1.2,1.2 0,0.71 0.5,1.21 1.2,1.21 m -4.46,0.5 1.06,0 -0.96,2.1 -1,-0.8 0.9,-1.3 z m 2.56,4 -1,-0.7 1,-1.9 0,2.6 z m 6.9,1.7 c -0.4,-0.5 -1.5,-1.1 -2.3,0 -0.2,0.3 -0.6,0.7 -0.9,1.2 l -2.7,-2.1 0,-5 -0.8,-0.7 -3.26,0 -1.5,2.3 7.86,6 C 14.7,18.6 13.8,20 13.8,20 l 6,0 1.5,-1.6 c 0,0 -1.7,-2.2 -2.1,-2.7" />
+    </svg>`;
+// Create an SVG template for the cluster icon:
+const getClusterSvg = (text) => `<svg xmlns="http://www.w3.org/2000/svg" width="${CLUSTER_ICON_WIDTH}" height="${CLUSTER_ICON_HEIGHT}" viewBox="0 0 40 44">
+        <g opacity=".25">
+            <path fill="#4B4B4C" d="M20.498 42.5C12.778 42.5 6.5 39.584 6.5 36s6.28-6.5 13.998-6.5c7.72 0 14.002 2.916 14.002 6.5s-6.28 6.5-14.002 6.5z" />
+            <path d="M20.498 30C28.574 30 34 33.104 34 36s-5.426 6-13.502 6C12.424 42 7 38.896 7 36s5.424-6 13.498-6m0-1C12.492 29 6 32.113 6 36s6.492 7 14.498 7C28.508 43 35 39.887 35 36s-6.49-7-14.502-7z" />
+        </g>
+        <path fill="#353535" opacity=".25" d="M26 36c0 1.666-2.688 3-6 3s-6-1.334-6-3 2.688-3 6-3 6 1.334 6 3z"/>
+        <path fill="#fff" d="M11.802 4.615C10.35 4.615 9 5.255 8 6.42l-5.52 8.05c-2 2.363-1.97 5.32.072 7.355L20 36v-4l9.426-10.176c2.076-2.1 2.1-4.988.064-7.365L15.598 6.433c-.894-1.13-2.32-1.82-3.796-1.82z" />
+        <path fill="#96969B" d="M11.632 5.615c1.12 0 2.202.514 2.902 1.4l13.9 8.036C30.02 16.9 21.723 27.255 20 29v6L3.205 20.842c-1.607-1.598-1.605-3.895 0-5.79l5.508-8.036c.834-.97 1.893-1.4 2.92-1.4" />
+        <path fill="#fff" d="M28.198 4.615c-1.476 0-2.902.69-3.796 1.818L10.51 14.46c-2.035 2.376-2.012 5.265.064 7.364L20 32v4l17.447-14.175c2.043-2.034 2.072-4.992.072-7.354L32 6.42c-1-1.164-2.35-1.805-3.802-1.805z" />
+        <path fill="#96969B" d="M28.368 5.615c1.024 0 2.085.43 2.92 1.4l5.507 8.037c1.605 1.895 1.607 4.19 0 5.79L20 35v-6c-1.725-1.746-10.02-12.1-8.434-13.948l13.9-8.037c.7-.886 1.782-1.4 2.902-1.4" />
+        <path fill="#fff" d="M19.998 1c-1.453 0-2.803.64-3.803 1.803L6.48 14.47c-2 2.363-1.97 5.32.072 7.355L19 35l1 1 1-1 12.426-13.176c2.076-2.1 2.1-4.988.064-7.365L23.793 2.817C22.9 1.688 21.473 1 19.998 1z" />
+        <path fill="#646469" d="M19.998 2.162c1.12 0 2.2.514 2.902 1.398l9.703 11.653c1.588 1.85 1.725 4.044 0 5.79L20 34.5 7.375 21.004c-1.607-1.598-1.605-3.895 0-5.79l9.703-11.65c.834-.972 1.895-1.402 2.92-1.402" />
+        <path fill="none" d="M18.333 12.667H45.75v10.736H18.333z" />
+        <text transform="translate(20 23)" fill="#fff" font-family="sans-serif" font-size="14" color="#fff" font-weight="600" text-anchor="middle">${text}</text>
+    </svg>`;
+const IncidentsLayer = () => {
+    const { api, language, onIncidentsChange } = useMapContext();
+    const map = api.map;
+    const [dataPoints, setDataPoints] = useState([]);
+    useEffect(() => {
+        let incidentsLayer;
+        let fetchIncidents;
+        if (map) {
+            // Create a clustered data provider and a theme implementation:
+            const clusteredDataProvider = new H.clustering.Provider(dataPoints, {
+                min: 1,
+                max: 21,
+                clusteringOptions: {
+                    minWeight: 3,
+                    eps: 36,
+                },
+                theme: {
+                    getClusterPresentation(markerCluster) {
+                        const clusterSvgIcon = getClusterSvg(markerCluster.getWeight());
+                        const w = CLUSTER_ICON_WIDTH;
+                        const h = CLUSTER_ICON_HEIGHT;
+                        const clusterIcon = new H.map.Icon(clusterSvgIcon, {
+                            size: { w, h },
+                            anchor: { x: w / 2, y: h / 2 },
+                        });
+                        // Create a marker for clusters:
+                        const clusterMarker = new H.map.Marker(markerCluster.getPosition(), {
+                            icon: clusterIcon,
+                            // Set min/max zoom with values from the cluster, otherwise
+                            // clusters will be shown at all zoom levels:
+                            min: markerCluster.getMinZoom(),
+                            max: markerCluster.getMaxZoom(),
+                        });
+                        // Bind cluster data to the marker:
+                        clusterMarker.setData(markerCluster);
+                        return clusterMarker;
+                    },
+                    getNoisePresentation(noisePoint) {
+                        const markerSvgIcon = getIncidentMarkerIcon(noisePoint);
+                        const w = MARKER_ICON_WIDTH;
+                        const h = MARKER_ICON_HEIGHT;
+                        const noiseIcon = new H.map.Icon(markerSvgIcon, {
+                            size: { w, h },
+                            anchor: { x: w / 2, y: h },
+                        });
+                        // Create a marker for noise points:
+                        const noiseMarker = new H.map.Marker(noisePoint.getPosition(), {
+                            icon: noiseIcon,
+                            // Use min zoom from a noise point to show it correctly at certain zoom levels:
+                            min: noisePoint.getMinZoom(),
+                        });
+                        // Bind cluster data to the marker:
+                        noiseMarker.setData(noisePoint);
+                        noiseMarker.addEventListener('pointerenter', (event) => {
+                            var _a;
+                            const tooltipContent = event.target.getData().getData().tooltipContent;
+                            const point = event.target.getData().getPosition();
+                            // Define the bubble arrow position
+                            const screenPosition = map.geoToScreen(point);
+                            screenPosition.x += 0;
+                            screenPosition.y += -MARKER_ICON_HEIGHT;
+                            const bubble = new H.ui.InfoBubble(map.screenToGeo(screenPosition.x, screenPosition.y), {
+                                content: tooltipContent,
+                            });
+                            (_a = api.ui) === null || _a === void 0 ? void 0 : _a.addBubble(bubble);
+                        });
+                        noiseMarker.addEventListener('pointerleave', (event) => {
+                            clearBubbles();
+                        });
+                        return noiseMarker;
+                    },
+                },
+            });
+            fetchIncidents = () => {
+                var _a;
+                clearBubbles();
+                clusteredDataProvider.setDataPoints(dataPoints);
+                // HERE Maps API for JavaScript 3.1
+                const bbox = (_a = map.getViewModel().getLookAtData().bounds) === null || _a === void 0 ? void 0 : _a.getBoundingBox();
+                const center = map.getViewModel().getLookAtData().position;
+                if (bbox && center) {
+                    getTrafficIncidents(clusteredDataProvider, bbox, center, language);
+                }
+            };
+            // Initially fetch incidents
+            fetchIncidents();
+            // Re-fetch incidents when map view changes as it shows a different part of the map
+            // where incidents may become visible or hidden
+            map === null || map === void 0 ? void 0 : map.addEventListener('mapviewchangeend', fetchIncidents);
+            incidentsLayer = new H.map.layer.ObjectLayer(clusteredDataProvider);
+            map.addLayer(incidentsLayer);
+            console.log(`add layer - ${MAP_LAYER_INCIDENTS}`);
+        }
+        return () => {
+            var _a;
+            if (incidentsLayer) {
+                (_a = api.map) === null || _a === void 0 ? void 0 : _a.removeLayer(incidentsLayer);
+                incidentsLayer.dispose();
+                console.log(`remove layer - ${MAP_LAYER_INCIDENTS}`);
+            }
+            if (fetchIncidents) {
+                map === null || map === void 0 ? void 0 : map.removeEventListener('mapviewchangeend', fetchIncidents);
+            }
+        };
+    }, [api.map]);
+    const getTrafficIncidents = (clusteredDataProvider, bbox, center, lang) => {
+        var _a;
+        // NOTE: API traffic doesn't provide information for a bounding box got from a zoom level lower than 11
+        if (map && map.getZoom() < 11) {
+            console.log('Too much incidents to show, please zoom in');
+            return;
+        }
+        const area = `${bbox.getLeft()},${bbox.getBottom()},${bbox.getRight()},${bbox.getTop()}`;
+        const url = [
+            'https://data.traffic.hereapi.com/v7/incidents?in=',
+            `bbox:${area}`,
+            '&locationReferencing=shape',
+            `&apiKey=${(_a = api.credentials) === null || _a === void 0 ? void 0 : _a.apikey}`,
+        ].join('');
+        fetch(url)
+            .then(response => response.json())
+            .then(data => {
+            if (data.results) {
+                // Map the incidents, create a tooltip and render them on the map
+                const incidentDataPoints = mapIncidentsPoints(data, lang);
+                clusteredDataProvider.setDataPoints(incidentDataPoints);
+                setDataPoints(incidentDataPoints);
+            }
+        });
+    };
+    const mapIncidentsPoints = (incidents, lang) => {
+        const mappedDataPoints = [];
+        const mapIncidents = {
+            sourceUpdated: incidents.sourceUpdated,
+            results: [],
+        };
+        incidents.results.map(incident => {
+            const lat = incident.location.shape.links[0].points[0].lat;
+            const lng = incident.location.shape.links[0].points[0].lng;
+            const incidentData = {
+                id: incident.incidentDetails.id,
+                tooltipContent: getIncidentTooltip(incident, lang),
+                criticality: incident.incidentDetails.criticality,
+                description: incident.incidentDetails.description,
+                summary: incident.incidentDetails.summary,
+                comment: incident.incidentDetails.comment,
+                type: incident.incidentDetails.type,
+                startTime: incident.incidentDetails.startTime,
+                endTime: incident.incidentDetails.endTime,
+                roadClosed: incident.incidentDetails.roadClosed,
+                position: {
+                    lat,
+                    lng,
+                },
+            };
+            mapIncidents.results.push(incidentData);
+            mappedDataPoints.push(new H.clustering.DataPoint(lat, lng, 1, incidentData));
+        });
+        // Give back the list of incidents so the service can work with them
+        onIncidentsChange(mapIncidents);
+        return mappedDataPoints;
+    };
+    const getIncidentTooltip = (incident, lang) => {
+        const { comment = '', description, startTime, endTime } = incident.incidentDetails;
+        return `
+            <div class="text-size-12 line-height-16 margin-right-5 ${comment ? 'min-width-250' : 'min-width-150'}">
+                <div class="text-medium">${description.value}</div>
+                <div class="margin-top-5 text-color-dark">
+                    ${new Intl.DateTimeFormat(lang).format(Date.parse(startTime))} - 
+                    ${new Intl.DateTimeFormat(lang).format(Date.parse(endTime))}
+                </div>
+                <hr class="${comment ? 'margin-y-10' : 'display-none'}" />
+                <div>
+                    ${comment}
+                </div>
+            </div>
+        `;
+    };
+    const getIncidentMarkerColor = (noisePoint) => {
+        const criticality = noisePoint.getData().criticality;
+        // Note: It may happen that a "construction" type has a criticality of "critical" but the
+        // road is not closed. We should only show closed roads in "red".
+        switch (criticality) {
+            case 'minor':
+                return '#000';
+            case 'major':
+                return '#ffa100';
+            case 'critical':
+                return noisePoint.getData().roadClosed ? '#D5232F' : '#000';
+            default:
+                return '#000';
+        }
+    };
+    const getIncidentMarkerIcon = (noisePoint) => {
+        const type = noisePoint.getData().type;
+        const color = getIncidentMarkerColor(noisePoint);
+        // Missing: "roadHazard" - Straßenglätte
+        switch (type) {
+            case 'congestion':
+                return getIncidentCongestionSvg(color);
+            case 'roadClosure':
+                return getIncidentClosedSvg(color);
+            case 'construction':
+                return getIncidentConstructionSvg(color);
+            case 'other' && noisePoint.getData().roadClosed:
+                return getIncidentClosedSvg(color);
+            default:
+                return getIncidentGenericSvg(color);
+        }
+    };
+    const clearBubbles = () => {
+        var _a;
+        (_a = api.ui) === null || _a === void 0 ? void 0 : _a.getBubbles().forEach(bubble => {
+            var _a;
+            (_a = api.ui) === null || _a === void 0 ? void 0 : _a.removeBubble(bubble);
+        });
+    };
+    return null;
+};
+export default IncidentsLayer;

package/components/map/components/features/layers/overlayLayers/Layer.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="heremaps" />
+import type { MapApi } from '../../../../utils/mapTypes';
+export type LayerProps = {
+    id: string;
+    createLayer: (api: MapApi, useWebGL: boolean, baseLayerName: string, language: string) => H.map.layer.TileLayer | null;
+};
+declare const Layer: (props: LayerProps) => null;
+export default Layer;

package/components/map/components/features/layers/overlayLayers/Layer.js

@@ -0,0 +1,60 @@
+import { useEffect, useRef, useState } from 'react';
+import { useMapContext } from '../../../MapContext';
+import '../../../constants';
+const Layer = (props) => {
+    var _a;
+    const { id, createLayer } = props;
+    const [currentLayers, setCurrentLayers] = useState([]);
+    const currentLayerRef = useRef([]);
+    const { api, enableWebGL, language, baseLayer } = useMapContext();
+    // const [previousBaseLayer, setPreviousBaseLayer] = useState<string>();
+    // useEffect(() => {
+    //     // setCurrentLayers([]);
+    //     currentLayerRef.current.forEach(item => {
+    //         console.log('cleanup');
+    //         api.map?.removeLayer(item.layer);
+    //         item.layer.dispose();
+    //     });
+    //     currentLayerRef.current = [];
+    //     // setPreviousBaseLayer(baseLayer);
+    // }, [baseLayer]);
+    const mapLayers = (_a = api.map) === null || _a === void 0 ? void 0 : _a.getLayers();
+    console.log({ mapLayers: mapLayers === null || mapLayers === void 0 ? void 0 : mapLayers.asArray() });
+    useEffect(() => {
+        var _a;
+        const newLayer = createLayer(api, enableWebGL, baseLayer, language);
+        // console.log({ currentLayers: currentLayerRef.current });
+        // console.log({ mapLayer: api.map?.getLayers(), previousBaseLayer, baseLayer });
+        // const trafficLayer = api.map?.getLayers().get(20);
+        // const roadRestrictionLayer = api.map?.getLayers().get(30);
+        // console.log({ trafficLayer, roadRestrictionLayer });
+        // const hasLayer = currentLayerRef.current.find((item: any) => item.id === id);
+        // console.log({ hasLayer });
+        // if (newLayer && !hasLayer) {
+        // if (newLayer && api.map?.getLayers().getLength() === 0) {
+        if (newLayer) {
+            console.log(`add layer - ${id}`);
+            // const mapLayers = api.map?.getLayers();
+            // console.log({ mapLayers: mapLayers?.asArray() });
+            // const hasLayer = mapLayers?.asArray().includes(newLayer);
+            // console.log({ hasLayer });
+            (_a = api.map) === null || _a === void 0 ? void 0 : _a.addLayer(newLayer);
+            // setCurrentLayers([...currentLayers, { id, layer: newLayer }]);
+            // currentLayerRef.current = [...currentLayerRef.current, { id, layer: newLayer }];
+            // console.log({ currentLayers: currentLayerRef.current });
+        }
+        return () => {
+            var _a;
+            if (newLayer) {
+                (_a = api.map) === null || _a === void 0 ? void 0 : _a.removeLayer(newLayer);
+                newLayer.dispose();
+                console.log(`remove layer - ${id}`);
+                // setCurrentLayers([...currentLayers.filter((item: any) => item.id !== id)]);
+                // setCurrentLayers([]);
+                // currentLayerRef.current = [...currentLayerRef.current.filter((item: any) => item.id !== id)];
+            }
+        };
+    }, [api.map]);
+    return null;
+};
+export default Layer;

package/components/map/components/features/layers/overlayLayers/RoadRestrictionLayer.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import Layer from './Layer';
+export type RoadRestrictionLayerProps = Omit<React.ComponentProps<typeof Layer>, 'createLayer'> & {};
+declare const RoadRestrictionLayer: (props: RoadRestrictionLayerProps) => import("react/jsx-runtime").JSX.Element;
+export default RoadRestrictionLayer;

package/components/map/components/features/layers/overlayLayers/RoadRestrictionLayer.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @ts-ignore-next-line importsNotUsedAsValues
+import 'react';
+import { DEFAULT_RASTER_LAYER_FORMAT, DEFAULT_TILE_SIZE, ENGINE_TYPE_HARP, ENGINE_TYPE_P2D, } from '../../../constants';
+import Layer from './Layer';
+import { useMapContext } from '../../../MapContext';
+import { isVectorBased } from '../../../../utils/rendering';
+// Layer for rendering truck road signs
+const createRoadRestrictionLayer = (engineType, devicePixelRatio) => (api, useWebGL, baseLayerName, language) => {
+    var _a;
+    // @ts-ignore-next-line: according to the Here docs, the engine type exists
+    const trafficTileService = (_a = api.platform) === null || _a === void 0 ? void 0 : _a.getRasterTileService({
+        resource: 'blank',
+        format: DEFAULT_RASTER_LAYER_FORMAT,
+        queryParams: {
+            lang: language,
+            // Increase size of road sign for pixel maps and high resolutions, otherwise the icons are too small
+            ppi: engineType === ENGINE_TYPE_P2D && devicePixelRatio > 1 ? 200 : 100,
+            features: 'vehicle_restrictions:active_and_inactive',
+        },
+    });
+    // @ts-ignore-next-line: according to the Here docs, the engine type exists
+    const trafficTileProvider1 = new H.service.rasterTile.Provider(trafficTileService, {
+        engineType,
+        tileSize: DEFAULT_TILE_SIZE,
+    });
+    const trafficTileLayer = new H.map.layer.TileLayer(trafficTileProvider1);
+    console.log('createRoadRestrictionLayer');
+    return trafficTileLayer;
+};
+const RoadRestrictionLayer = (props) => {
+    const { enableWebGL, baseLayer, devicePixelRatio } = useMapContext();
+    const engineType = isVectorBased(enableWebGL, baseLayer) ? ENGINE_TYPE_HARP : ENGINE_TYPE_P2D;
+    const restrictionLayerCreator = createRoadRestrictionLayer(engineType, devicePixelRatio);
+    return _jsx(Layer, Object.assign({}, props, { createLayer: restrictionLayerCreator }));
+};
+export default RoadRestrictionLayer;

package/components/map/components/features/layers/overlayLayers/TrafficLayer.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import Layer from './Layer';
+export type TrafficLayerProps = Omit<React.ComponentProps<typeof Layer>, 'createLayer'> & {};
+declare const TrafficLayer: (props: TrafficLayerProps) => import("react/jsx-runtime").JSX.Element;
+export default TrafficLayer;