@rio-cloud/rio-uikit 2.0.0-beta.1 → 2.0.0-beta.2

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

@@ -1,41 +1,30 @@
-/* eslint-disable max-len */
-/* eslint-disable prefer-arrow/prefer-arrow-functions */
-import { useEffect, useState } from 'react';
-import { useMapContext } from "../../../MapContext.js";
-import { MAP_LAYER_INCIDENTS } from "../../../constants.js";
-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">
+import { useState as k, useEffect as P } from "react";
+import { useMapContext as _ } from "../../../MapContext.js";
+import { MAP_LAYER_INCIDENTS as v } from "../../../constants.js";
+const L = 34, M = 38, g = 26, f = 31, w = (o) => `<svg width="${g}" height="${f}" 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="${o}" 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">
+    </svg>`, R = (o) => `<svg width="${g}" height="${f}" 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 fill="${o}" 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">
+    </svg>`, C = (o) => `<svg width="${g}" height="${f}" 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="${o}" 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">
+    </svg>`, N = (o) => `<svg width="${g}" height="${f}" 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="${o}" 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">
+    </svg>`, A = (o) => `<svg xmlns="http://www.w3.org/2000/svg" width="${L}" height="${M}" 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" />
@@ -48,222 +37,158 @@ const getClusterSvg = (text) => `<svg xmlns="http://www.w3.org/2000/svg" width="
         <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) => {
-                            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,
-                            });
-                            api.ui?.addBubble(bubble);
-                        });
-                        noiseMarker.addEventListener('pointerleave', (_event) => {
-                            clearBubbles();
-                        });
-                        return noiseMarker;
-                    },
-                },
+        <text transform="translate(20 23)" fill="#fff" font-family="sans-serif" font-size="14" color="#fff" font-weight="600" text-anchor="middle">${o}</text>
+    </svg>`, G = () => {
+  const { api: o, language: D, onIncidentsChange: I } = _(), l = o.map, [m, y] = k([]);
+  P(() => {
+    let e, c;
+    if (l) {
+      const i = new H.clustering.Provider(m, {
+        min: 1,
+        max: 21,
+        clusteringOptions: {
+          minWeight: 3,
+          eps: 36
+        },
+        theme: {
+          getClusterPresentation(n) {
+            const t = A(n.getWeight()), a = L, s = M, r = new H.map.Icon(t, {
+              size: { w: a, h: s },
+              anchor: { x: a / 2, y: s / 2 }
+            }), d = new H.map.Marker(n.getPosition(), {
+              icon: r,
+              // Set min/max zoom with values from the cluster, otherwise
+              // clusters will be shown at all zoom levels:
+              min: n.getMinZoom(),
+              max: n.getMaxZoom()
             });
-            fetchIncidents = () => {
-                clearBubbles();
-                clusteredDataProvider.setDataPoints(dataPoints);
-                // HERE Maps API for JavaScript 3.1
-                const bbox = map.getViewModel().getLookAtData().bounds?.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?.addEventListener('mapviewchangeend', fetchIncidents);
-            incidentsLayer = new H.map.layer.ObjectLayer(clusteredDataProvider);
-            map.addLayer(incidentsLayer);
-            console.log(`add layer - ${MAP_LAYER_INCIDENTS}`);
-        }
-        return () => {
-            if (incidentsLayer) {
-                api.map?.removeLayer(incidentsLayer);
-                incidentsLayer.dispose();
-                console.log(`remove layer - ${MAP_LAYER_INCIDENTS}`);
-            }
-            if (fetchIncidents) {
-                map?.removeEventListener('mapviewchangeend', fetchIncidents);
-            }
-        };
-    }, [api.map]);
-    const getTrafficIncidents = (clusteredDataProvider, bbox, _center, lang) => {
-        // 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;
+            return d.setData(n), d;
+          },
+          getNoisePresentation(n) {
+            const t = B(n), a = g, s = f, r = new H.map.Icon(t, {
+              size: { w: a, h: s },
+              anchor: { x: a / 2, y: s }
+            }), d = new H.map.Marker(n.getPosition(), {
+              icon: r,
+              // Use min zoom from a noise point to show it correctly at certain zoom levels:
+              min: n.getMinZoom()
+            });
+            return d.setData(n), d.addEventListener("pointerenter", (p) => {
+              const E = p.target.getData().getData().tooltipContent, S = p.target.getData().getPosition(), h = l.geoToScreen(S);
+              h.x += 0, h.y += -f;
+              const b = new H.ui.InfoBubble(l.screenToGeo(h.x, h.y), {
+                content: E
+              });
+              o.ui?.addBubble(b);
+            }), d.addEventListener("pointerleave", (p) => {
+              u();
+            }), d;
+          }
         }
-        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=${api.credentials?.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);
-            }
-        });
+      });
+      c = () => {
+        u(), i.setDataPoints(m);
+        const n = l.getViewModel().getLookAtData().bounds?.getBoundingBox(), t = l.getViewModel().getLookAtData().position;
+        n && t && z(i, n, t, D);
+      }, c(), l?.addEventListener("mapviewchangeend", c), e = new H.map.layer.ObjectLayer(i), l.addLayer(e), console.log(`add layer - ${v}`);
+    }
+    return () => {
+      e && (o.map?.removeLayer(e), e.dispose(), console.log(`remove layer - ${v}`)), c && l?.removeEventListener("mapviewchangeend", c);
     };
-    const mapIncidentsPoints = (incidents, lang) => {
-        const mappedDataPoints = [];
-        const mapIncidents = {
-            sourceUpdated: incidents.sourceUpdated,
-            results: [],
-        };
-        incidents.results.forEach(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;
+  }, [o.map]);
+  const z = (e, c, i, n) => {
+    if (l && l.getZoom() < 11) {
+      console.log("Too much incidents to show, please zoom in");
+      return;
+    }
+    const a = [
+      "https://data.traffic.hereapi.com/v7/incidents?in=",
+      `bbox:${`${c.getLeft()},${c.getBottom()},${c.getRight()},${c.getTop()}`}`,
+      "&locationReferencing=shape",
+      `&apiKey=${o.credentials?.apikey}`
+    ].join("");
+    fetch(a).then((s) => s.json()).then((s) => {
+      if (s.results) {
+        const r = $(s, n);
+        e.setDataPoints(r), y(r);
+      }
+    });
+  }, $ = (e, c) => {
+    const i = [], n = {
+      sourceUpdated: e.sourceUpdated,
+      results: []
     };
-    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>
+    return e.results.forEach((t) => {
+      const a = t.location.shape.links[0].points[0].lat, s = t.location.shape.links[0].points[0].lng, r = {
+        id: t.incidentDetails.id,
+        tooltipContent: x(t, c),
+        criticality: t.incidentDetails.criticality,
+        description: t.incidentDetails.description,
+        summary: t.incidentDetails.summary,
+        comment: t.incidentDetails.comment,
+        type: t.incidentDetails.type,
+        startTime: t.incidentDetails.startTime,
+        endTime: t.incidentDetails.endTime,
+        roadClosed: t.incidentDetails.roadClosed,
+        position: {
+          lat: a,
+          lng: s
+        }
+      };
+      n.results.push(r), i.push(new H.clustering.DataPoint(a, s, 1, r));
+    }), I(n), i;
+  }, x = (e, c) => {
+    const { comment: i = "", description: n, startTime: t, endTime: a } = e.incidentDetails;
+    return `
+            <div class="text-size-12 line-height-16 margin-right-5 ${i ? "min-width-250" : "min-width-150"}">
+                <div class="text-medium">${n.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))}
+                    ${new Intl.DateTimeFormat(c).format(Date.parse(t))} - 
+                    ${new Intl.DateTimeFormat(c).format(Date.parse(a))}
                 </div>
-                <hr class="${comment ? 'margin-y-10' : 'display-none'}" />
+                <hr class="${i ? "margin-y-10" : "display-none"}" />
                 <div>
-                    ${comment}
+                    ${i}
                 </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':
-                if (noisePoint.getData().roadClosed) {
-                    return getIncidentClosedSvg(color);
-                }
-                return getIncidentGenericSvg(color);
-            default:
-                return getIncidentGenericSvg(color);
-        }
-    };
-    const clearBubbles = () => {
-        api.ui?.getBubbles().forEach(bubble => {
-            api.ui?.removeBubble(bubble);
-        });
-    };
-    return null;
+  }, T = (e) => {
+    switch (e.getData().criticality) {
+      case "minor":
+        return "#000";
+      case "major":
+        return "#ffa100";
+      case "critical":
+        return e.getData().roadClosed ? "#D5232F" : "#000";
+      default:
+        return "#000";
+    }
+  }, B = (e) => {
+    const c = e.getData().type, i = T(e);
+    switch (c) {
+      case "congestion":
+        return R(i);
+      case "roadClosure":
+        return C(i);
+      case "construction":
+        return N(i);
+      case "other":
+        return e.getData().roadClosed ? C(i) : w(i);
+      default:
+        return w(i);
+    }
+  }, u = () => {
+    o.ui?.getBubbles().forEach((e) => {
+      o.ui?.removeBubble(e);
+    });
+  };
+  return null;
+};
+export {
+  M as CLUSTER_ICON_HEIGHT,
+  L as CLUSTER_ICON_WIDTH,
+  f as MARKER_ICON_HEIGHT,
+  g as MARKER_ICON_WIDTH,
+  G as default
 };
-export default IncidentsLayer;
+//# sourceMappingURL=IncidentsLayer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IncidentsLayer.js","sources":["../../../../../../../src/components/map/components/features/layers/overlayLayers/IncidentsLayer.tsx"],"sourcesContent":["/* eslint-disable max-len */\n/* eslint-disable prefer-arrow/prefer-arrow-functions */\n\nimport { useEffect, useState } from 'react';\n\nimport { useMapContext } from '../../../MapContext';\nimport type { Incident, Incidents, MapIncidents } from '../../../../utils/mapTypes';\nimport { MAP_LAYER_INCIDENTS } from '../../../constants';\n\nexport const CLUSTER_ICON_WIDTH = 34;\nexport const CLUSTER_ICON_HEIGHT = 38;\n\nexport const MARKER_ICON_WIDTH = 26;\nexport const MARKER_ICON_HEIGHT = 31;\n\nconst getIncidentGenericSvg = (\n    color: string\n) => `<svg width=\"${MARKER_ICON_WIDTH}\" height=\"${MARKER_ICON_HEIGHT}\" xmlns=\"http://www.w3.org/2000/svg\" baseProfile=\"tiny\" viewBox=\"0 0 26 31\">\n        <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\"/>\n        <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\"/>\n        <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\"/>\n    </svg>`;\n\nconst getIncidentCongestionSvg = (\n    color: string\n) => `<svg width=\"${MARKER_ICON_WIDTH}\" height=\"${MARKER_ICON_HEIGHT}\" xmlns=\"http://www.w3.org/2000/svg\">\n        <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\"/>\n        <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\" />\n        <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\" />\n    </svg>`;\n\nconst getIncidentClosedSvg = (\n    color: string\n) => `<svg width=\"${MARKER_ICON_WIDTH}\" height=\"${MARKER_ICON_HEIGHT}\" viewBox=\"0 0 26 32\" xmlns=\"http://www.w3.org/2000/svg\">\n        <g fill=\"none\">\n            <g>\n                <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\" />\n                <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\" />\n                <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\" />\n                <path fill=\"#fff\" d=\"M9 15h1.5v3.8H9zM16 15h1.5v3.8H16z\" />\n                <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\" />\n                <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\" />\n            </g>\n        </g>\n    </svg>`;\n\nconst getIncidentConstructionSvg = (\n    color: string\n) => `<svg width=\"${MARKER_ICON_WIDTH}\" height=\"${MARKER_ICON_HEIGHT}\" xmlns=\"http://www.w3.org/2000/svg\">\n        <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\" />\n        <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\" />\n        <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\" />\n    </svg>`;\n\n// Create an SVG template for the cluster icon:\nconst getClusterSvg = (text: string | number) =>\n    `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"${CLUSTER_ICON_WIDTH}\" height=\"${CLUSTER_ICON_HEIGHT}\" viewBox=\"0 0 40 44\">\n        <g opacity=\".25\">\n            <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\" />\n            <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\" />\n        </g>\n        <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\"/>\n        <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\" />\n        <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\" />\n        <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\" />\n        <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\" />\n        <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\" />\n        <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\" />\n        <path fill=\"none\" d=\"M18.333 12.667H45.75v10.736H18.333z\" />\n        <text transform=\"translate(20 23)\" fill=\"#fff\" font-family=\"sans-serif\" font-size=\"14\" color=\"#fff\" font-weight=\"600\" text-anchor=\"middle\">${text}</text>\n    </svg>`;\n\nconst IncidentsLayer = () => {\n    const { api, language, onIncidentsChange } = useMapContext();\n    const map = api.map;\n\n    const [dataPoints, setDataPoints] = useState<H.clustering.DataPoint[]>([]);\n\n    useEffect(() => {\n        let incidentsLayer: H.map.layer.ObjectLayer;\n        let fetchIncidents: VoidFunction;\n\n        if (map) {\n            // Create a clustered data provider and a theme implementation:\n            const clusteredDataProvider = new H.clustering.Provider(dataPoints, {\n                min: 1,\n                max: 21,\n                clusteringOptions: {\n                    minWeight: 3,\n                    eps: 36,\n                },\n                theme: {\n                    getClusterPresentation(markerCluster) {\n                        const clusterSvgIcon = getClusterSvg(markerCluster.getWeight());\n\n                        const w = CLUSTER_ICON_WIDTH;\n                        const h = CLUSTER_ICON_HEIGHT;\n\n                        const clusterIcon = new H.map.Icon(clusterSvgIcon, {\n                            size: { w, h },\n                            anchor: { x: w / 2, y: h / 2 },\n                        });\n\n                        // Create a marker for clusters:\n                        const clusterMarker = new H.map.Marker(markerCluster.getPosition(), {\n                            icon: clusterIcon,\n                            // Set min/max zoom with values from the cluster, otherwise\n                            // clusters will be shown at all zoom levels:\n                            min: markerCluster.getMinZoom(),\n                            max: markerCluster.getMaxZoom(),\n                        });\n\n                        // Bind cluster data to the marker:\n                        clusterMarker.setData(markerCluster);\n\n                        return clusterMarker;\n                    },\n                    getNoisePresentation(noisePoint) {\n                        const markerSvgIcon = getIncidentMarkerIcon(noisePoint);\n\n                        const w = MARKER_ICON_WIDTH;\n                        const h = MARKER_ICON_HEIGHT;\n\n                        const noiseIcon = new H.map.Icon(markerSvgIcon, {\n                            size: { w, h },\n                            anchor: { x: w / 2, y: h },\n                        });\n\n                        // Create a marker for noise points:\n                        const noiseMarker = new H.map.Marker(noisePoint.getPosition(), {\n                            icon: noiseIcon,\n\n                            // Use min zoom from a noise point to show it correctly at certain zoom levels:\n                            min: noisePoint.getMinZoom(),\n                        });\n\n                        // Bind cluster data to the marker:\n                        noiseMarker.setData(noisePoint);\n\n                        noiseMarker.addEventListener('pointerenter', (event: H.util.Event) => {\n                            const tooltipContent = event.target.getData().getData().tooltipContent;\n                            const point = event.target.getData().getPosition();\n\n                            // Define the bubble arrow position\n                            const screenPosition = map.geoToScreen(point);\n                            screenPosition.x += 0;\n                            screenPosition.y += -MARKER_ICON_HEIGHT;\n\n                            const bubble = new H.ui.InfoBubble(map.screenToGeo(screenPosition.x, screenPosition.y), {\n                                content: tooltipContent,\n                            });\n\n                            api.ui?.addBubble(bubble);\n                        });\n\n                        noiseMarker.addEventListener('pointerleave', (_event: H.util.Event) => {\n                            clearBubbles();\n                        });\n\n                        return noiseMarker;\n                    },\n                },\n            });\n\n            fetchIncidents = () => {\n                clearBubbles();\n\n                clusteredDataProvider.setDataPoints(dataPoints);\n\n                // HERE Maps API for JavaScript 3.1\n                const bbox = map.getViewModel().getLookAtData().bounds?.getBoundingBox();\n                const center = map.getViewModel().getLookAtData().position;\n\n                if (bbox && center) {\n                    getTrafficIncidents(clusteredDataProvider, bbox, center, language);\n                }\n            };\n\n            // Initially fetch incidents\n            fetchIncidents();\n\n            // Re-fetch incidents when map view changes as it shows a different part of the map\n            // where incidents may become visible or hidden\n            map?.addEventListener('mapviewchangeend', fetchIncidents);\n\n            incidentsLayer = new H.map.layer.ObjectLayer(clusteredDataProvider);\n            map.addLayer(incidentsLayer);\n\n            console.log(`add layer - ${MAP_LAYER_INCIDENTS}`);\n        }\n        return () => {\n            if (incidentsLayer) {\n                api.map?.removeLayer(incidentsLayer);\n                incidentsLayer.dispose();\n                console.log(`remove layer - ${MAP_LAYER_INCIDENTS}`);\n            }\n\n            if (fetchIncidents) {\n                map?.removeEventListener('mapviewchangeend', fetchIncidents);\n            }\n        };\n    }, [api.map]);\n\n    const getTrafficIncidents = (\n        clusteredDataProvider: H.clustering.Provider,\n        bbox: H.geo.Rect,\n        _center: H.geo.IPoint,\n        lang: string\n    ) => {\n        // NOTE: API traffic doesn't provide information for a bounding box got from a zoom level lower than 11\n        if (map && map.getZoom() < 11) {\n            console.log('Too much incidents to show, please zoom in');\n            return;\n        }\n\n        const area = `${bbox.getLeft()},${bbox.getBottom()},${bbox.getRight()},${bbox.getTop()}`;\n\n        const url = [\n            'https://data.traffic.hereapi.com/v7/incidents?in=',\n            `bbox:${area}`,\n            '&locationReferencing=shape',\n            `&apiKey=${api.credentials?.apikey}`,\n        ].join('');\n\n        fetch(url)\n            .then(response => response.json())\n            .then(data => {\n                if (data.results) {\n                    // Map the incidents, create a tooltip and render them on the map\n                    const incidentDataPoints = mapIncidentsPoints(data, lang);\n                    clusteredDataProvider.setDataPoints(incidentDataPoints);\n\n                    setDataPoints(incidentDataPoints);\n                }\n            });\n    };\n\n    const mapIncidentsPoints = (incidents: Incidents, lang: string) => {\n        const mappedDataPoints: H.clustering.DataPoint[] = [];\n\n        const mapIncidents: MapIncidents = {\n            sourceUpdated: incidents.sourceUpdated,\n            results: [],\n        };\n\n        incidents.results.forEach(incident => {\n            const lat = incident.location.shape.links[0].points[0].lat;\n            const lng = incident.location.shape.links[0].points[0].lng;\n\n            const incidentData = {\n                id: incident.incidentDetails.id,\n                tooltipContent: getIncidentTooltip(incident, lang),\n                criticality: incident.incidentDetails.criticality,\n                description: incident.incidentDetails.description,\n                summary: incident.incidentDetails.summary,\n                comment: incident.incidentDetails.comment,\n                type: incident.incidentDetails.type,\n                startTime: incident.incidentDetails.startTime,\n                endTime: incident.incidentDetails.endTime,\n                roadClosed: incident.incidentDetails.roadClosed,\n                position: {\n                    lat,\n                    lng,\n                },\n            };\n\n            mapIncidents.results.push(incidentData);\n\n            mappedDataPoints.push(new H.clustering.DataPoint(lat, lng, 1, incidentData));\n        });\n\n        // Give back the list of incidents so the service can work with them\n        onIncidentsChange(mapIncidents);\n\n        return mappedDataPoints;\n    };\n\n    const getIncidentTooltip = (incident: Incident, lang: string) => {\n        const { comment = '', description, startTime, endTime } = incident.incidentDetails;\n\n        return `\n            <div class=\"text-size-12 line-height-16 margin-right-5 ${comment ? 'min-width-250' : 'min-width-150'}\">\n                <div class=\"text-medium\">${description.value}</div>\n                <div class=\"margin-top-5 text-color-dark\">\n                    ${new Intl.DateTimeFormat(lang).format(Date.parse(startTime))} - \n                    ${new Intl.DateTimeFormat(lang).format(Date.parse(endTime))}\n                </div>\n                <hr class=\"${comment ? 'margin-y-10' : 'display-none'}\" />\n                <div>\n                    ${comment}\n                </div>\n            </div>\n        `;\n    };\n\n    const getIncidentMarkerColor = (noisePoint: H.clustering.INoisePoint) => {\n        const criticality = noisePoint.getData().criticality;\n\n        // Note: It may happen that a \"construction\" type has a criticality of \"critical\" but the\n        // road is not closed. We should only show closed roads in \"red\".\n\n        switch (criticality) {\n            case 'minor':\n                return '#000';\n            case 'major':\n                return '#ffa100';\n            case 'critical':\n                return noisePoint.getData().roadClosed ? '#D5232F' : '#000';\n            default:\n                return '#000';\n        }\n    };\n\n    const getIncidentMarkerIcon = (noisePoint: H.clustering.INoisePoint) => {\n        const type = noisePoint.getData().type;\n        const color = getIncidentMarkerColor(noisePoint);\n\n        // Missing: \"roadHazard\" - Straßenglätte\n\n        switch (type) {\n            case 'congestion':\n                return getIncidentCongestionSvg(color);\n            case 'roadClosure':\n                return getIncidentClosedSvg(color);\n            case 'construction':\n                return getIncidentConstructionSvg(color);\n            case 'other':\n                if (noisePoint.getData().roadClosed) {\n                    return getIncidentClosedSvg(color);\n                }\n                return getIncidentGenericSvg(color);\n            default:\n                return getIncidentGenericSvg(color);\n        }\n    };\n\n    const clearBubbles = () => {\n        api.ui?.getBubbles().forEach(bubble => {\n            api.ui?.removeBubble(bubble);\n        });\n    };\n\n    return null;\n};\n\nexport default IncidentsLayer;\n"],"names":["CLUSTER_ICON_WIDTH","CLUSTER_ICON_HEIGHT","MARKER_ICON_WIDTH","MARKER_ICON_HEIGHT","getIncidentGenericSvg","color","getIncidentCongestionSvg","getIncidentClosedSvg","getIncidentConstructionSvg","getClusterSvg","text","IncidentsLayer","api","language","onIncidentsChange","useMapContext","map","dataPoints","setDataPoints","useState","useEffect","incidentsLayer","fetchIncidents","clusteredDataProvider","markerCluster","clusterSvgIcon","w","h","clusterIcon","clusterMarker","noisePoint","markerSvgIcon","getIncidentMarkerIcon","noiseIcon","noiseMarker","event","tooltipContent","point","screenPosition","bubble","_event","clearBubbles","bbox","center","getTrafficIncidents","MAP_LAYER_INCIDENTS","_center","lang","url","response","data","incidentDataPoints","mapIncidentsPoints","incidents","mappedDataPoints","mapIncidents","incident","lat","lng","incidentData","getIncidentTooltip","comment","description","startTime","endTime","getIncidentMarkerColor","type"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import type { MapApi } from '../../../../utils/mapTypes';
+import { MapApi } from '../../../../utils/mapTypes';
 export type LayerProps = {
     id: string;
     createLayer: (api: MapApi, useWebGL: boolean, baseLayerName: string, language: string) => H.map.layer.TileLayer | null;

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

@@ -1,56 +1,17 @@
-import { useEffect, useRef, useState } from 'react';
-import { useMapContext } from "../../../MapContext.js";
-const Layer = (props) => {
-    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 = api.map?.getLayers();
-    console.log({ mapLayers: mapLayers?.asArray() });
-    useEffect(() => {
-        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 });
-            api.map?.addLayer(newLayer);
-            // setCurrentLayers([...currentLayers, { id, layer: newLayer }]);
-            // currentLayerRef.current = [...currentLayerRef.current, { id, layer: newLayer }];
-            // console.log({ currentLayers: currentLayerRef.current });
-        }
-        return () => {
-            if (newLayer) {
-                api.map?.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;
+import { useState as c, useRef as m, useEffect as p } from "react";
+import { useMapContext as L } from "../../../MapContext.js";
+const g = (o) => {
+  const { id: r, createLayer: s } = o, [u, f] = c([]);
+  m([]);
+  const { api: e, enableWebGL: t, language: n, baseLayer: y } = L(), l = e.map?.getLayers();
+  return console.log({ mapLayers: l?.asArray() }), p(() => {
+    const a = s(e, t, y, n);
+    return a && (console.log(`add layer - ${r}`), e.map?.addLayer(a)), () => {
+      a && (e.map?.removeLayer(a), a.dispose(), console.log(`remove layer - ${r}`));
+    };
+  }, [e.map]), null;
 };
-export default Layer;
+export {
+  g as default
+};
+//# sourceMappingURL=Layer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Layer.js","sources":["../../../../../../../src/components/map/components/features/layers/overlayLayers/Layer.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport { useMapContext } from '../../../MapContext';\nimport type { MapApi } from '../../../../utils/mapTypes';\n\nexport type LayerProps = {\n    id: string;\n    createLayer: (\n        api: MapApi,\n        useWebGL: boolean,\n        baseLayerName: string,\n        language: string\n    ) => H.map.layer.TileLayer | null;\n};\n\nconst Layer = (props: LayerProps) => {\n    const { id, createLayer } = props;\n\n    const [currentLayers, setCurrentLayers] = useState<{ id: string; layer: H.map.layer.TileLayer }[]>([]);\n\n    const currentLayerRef = useRef<{ id: string; layer: H.map.layer.TileLayer }[]>([]);\n\n    const { api, enableWebGL, language, baseLayer } = useMapContext();\n\n    // const [previousBaseLayer, setPreviousBaseLayer] = useState<string>();\n\n    // useEffect(() => {\n    //     // setCurrentLayers([]);\n\n    //     currentLayerRef.current.forEach(item => {\n    //         console.log('cleanup');\n    //         api.map?.removeLayer(item.layer);\n    //         item.layer.dispose();\n    //     });\n\n    //     currentLayerRef.current = [];\n\n    //     // setPreviousBaseLayer(baseLayer);\n    // }, [baseLayer]);\n\n    const mapLayers = api.map?.getLayers();\n    console.log({ mapLayers: mapLayers?.asArray() });\n\n    useEffect(() => {\n        const newLayer = createLayer(api, enableWebGL, baseLayer, language);\n        // console.log({ currentLayers: currentLayerRef.current });\n\n        // console.log({ mapLayer: api.map?.getLayers(), previousBaseLayer, baseLayer });\n\n        // const trafficLayer = api.map?.getLayers().get(20);\n        // const roadRestrictionLayer = api.map?.getLayers().get(30);\n\n        // console.log({ trafficLayer, roadRestrictionLayer });\n        // const hasLayer = currentLayerRef.current.find((item: any) => item.id === id);\n        // console.log({ hasLayer });\n\n        // if (newLayer && !hasLayer) {\n        // if (newLayer && api.map?.getLayers().getLength() === 0) {\n        if (newLayer) {\n            console.log(`add layer - ${id}`);\n\n            // const mapLayers = api.map?.getLayers();\n            // console.log({ mapLayers: mapLayers?.asArray() });\n\n            // const hasLayer = mapLayers?.asArray().includes(newLayer);\n            // console.log({ hasLayer });\n\n            api.map?.addLayer(newLayer);\n\n            // setCurrentLayers([...currentLayers, { id, layer: newLayer }]);\n            // currentLayerRef.current = [...currentLayerRef.current, { id, layer: newLayer }];\n\n            // console.log({ currentLayers: currentLayerRef.current });\n        }\n\n        return () => {\n            if (newLayer) {\n                api.map?.removeLayer(newLayer);\n                newLayer.dispose();\n                console.log(`remove layer - ${id}`);\n\n                // setCurrentLayers([...currentLayers.filter((item: any) => item.id !== id)]);\n                // setCurrentLayers([]);\n                // currentLayerRef.current = [...currentLayerRef.current.filter((item: any) => item.id !== id)];\n            }\n        };\n    }, [api.map]);\n\n    return null;\n};\n\nexport default Layer;\n"],"names":["Layer","props","id","createLayer","currentLayers","setCurrentLayers","useState","useRef","api","enableWebGL","language","baseLayer","useMapContext","mapLayers","useEffect","newLayer"],"mappings":";;AAeA,MAAMA,IAAQ,CAACC,MAAsB;AACjC,QAAM,EAAE,IAAAC,GAAI,aAAAC,EAAA,IAAgBF,GAEtB,CAACG,GAAeC,CAAgB,IAAIC,EAAyD,CAAA,CAAE;AAE7E,EAAAC,EAAuD,CAAA,CAAE;AAEjF,QAAM,EAAE,KAAAC,GAAK,aAAAC,GAAa,UAAAC,GAAU,WAAAC,EAAA,IAAcC,EAAA,GAkB5CC,IAAYL,EAAI,KAAK,UAAA;AAC3B,iBAAQ,IAAI,EAAE,WAAWK,GAAW,QAAA,GAAW,GAE/CC,EAAU,MAAM;AACZ,UAAMC,IAAWZ,EAAYK,GAAKC,GAAaE,GAAWD,CAAQ;AAclE,WAAIK,MACA,QAAQ,IAAI,eAAeb,CAAE,EAAE,GAQ/BM,EAAI,KAAK,SAASO,CAAQ,IAQvB,MAAM;AACT,MAAIA,MACAP,EAAI,KAAK,YAAYO,CAAQ,GAC7BA,EAAS,QAAA,GACT,QAAQ,IAAI,kBAAkBb,CAAE,EAAE;AAAA,IAM1C;AAAA,EACJ,GAAG,CAACM,EAAI,GAAG,CAAC,GAEL;AACX;"}

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import Layer from './Layer';
+import { default as React } from 'react';
+import { default as 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;