@rio-cloud/rio-uikit 2.5.1 → 3.0.0-beta.1

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

@@ -1,36 +1,36 @@
-import { useState as k, useEffect as P } from "react";
-import { useMapContext as _ } from "../../../MapContext.js";
-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">
+import { MAP_LAYER_INCIDENTS as e } from "../../../constants.js";
+import { useMapContext as t } from "../../../MapContext.js";
+import { useEffect as n, useState as r } from "react";
+var i = (e, t, n) => [
+	"https://data.traffic.hereapi.com/v7/incidents?in=",
+	`bbox:${e}`,
+	"&locationReferencing=shape",
+	n ? `&lang=${encodeURIComponent(n)}` : "",
+	`&apiKey=${t}`
+].join(""), a = (e) => `<svg width="26" height="31" 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="${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="${e}" 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>`, N = (c) => `<svg width="${g}" height="${f}" xmlns="http://www.w3.org/2000/svg">
+    </svg>`, o = (e) => `<svg width="26" height="31" 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="${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 fill="${e}" 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>`, M = (c) => `<svg width="${g}" height="${f}" viewBox="0 0 26 32" xmlns="http://www.w3.org/2000/svg">
+    </svg>`, s = (e) => `<svg width="26" height="31" 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="${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="${e}" 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>`, A = (c) => `<svg width="${g}" height="${f}" xmlns="http://www.w3.org/2000/svg">
+    </svg>`, c = (e) => `<svg width="26" height="31" 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="${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="${e}" 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>`, O = (c) => `<svg xmlns="http://www.w3.org/2000/svg" width="${D}" height="${I}" viewBox="0 0 40 44">
+    </svg>`, l = (e) => `<svg xmlns="http://www.w3.org/2000/svg" width="34" height="38" 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" />
@@ -43,154 +43,147 @@ const D = 34, I = 38, g = 26, f = 31, R = (c, p, h) => [
         <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">${c}</text>
-    </svg>`, G = () => {
-  const { api: c, language: p, onIncidentsChange: h } = _(), l = c.map, [v, y] = k([]);
-  P(() => {
-    let e, i;
-    if (l) {
-      const o = new H.clustering.Provider(v, {
-        min: 1,
-        max: 21,
-        clusteringOptions: {
-          minWeight: 3,
-          eps: 36
-        },
-        theme: {
-          getClusterPresentation(n) {
-            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(), {
-              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()
-            });
-            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", (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
-              });
-              c.ui?.addBubble(S);
-            }), d.addEventListener("pointerleave", (u) => {
-              w();
-            }), d;
-          }
-        }
-      });
-      i = () => {
-        w(), o.setDataPoints(v);
-        const n = l.getViewModel().getLookAtData().bounds?.getBoundingBox(), t = l.getViewModel().getLookAtData().position;
-        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 && (c.map?.removeLayer(e), e.dispose(), console.log(`remove layer - ${C}`)), i && l?.removeEventListener("mapviewchangeend", i);
-    };
-  }, [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 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, 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, i),
-        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), 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 ${o ? "min-width-250" : "min-width-150"}">
-                <div class="text-medium">${n.value}</div>
+        <text transform="translate(20 23)" fill="#fff" font-family="sans-serif" font-size="14" color="#fff" font-weight="600" text-anchor="middle">${e}</text>
+    </svg>`, u = () => {
+	let { api: u, language: d, onIncidentsChange: f } = t(), p = u.map, [m, h] = r([]);
+	n(() => {
+		let t, n;
+		if (p) {
+			let r = new H.clustering.Provider(m, {
+				min: 1,
+				max: 21,
+				clusteringOptions: {
+					minWeight: 3,
+					eps: 36
+				},
+				theme: {
+					getClusterPresentation(e) {
+						let t = l(e.getWeight()), n = new H.map.Icon(t, {
+							size: {
+								w: 34,
+								h: 38
+							},
+							anchor: {
+								x: 34 / 2,
+								y: 38 / 2
+							}
+						}), r = new H.map.Marker(e.getPosition(), {
+							icon: n,
+							min: e.getMinZoom(),
+							max: e.getMaxZoom()
+						});
+						return r.setData(e), r;
+					},
+					getNoisePresentation(e) {
+						let t = b(e), n = new H.map.Icon(t, {
+							size: {
+								w: 26,
+								h: 31
+							},
+							anchor: {
+								x: 26 / 2,
+								y: 31
+							}
+						}), r = new H.map.Marker(e.getPosition(), {
+							icon: n,
+							min: e.getMinZoom()
+						});
+						return r.setData(e), r.addEventListener("pointerenter", (e) => {
+							let t = e.target.getData().getData().tooltipContent, n = e.target.getData().getPosition(), r = p.geoToScreen(n);
+							r.x += 0, r.y += -31;
+							let i = new H.ui.InfoBubble(p.screenToGeo(r.x, r.y), { content: t });
+							u.ui?.addBubble(i);
+						}), r.addEventListener("pointerleave", (e) => {
+							x();
+						}), r;
+					}
+				}
+			});
+			n = () => {
+				x(), r.setDataPoints(m);
+				let e = p.getViewModel().getLookAtData().bounds?.getBoundingBox(), t = p.getViewModel().getLookAtData().position;
+				e && t && g(r, e, t, d);
+			}, n(), p?.addEventListener("mapviewchangeend", n), t = new H.map.layer.ObjectLayer(r), p.addLayer(t), console.log(`add layer - ${e}`);
+		}
+		return () => {
+			t && (u.map?.removeLayer(t), t.dispose(), console.log(`remove layer - ${e}`)), n && p?.removeEventListener("mapviewchangeend", n);
+		};
+	}, [u.map, d]);
+	let g = (e, t, n, r) => {
+		if (p && p.getZoom() < 11) {
+			console.log("Too much incidents to show, please zoom in");
+			return;
+		}
+		let a = i(`${t.getLeft()},${t.getBottom()},${t.getRight()},${t.getTop()}`, u.credentials?.apikey, r);
+		fetch(a).then((e) => e.json()).then((t) => {
+			if (t.results) {
+				let n = _(t, r);
+				e.setDataPoints(n), h(n);
+			}
+		});
+	}, _ = (e, t) => {
+		let n = [], r = {
+			sourceUpdated: e.sourceUpdated,
+			results: []
+		};
+		return e.results.forEach((e) => {
+			let i = e.location.shape.links[0].points[0].lat, a = e.location.shape.links[0].points[0].lng, o = {
+				id: e.incidentDetails.id,
+				tooltipContent: v(e, t),
+				criticality: e.incidentDetails.criticality,
+				description: e.incidentDetails.description,
+				summary: e.incidentDetails.summary,
+				comment: e.incidentDetails.comment,
+				type: e.incidentDetails.type,
+				startTime: e.incidentDetails.startTime,
+				endTime: e.incidentDetails.endTime,
+				roadClosed: e.incidentDetails.roadClosed,
+				position: {
+					lat: i,
+					lng: a
+				}
+			};
+			r.results.push(o), n.push(new H.clustering.DataPoint(i, a, 1, o));
+		}), f(r), n;
+	}, v = (e, t) => {
+		let { comment: n = "", description: r, startTime: i, endTime: a } = e.incidentDetails;
+		return `
+            <div class="text-size-12 line-height-16 margin-right-5 ${n ? "min-width-250" : "min-width-150"}">
+                <div class="text-medium">${r.value}</div>
                 <div class="margin-top-5 text-color-dark">
-                    ${new Intl.DateTimeFormat(i).format(Date.parse(t))} - 
-                    ${new Intl.DateTimeFormat(i).format(Date.parse(a))}
+                    ${new Intl.DateTimeFormat(t).format(Date.parse(i))} - 
+                    ${new Intl.DateTimeFormat(t).format(Date.parse(a))}
                 </div>
-                <hr class="${o ? "margin-y-10" : "display-none"}" />
+                <hr class="${n ? "margin-y-10" : "display-none"}" />
                 <div>
-                    ${o}
+                    ${n}
                 </div>
             </div>
         `;
-  }, 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 i = e.getData().type, o = T(e);
-    switch (i) {
-      case "congestion":
-        return N(o);
-      case "roadClosure":
-        return M(o);
-      case "construction":
-        return A(o);
-      case "other":
-        return e.getData().roadClosed ? M(o) : L(o);
-      default:
-        return L(o);
-    }
-  }, w = () => {
-    c.ui?.getBubbles().forEach((e) => {
-      c.ui?.removeBubble(e);
-    });
-  };
-  return null;
+	}, y = (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) => {
+		let t = e.getData().type, n = y(e);
+		switch (t) {
+			case "congestion": return o(n);
+			case "roadClosure": return s(n);
+			case "construction": return c(n);
+			case "other": return e.getData().roadClosed ? s(n) : a(n);
+			default: return a(n);
+		}
+	}, x = () => {
+		u.ui?.getBubbles().forEach((e) => {
+			u.ui?.removeBubble(e);
+		});
+	};
+	return null;
 };
-export {
-  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
+//#endregion
+export { i as buildTrafficIncidentsUrl, u 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\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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"}
+{"version":3,"file":"IncidentsLayer.js","names":[],"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"],"mappings":";;;AAeA,IAAa,KAA4B,GAAc,GAAiB,MACpE;CACI;CACA,QAAQ;CACR;CACA,IAAW,SAAS,mBAAmB,CAAQ,MAAM;CACrD,WAAW;AACf,CAAC,CAAC,KAAK,EAAE,GAEP,KACF,MACC;;sBAEiB,EAAM;;aAItB,KACF,MACC;;sBAEiB,EAAM;;aAItB,KACF,MACC;;;;8BAIyB,EAAM;;;;;;;aAS9B,KACF,MACC;;sBAEiB,EAAM;;aAKtB,KAAiB,MACnB;;;;;;;;;;;;;qJAaiJ,EAAK;aAGpJ,UAAuB;CACzB,IAAM,EAAE,QAAK,aAAU,yBAAsB,EAAc,GACrD,IAAM,EAAI,KAEV,CAAC,GAAY,KAAiB,EAAmC,CAAC,CAAC;CAEzE,QAAgB;EACZ,IAAI,GACA;EAEJ,IAAI,GAAK;GAEL,IAAM,IAAwB,IAAI,EAAE,WAAW,SAAS,GAAY;IAChE,KAAK;IACL,KAAK;IACL,mBAAmB;KACf,WAAW;KACX,KAAK;IACT;IACA,OAAO;KACH,uBAAuB,GAAe;MAClC,IAAM,IAAiB,EAAc,EAAc,UAAU,CAAC,GAKxD,IAAc,IAAI,EAAE,IAAI,KAAK,GAAgB;OAC/C,MAAM;QAAE;QAAG;OAAE;OACb,QAAQ;QAAE,GAAG,KAAI;QAAG,GAAG,KAAI;OAAE;MACjC,CAAC,GAGK,IAAgB,IAAI,EAAE,IAAI,OAAO,EAAc,YAAY,GAAG;OAChE,MAAM;OAGN,KAAK,EAAc,WAAW;OAC9B,KAAK,EAAc,WAAW;MAClC,CAAC;MAKD,OAFA,EAAc,QAAQ,CAAa,GAE5B;KACX;KACA,qBAAqB,GAAY;MAC7B,IAAM,IAAgB,EAAsB,CAAU,GAKhD,IAAY,IAAI,EAAE,IAAI,KAAK,GAAe;OAC5C,MAAM;QAAE;QAAG;OAAE;OACb,QAAQ;QAAE,GAAG,KAAI;QAAG,GAAG;OAAE;MAC7B,CAAC,GAGK,IAAc,IAAI,EAAE,IAAI,OAAO,EAAW,YAAY,GAAG;OAC3D,MAAM;OAGN,KAAK,EAAW,WAAW;MAC/B,CAAC;MAyBD,OAtBA,EAAY,QAAQ,CAAU,GAE9B,EAAY,iBAAiB,iBAAiB,MAAwB;OAClE,IAAM,IAAiB,EAAM,OAAO,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAC,gBAClD,IAAQ,EAAM,OAAO,QAAQ,CAAC,CAAC,YAAY,GAG3C,IAAiB,EAAI,YAAY,CAAK;OAE5C,AADA,EAAe,KAAK,GACpB,EAAe,KAAK;OAEpB,IAAM,IAAS,IAAI,EAAE,GAAG,WAAW,EAAI,YAAY,EAAe,GAAG,EAAe,CAAC,GAAG,EACpF,SAAS,EACb,CAAC;OAED,EAAI,IAAI,UAAU,CAAM;MAC5B,CAAC,GAED,EAAY,iBAAiB,iBAAiB,MAAyB;OACnE,EAAa;MACjB,CAAC,GAEM;KACX;IACJ;GACJ,CAAC;GA0BD,AAxBA,UAAuB;IAGnB,AAFA,EAAa,GAEb,EAAsB,cAAc,CAAU;IAG9C,IAAM,IAAO,EAAI,aAAa,CAAC,CAAC,cAAc,CAAC,CAAC,QAAQ,eAAe,GACjE,IAAS,EAAI,aAAa,CAAC,CAAC,cAAc,CAAC,CAAC;IAElD,AAAI,KAAQ,KACR,EAAoB,GAAuB,GAAM,GAAQ,CAAQ;GAEzE,GAGA,EAAe,GAIf,GAAK,iBAAiB,oBAAoB,CAAc,GAExD,IAAiB,IAAI,EAAE,IAAI,MAAM,YAAY,CAAqB,GAClE,EAAI,SAAS,CAAc,GAE3B,QAAQ,IAAI,eAAe,GAAqB;EACpD;EACA,aAAa;GAOT,AANI,MACA,EAAI,KAAK,YAAY,CAAc,GACnC,EAAe,QAAQ,GACvB,QAAQ,IAAI,kBAAkB,GAAqB,IAGnD,KACA,GAAK,oBAAoB,oBAAoB,CAAc;EAEnE;CACJ,GAAG,CAAC,EAAI,KAAK,CAAQ,CAAC;CAEtB,IAAM,KACF,GACA,GACA,GACA,MACC;EAED,IAAI,KAAO,EAAI,QAAQ,IAAI,IAAI;GAC3B,QAAQ,IAAI,4CAA4C;GACxD;EACJ;EAIA,IAAM,IAAM,EAAyB,GAFrB,EAAK,QAAQ,EAAE,GAAG,EAAK,UAAU,EAAE,GAAG,EAAK,SAAS,EAAE,GAAG,EAAK,OAAO,KAE1C,EAAI,aAAa,QAAQ,CAAI;EAExE,MAAM,CAAG,CAAC,CACL,MAAK,MAAY,EAAS,KAAK,CAAC,CAAC,CACjC,MAAK,MAAQ;GACV,IAAI,EAAK,SAAS;IAEd,IAAM,IAAqB,EAAmB,GAAM,CAAI;IAGxD,AAFA,EAAsB,cAAc,CAAkB,GAEtD,EAAc,CAAkB;GACpC;EACJ,CAAC;CACT,GAEM,KAAsB,GAAsB,MAAiB;EAC/D,IAAM,IAA6C,CAAC,GAE9C,IAA6B;GAC/B,eAAe,EAAU;GACzB,SAAS,CAAC;EACd;EA+BA,OA7BA,EAAU,QAAQ,SAAQ,MAAY;GAClC,IAAM,IAAM,EAAS,SAAS,MAAM,MAAM,EAAE,CAAC,OAAO,EAAE,CAAC,KACjD,IAAM,EAAS,SAAS,MAAM,MAAM,EAAE,CAAC,OAAO,EAAE,CAAC,KAEjD,IAAe;IACjB,IAAI,EAAS,gBAAgB;IAC7B,gBAAgB,EAAmB,GAAU,CAAI;IACjD,aAAa,EAAS,gBAAgB;IACtC,aAAa,EAAS,gBAAgB;IACtC,SAAS,EAAS,gBAAgB;IAClC,SAAS,EAAS,gBAAgB;IAClC,MAAM,EAAS,gBAAgB;IAC/B,WAAW,EAAS,gBAAgB;IACpC,SAAS,EAAS,gBAAgB;IAClC,YAAY,EAAS,gBAAgB;IACrC,UAAU;KACN;KACA;IACJ;GACJ;GAIA,AAFA,EAAa,QAAQ,KAAK,CAAY,GAEtC,EAAiB,KAAK,IAAI,EAAE,WAAW,UAAU,GAAK,GAAK,GAAG,CAAY,CAAC;EAC/E,CAAC,GAGD,EAAkB,CAAY,GAEvB;CACX,GAEM,KAAsB,GAAoB,MAAiB;EAC7D,IAAM,EAAE,aAAU,IAAI,gBAAa,cAAW,eAAY,EAAS;EAEnE,OAAO;qEACsD,IAAU,kBAAkB,gBAAgB;2CACtE,EAAY,MAAM;;sBAEvC,IAAI,KAAK,eAAe,CAAI,CAAC,CAAC,OAAO,KAAK,MAAM,CAAS,CAAC,EAAE;sBAC5D,IAAI,KAAK,eAAe,CAAI,CAAC,CAAC,OAAO,KAAK,MAAM,CAAO,CAAC,EAAE;;6BAEnD,IAAU,gBAAgB,eAAe;;sBAEhD,EAAQ;;;;CAI1B,GAEM,KAA0B,MAAyC;EAMrE,QALoB,EAAW,QAAQ,CAAC,CAAC,aAKzC;GACI,KAAK,SACD,OAAO;GACX,KAAK,SACD,OAAO;GACX,KAAK,YACD,OAAO,EAAW,QAAQ,CAAC,CAAC,aAAa,YAAY;GACzD,SACI,OAAO;EACf;CACJ,GAEM,KAAyB,MAAyC;EACpE,IAAM,IAAO,EAAW,QAAQ,CAAC,CAAC,MAC5B,IAAQ,EAAuB,CAAU;EAI/C,QAAQ,GAAR;GACI,KAAK,cACD,OAAO,EAAyB,CAAK;GACzC,KAAK,eACD,OAAO,EAAqB,CAAK;GACrC,KAAK,gBACD,OAAO,EAA2B,CAAK;GAC3C,KAAK,SAID,OAHI,EAAW,QAAQ,CAAC,CAAC,aACd,EAAqB,CAAK,IAE9B,EAAsB,CAAK;GACtC,SACI,OAAO,EAAsB,CAAK;EAC1C;CACJ,GAEM,UAAqB;EACvB,EAAI,IAAI,WAAW,CAAC,CAAC,SAAQ,MAAU;GACnC,EAAI,IAAI,aAAa,CAAM;EAC/B,CAAC;CACL;CAEA,OAAO;AACX"}

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

@@ -1,17 +1,18 @@
-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;
+import { useMapContext as e } from "../../../MapContext.js";
+import { useEffect as t, useRef as n, useState as r } from "react";
+//#region src/components/map/components/features/layers/overlayLayers/Layer.tsx
+var i = (i) => {
+	let { id: a, createLayer: o } = i, [s, c] = r([]);
+	n([]);
+	let { api: l, enableWebGL: u, language: d, baseLayer: f } = e(), p = l.map?.getLayers();
+	return console.log({ mapLayers: p?.asArray() }), t(() => {
+		let e = o(l, u, f, d);
+		return e && (console.log(`add layer - ${a}`), l.map?.addLayer(e)), () => {
+			e && (l.map?.removeLayer(e), e.dispose(), console.log(`remove layer - ${a}`));
+		};
+	}, [l.map]), null;
 };
-export {
-  g as default
-};
-//# sourceMappingURL=Layer.js.map
+//#endregion
+export { i as default };
+
+//# sourceMappingURL=Layer.js.map

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

@@ -1 +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;"}
+{"version":3,"file":"Layer.js","names":[],"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"],"mappings":";;;AAeA,IAAM,KAAS,MAAsB;CACjC,IAAM,EAAE,OAAI,mBAAgB,GAEtB,CAAC,GAAe,KAAoB,EAAyD,CAAC,CAAC;CAE7E,EAAuD,CAAC,CAAC;CAEjF,IAAM,EAAE,QAAK,gBAAa,aAAU,iBAAc,EAAc,GAkB1D,IAAY,EAAI,KAAK,UAAU;CAgDrC,OA/CA,QAAQ,IAAI,EAAE,WAAW,GAAW,QAAQ,EAAE,CAAC,GAE/C,QAAgB;EACZ,IAAM,IAAW,EAAY,GAAK,GAAa,GAAW,CAAQ;EA+BlE,OAjBI,MACA,QAAQ,IAAI,eAAe,GAAI,GAQ/B,EAAI,KAAK,SAAS,CAAQ,UAQjB;GACT,AAAI,MACA,EAAI,KAAK,YAAY,CAAQ,GAC7B,EAAS,QAAQ,GACjB,QAAQ,IAAI,kBAAkB,GAAI;EAM1C;CACJ,GAAG,CAAC,EAAI,GAAG,CAAC,GAEL;AACX"}