@rio-cloud/rio-uikit 2.4.0 → 2.4.1

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

@@ -2,5 +2,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;
+export declare const buildTrafficIncidentsUrl: (area: string, apiKey?: string, language?: string) => string;
 declare const IncidentsLayer: () => null;
 export default IncidentsLayer;

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

@@ -1,30 +1,36 @@
 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">
+import { MAP_LAYER_INCIDENTS as C } from "../../../constants.js";
+const D = 34, I = 38, g = 26, f = 31, R = (c, p, h) => [
+  "https://data.traffic.hereapi.com/v7/incidents?in=",
+  `bbox:${c}`,
+  "&locationReferencing=shape",
+  h ? `&lang=${encodeURIComponent(h)}` : "",
+  `&apiKey=${p}`
+].join(""), L = (c) => `<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="${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="${c}" 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>`, R = (o) => `<svg width="${g}" height="${f}" xmlns="http://www.w3.org/2000/svg">
+    </svg>`, N = (c) => `<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="${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 fill="${c}" 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>`, C = (o) => `<svg width="${g}" height="${f}" viewBox="0 0 26 32" xmlns="http://www.w3.org/2000/svg">
+    </svg>`, M = (c) => `<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="${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="${c}" 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>`, N = (o) => `<svg width="${g}" height="${f}" xmlns="http://www.w3.org/2000/svg">
+    </svg>`, A = (c) => `<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="${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="${c}" 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>`, A = (o) => `<svg xmlns="http://www.w3.org/2000/svg" width="${L}" height="${M}" viewBox="0 0 40 44">
+    </svg>`, O = (c) => `<svg xmlns="http://www.w3.org/2000/svg" width="${D}" height="${I}" 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" />
@@ -37,13 +43,13 @@ const L = 34, M = 38, g = 26, f = 31, w = (o) => `<svg width="${g}" height="${f}
         <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">${o}</text>
+        <text transform="translate(20 23)" fill="#fff" font-family="sans-serif" font-size="14" color="#fff" font-weight="600" text-anchor="middle">${c}</text>
     </svg>`, G = () => {
-  const { api: o, language: D, onIncidentsChange: I } = _(), l = o.map, [m, y] = k([]);
+  const { api: c, language: p, onIncidentsChange: h } = _(), l = c.map, [v, y] = k([]);
   P(() => {
-    let e, c;
+    let e, i;
     if (l) {
-      const i = new H.clustering.Provider(m, {
+      const o = new H.clustering.Provider(v, {
         min: 1,
         max: 21,
         clusteringOptions: {
@@ -52,7 +58,7 @@ const L = 34, M = 38, g = 26, f = 31, w = (o) => `<svg width="${g}" height="${f}
         },
         theme: {
           getClusterPresentation(n) {
-            const t = A(n.getWeight()), a = L, s = M, r = new H.map.Icon(t, {
+            const t = O(n.getWeight()), a = D, s = I, 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(), {
@@ -65,7 +71,7 @@ const L = 34, M = 38, g = 26, f = 31, w = (o) => `<svg width="${g}" height="${f}
             return d.setData(n), d;
           },
           getNoisePresentation(n) {
-            const t = B(n), a = g, s = f, r = new H.map.Icon(t, {
+            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(), {
@@ -73,55 +79,50 @@ const L = 34, M = 38, g = 26, f = 31, w = (o) => `<svg width="${g}" height="${f}
               // 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
+            return d.setData(n), d.addEventListener("pointerenter", (u) => {
+              const B = u.target.getData().getData().tooltipContent, E = u.target.getData().getPosition(), m = l.geoToScreen(E);
+              m.x += 0, m.y += -f;
+              const S = new H.ui.InfoBubble(l.screenToGeo(m.x, m.y), {
+                content: B
               });
-              o.ui?.addBubble(b);
-            }), d.addEventListener("pointerleave", (p) => {
-              u();
+              c.ui?.addBubble(S);
+            }), d.addEventListener("pointerleave", (u) => {
+              w();
             }), d;
           }
         }
       });
-      c = () => {
-        u(), i.setDataPoints(m);
+      i = () => {
+        w(), o.setDataPoints(v);
         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}`);
+        n && t && z(o, n, t, p);
+      }, i(), l?.addEventListener("mapviewchangeend", i), e = new H.map.layer.ObjectLayer(o), l.addLayer(e), console.log(`add layer - ${C}`);
     }
     return () => {
-      e && (o.map?.removeLayer(e), e.dispose(), console.log(`remove layer - ${v}`)), c && l?.removeEventListener("mapviewchangeend", c);
+      e && (c.map?.removeLayer(e), e.dispose(), console.log(`remove layer - ${C}`)), i && l?.removeEventListener("mapviewchangeend", i);
     };
-  }, [o.map]);
-  const z = (e, c, i, n) => {
+  }, [c.map, p]);
+  const z = (e, i, o, 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("");
+    const t = `${i.getLeft()},${i.getBottom()},${i.getRight()},${i.getTop()}`, a = R(t, c.credentials?.apikey, n);
     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 = {
+  }, $ = (e, i) => {
+    const o = [], n = {
       sourceUpdated: e.sourceUpdated,
       results: []
     };
     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),
+        tooltipContent: x(t, i),
         criticality: t.incidentDetails.criticality,
         description: t.incidentDetails.description,
         summary: t.incidentDetails.summary,
@@ -135,20 +136,20 @@ const L = 34, M = 38, g = 26, f = 31, w = (o) => `<svg width="${g}" height="${f}
           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;
+      n.results.push(r), o.push(new H.clustering.DataPoint(a, s, 1, r));
+    }), h(n), o;
+  }, x = (e, i) => {
+    const { comment: o = "", 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-size-12 line-height-16 margin-right-5 ${o ? "min-width-250" : "min-width-150"}">
                 <div class="text-medium">${n.value}</div>
                 <div class="margin-top-5 text-color-dark">
-                    ${new Intl.DateTimeFormat(c).format(Date.parse(t))} - 
-                    ${new Intl.DateTimeFormat(c).format(Date.parse(a))}
+                    ${new Intl.DateTimeFormat(i).format(Date.parse(t))} - 
+                    ${new Intl.DateTimeFormat(i).format(Date.parse(a))}
                 </div>
-                <hr class="${i ? "margin-y-10" : "display-none"}" />
+                <hr class="${o ? "margin-y-10" : "display-none"}" />
                 <div>
-                    ${i}
+                    ${o}
                 </div>
             </div>
         `;
@@ -163,32 +164,33 @@ const L = 34, M = 38, g = 26, f = 31, w = (o) => `<svg width="${g}" height="${f}
       default:
         return "#000";
     }
-  }, B = (e) => {
-    const c = e.getData().type, i = T(e);
-    switch (c) {
+  }, b = (e) => {
+    const i = e.getData().type, o = T(e);
+    switch (i) {
       case "congestion":
-        return R(i);
+        return N(o);
       case "roadClosure":
-        return C(i);
+        return M(o);
       case "construction":
-        return N(i);
+        return A(o);
       case "other":
-        return e.getData().roadClosed ? C(i) : w(i);
+        return e.getData().roadClosed ? M(o) : L(o);
       default:
-        return w(i);
+        return L(o);
     }
-  }, u = () => {
-    o.ui?.getBubbles().forEach((e) => {
-      o.ui?.removeBubble(e);
+  }, w = () => {
+    c.ui?.getBubbles().forEach((e) => {
+      c.ui?.removeBubble(e);
     });
   };
   return null;
 };
 export {
-  M as CLUSTER_ICON_HEIGHT,
-  L as CLUSTER_ICON_WIDTH,
+  I as CLUSTER_ICON_HEIGHT,
+  D as CLUSTER_ICON_WIDTH,
   f as MARKER_ICON_HEIGHT,
   g as MARKER_ICON_WIDTH,
+  R as buildTrafficIncidentsUrl,
   G as default
 };
 //# sourceMappingURL=IncidentsLayer.js.map

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

@@ -1 +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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"}
+{"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\nexport const buildTrafficIncidentsUrl = (area: string, apiKey?: string, language?: string) =>\n    [\n        'https://data.traffic.hereapi.com/v7/incidents?in=',\n        `bbox:${area}`,\n        '&locationReferencing=shape',\n        language ? `&lang=${encodeURIComponent(language)}` : '',\n        `&apiKey=${apiKey}`,\n    ].join('');\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, language]);\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 = buildTrafficIncidentsUrl(area, api.credentials?.apikey, lang);\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","buildTrafficIncidentsUrl","area","apiKey","language","getIncidentGenericSvg","color","getIncidentCongestionSvg","getIncidentClosedSvg","getIncidentConstructionSvg","getClusterSvg","text","IncidentsLayer","api","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/TrafficLayer.js

@@ -22,7 +22,7 @@ const L = (e, r, a, t) => {
   return new H.map.layer.TileLayer(c);
 }, _ = (e, r, a) => {
   const t = new H.service.trafficVectorTile.Provider(
-    // @ts-expect-error-next-line
+    // @ts-expect-error-next-line: it works despite TS throwing an error
     e.platform?.getTrafficVectorTileService({ layer: "flow" }),
     // @ts-expect-error-next-line
     new H.map.render.harp.Style({}),

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

@@ -1 +1 @@
-{"version":3,"file":"TrafficLayer.js","sources":["../../../../../../../src/components/map/components/features/layers/overlayLayers/TrafficLayer.tsx"],"sourcesContent":["// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains\nimport React from 'react';\n\nimport { DEFAULT_RASTER_LAYER_FORMAT, DEFAULT_TILE_SIZE, ENGINE_TYPE_HARP, ENGINE_TYPE_P2D } from '../../../constants';\nimport Layer from './Layer';\nimport type { MapApi } from '../../../../utils/mapTypes';\nimport { useMapContext } from '../../../MapContext';\nimport { isVectorBased } from '../../../../utils/rendering';\n\nconst createRasterTrafficLayer = (api: MapApi, _useWebGL: boolean, _baseLayerName: string, language: string) => {\n    // Traffic\n    const baseTrafficUrl = new H.service.Url('https', 'traffic.maps.hereapi.com');\n\n    // @ts-expect-error-next-line: according to the Here docs, the engine type exists\n    const trafficTileService = api.platform?.getRasterTileService({\n        baseUrl: baseTrafficUrl,\n        format: DEFAULT_RASTER_LAYER_FORMAT,\n        path: 'v3',\n        resource: 'flow',\n        queryParams: {\n            apikey: api.credentials?.apikey,\n            lang: language,\n            ppi: 400,\n            style: 'explore.day',\n        },\n    });\n\n    // @ts-expect-error-next-line: according to the Here docs, the engine type exists\n    const trafficTileProvider = new H.service.rasterTile.Provider(trafficTileService, {\n        engineType: ENGINE_TYPE_P2D,\n        tileSize: DEFAULT_TILE_SIZE,\n    });\n\n    const trafficTileLayer = new H.map.layer.TileLayer(trafficTileProvider);\n\n    return trafficTileLayer;\n};\n\nconst createVectorTrafficLayer = (api: MapApi, _useWebGL: boolean, _baseLayerName: string) => {\n    // @ts-expect-error-next-line\n    const providerTrafficFlow = new H.service.trafficVectorTile.Provider(\n        // @ts-expect-error-next-line\n        api.platform?.getTrafficVectorTileService({ layer: 'flow' }),\n        // @ts-expect-error-next-line\n        new H.map.render.harp.Style({}),\n        { engineType: ENGINE_TYPE_HARP }\n    );\n\n    // @ts-expect-error-next-line:\n    const trafficFlowLayer = new H.map.layer.TileLayer(providerTrafficFlow, { min: 2, max: 24 });\n\n    return trafficFlowLayer;\n};\n\nexport type TrafficLayerProps = Omit<React.ComponentProps<typeof Layer>, 'createLayer'> & {};\n\nconst TrafficLayer = (props: TrafficLayerProps) => {\n    const mapContext = useMapContext();\n\n    const layerCreator = isVectorBased(mapContext.enableWebGL, mapContext.baseLayer)\n        ? createVectorTrafficLayer\n        : createRasterTrafficLayer;\n\n    return <Layer {...props} createLayer={layerCreator} />;\n};\n\nexport default TrafficLayer;\n"],"names":["createRasterTrafficLayer","api","_useWebGL","_baseLayerName","language","baseTrafficUrl","trafficTileService","DEFAULT_RASTER_LAYER_FORMAT","trafficTileProvider","ENGINE_TYPE_P2D","DEFAULT_TILE_SIZE","createVectorTrafficLayer","providerTrafficFlow","ENGINE_TYPE_HARP","TrafficLayer","props","mapContext","useMapContext","layerCreator","isVectorBased","jsx","Layer"],"mappings":";;;;;AASA,MAAMA,IAA2B,CAACC,GAAaC,GAAoBC,GAAwBC,MAAqB;AAE5G,QAAMC,IAAiB,IAAI,EAAE,QAAQ,IAAI,SAAS,0BAA0B,GAGtEC,IAAqBL,EAAI,UAAU,qBAAqB;AAAA,IAC1D,SAASI;AAAA,IACT,QAAQE;AAAA,IACR,MAAM;AAAA,IACN,UAAU;AAAA,IACV,aAAa;AAAA,MACT,QAAQN,EAAI,aAAa;AAAA,MACzB,MAAMG;AAAA,MACN,KAAK;AAAA,MACL,OAAO;AAAA,IAAA;AAAA,EACX,CACH,GAGKI,IAAsB,IAAI,EAAE,QAAQ,WAAW,SAASF,GAAoB;AAAA,IAC9E,YAAYG;AAAA,IACZ,UAAUC;AAAA,EAAA,CACb;AAID,SAFyB,IAAI,EAAE,IAAI,MAAM,UAAUF,CAAmB;AAG1E,GAEMG,IAA2B,CAACV,GAAaC,GAAoBC,MAA2B;AAE1F,QAAMS,IAAsB,IAAI,EAAE,QAAQ,kBAAkB;AAAA;AAAA,IAExDX,EAAI,UAAU,4BAA4B,EAAE,OAAO,QAAQ;AAAA;AAAA,IAE3D,IAAI,EAAE,IAAI,OAAO,KAAK,MAAM,CAAA,CAAE;AAAA,IAC9B,EAAE,YAAYY,EAAA;AAAA,EAAiB;AAMnC,SAFyB,IAAI,EAAE,IAAI,MAAM,UAAUD,GAAqB,EAAE,KAAK,GAAG,KAAK,GAAA,CAAI;AAG/F,GAIME,IAAe,CAACC,MAA6B;AAC/C,QAAMC,IAAaC,EAAA,GAEbC,IAAeC,EAAcH,EAAW,aAAaA,EAAW,SAAS,IACzEL,IACAX;AAEN,SAAO,gBAAAoB,EAACC,GAAA,EAAO,GAAGN,GAAO,aAAaG,GAAc;AACxD;"}
+{"version":3,"file":"TrafficLayer.js","sources":["../../../../../../../src/components/map/components/features/layers/overlayLayers/TrafficLayer.tsx"],"sourcesContent":["// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains\nimport React from 'react';\n\nimport { DEFAULT_RASTER_LAYER_FORMAT, DEFAULT_TILE_SIZE, ENGINE_TYPE_HARP, ENGINE_TYPE_P2D } from '../../../constants';\nimport Layer from './Layer';\nimport type { MapApi } from '../../../../utils/mapTypes';\nimport { useMapContext } from '../../../MapContext';\nimport { isVectorBased } from '../../../../utils/rendering';\n\nconst createRasterTrafficLayer = (api: MapApi, _useWebGL: boolean, _baseLayerName: string, language: string) => {\n    // Traffic\n    const baseTrafficUrl = new H.service.Url('https', 'traffic.maps.hereapi.com');\n\n    // @ts-expect-error-next-line: it works despite TS throwing an error\n    const trafficTileService = api.platform?.getRasterTileService({\n        baseUrl: baseTrafficUrl,\n        format: DEFAULT_RASTER_LAYER_FORMAT,\n        path: 'v3',\n        resource: 'flow',\n        queryParams: {\n            apikey: api.credentials?.apikey,\n            lang: language,\n            ppi: 400,\n            style: 'explore.day',\n        },\n    });\n\n    // @ts-expect-error-next-line: according to the Here docs, the engine type exists\n    const trafficTileProvider = new H.service.rasterTile.Provider(trafficTileService, {\n        engineType: ENGINE_TYPE_P2D,\n        tileSize: DEFAULT_TILE_SIZE,\n    });\n\n    const trafficTileLayer = new H.map.layer.TileLayer(trafficTileProvider);\n\n    return trafficTileLayer;\n};\n\nconst createVectorTrafficLayer = (api: MapApi, _useWebGL: boolean, _baseLayerName: string) => {\n    // @ts-expect-error-next-line\n    const providerTrafficFlow = new H.service.trafficVectorTile.Provider(\n        // @ts-expect-error-next-line: it works despite TS throwing an error\n        api.platform?.getTrafficVectorTileService({ layer: 'flow' }),\n        // @ts-expect-error-next-line\n        new H.map.render.harp.Style({}),\n        { engineType: ENGINE_TYPE_HARP }\n    );\n\n    // @ts-expect-error-next-line:\n    const trafficFlowLayer = new H.map.layer.TileLayer(providerTrafficFlow, { min: 2, max: 24 });\n\n    return trafficFlowLayer;\n};\n\nexport type TrafficLayerProps = Omit<React.ComponentProps<typeof Layer>, 'createLayer'> & {};\n\nconst TrafficLayer = (props: TrafficLayerProps) => {\n    const mapContext = useMapContext();\n\n    const layerCreator = isVectorBased(mapContext.enableWebGL, mapContext.baseLayer)\n        ? createVectorTrafficLayer\n        : createRasterTrafficLayer;\n\n    return <Layer {...props} createLayer={layerCreator} />;\n};\n\nexport default TrafficLayer;\n"],"names":["createRasterTrafficLayer","api","_useWebGL","_baseLayerName","language","baseTrafficUrl","trafficTileService","DEFAULT_RASTER_LAYER_FORMAT","trafficTileProvider","ENGINE_TYPE_P2D","DEFAULT_TILE_SIZE","createVectorTrafficLayer","providerTrafficFlow","ENGINE_TYPE_HARP","TrafficLayer","props","mapContext","useMapContext","layerCreator","isVectorBased","jsx","Layer"],"mappings":";;;;;AASA,MAAMA,IAA2B,CAACC,GAAaC,GAAoBC,GAAwBC,MAAqB;AAE5G,QAAMC,IAAiB,IAAI,EAAE,QAAQ,IAAI,SAAS,0BAA0B,GAGtEC,IAAqBL,EAAI,UAAU,qBAAqB;AAAA,IAC1D,SAASI;AAAA,IACT,QAAQE;AAAA,IACR,MAAM;AAAA,IACN,UAAU;AAAA,IACV,aAAa;AAAA,MACT,QAAQN,EAAI,aAAa;AAAA,MACzB,MAAMG;AAAA,MACN,KAAK;AAAA,MACL,OAAO;AAAA,IAAA;AAAA,EACX,CACH,GAGKI,IAAsB,IAAI,EAAE,QAAQ,WAAW,SAASF,GAAoB;AAAA,IAC9E,YAAYG;AAAA,IACZ,UAAUC;AAAA,EAAA,CACb;AAID,SAFyB,IAAI,EAAE,IAAI,MAAM,UAAUF,CAAmB;AAG1E,GAEMG,IAA2B,CAACV,GAAaC,GAAoBC,MAA2B;AAE1F,QAAMS,IAAsB,IAAI,EAAE,QAAQ,kBAAkB;AAAA;AAAA,IAExDX,EAAI,UAAU,4BAA4B,EAAE,OAAO,QAAQ;AAAA;AAAA,IAE3D,IAAI,EAAE,IAAI,OAAO,KAAK,MAAM,CAAA,CAAE;AAAA,IAC9B,EAAE,YAAYY,EAAA;AAAA,EAAiB;AAMnC,SAFyB,IAAI,EAAE,IAAI,MAAM,UAAUD,GAAqB,EAAE,KAAK,GAAG,KAAK,GAAA,CAAI;AAG/F,GAIME,IAAe,CAACC,MAA6B;AAC/C,QAAMC,IAAaC,EAAA,GAEbC,IAAeC,EAAcH,EAAW,aAAaA,EAAW,SAAS,IACzEL,IACAX;AAEN,SAAO,gBAAAoB,EAACC,GAAA,EAAO,GAAGN,GAAO,aAAaG,GAAc;AACxD;"}