npm - @rio-cloud/rio-uikit - Versions diffs - 2.3.0 → 2.4.1 - Mend

@rio-cloud/rio-uikit 2.3.0 → 2.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (76) hide show

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

	@@ -1 +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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"}
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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"}

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

@@ -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 CHANGED Viewed

	@@ -1 +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;"}
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: 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;"}

package/components/map/components/features/settings/MapSettingsTile.d.ts CHANGED Viewed

@@ -1,13 +1,40 @@
 import { default as React } from 'react';
 export type MapSettingsTileProps = {
+    /**
+     * Callback fired when the settings tile opens or closes.
+     */
     onToggle?: (newState: boolean) => void;
+    /**
+     * Tooltip shown while the settings tile is closed.
+     */
     tooltip?: React.ReactNode;
+    /**
+     * Custom panel rendered below the settings tile when it is open.
+     */
     panel?: React.ReactNode;
+    /**
+     * Dropdown menu items rendered when the settings tile is open.
+     */
     items?: JSX.Element[] | undefined;
+    /**
+     * Icon shown when the tile is active.
+     */
     activeIcon?: JSX.Element | undefined;
+    /**
+     * Icon shown when the tile is inactive.
+     */
     inactiveIcon?: JSX.Element | undefined;
+    /**
+     * Controls whether the active or inactive icon is shown.
+     */
     isActive?: boolean;
+    /**
+     * Additional class name for the clickable settings button.
+     */
     buttonClassName?: string;
+    /**
+     * Additional class name for the settings tile wrapper.
+     */
     className?: string;
 };
 declare const MapSettingsTile: (props: MapSettingsTileProps) => import("react/jsx-runtime").JSX.Element;

package/components/map/components/features/settings/MapSettingsTile.js CHANGED Viewed

@@ -1,9 +1,9 @@
-import { jsxs as c, Fragment as L, jsx as i } from "react/jsx-runtime";
+import { jsxs as p, Fragment as L, jsx as i } from "react/jsx-runtime";
 import I, { useState as T } from "react";
 import { AnimatePresence as M, motion as O } from "motion/react";
 import { noop as j } from "es-toolkit/function";
 import { usePopper as U } from "react-popper";
-import p from "../../../../../utils/classNames.js";
+import s from "../../../../../utils/classNames.js";
 import B from "../../../../overlay/OverlayTrigger.js";
 import S from "../../../../tooltip/Tooltip.js";
 import F, { useClickOutsideWithRef as q } from "../../../../../hooks/useClickOutside.js";
@@ -30,10 +30,10 @@ const K = 800, Q = 100, n = {
     inactiveIcon: f,
     isActive: v = !1,
     panel: u,
-    items: s,
+    items: a,
     className: C,
     buttonClassName: w,
-    tooltip: a,
+    tooltip: l,
     ...x
   } = m, [e, h] = T(!1), P = () => {
     const t = !e;
@@ -52,20 +52,20 @@ const K = 800, Q = 100, n = {
     ] : []
   });
   q(y, (t) => {
-    const r = t.target instanceof Node ? t.target : null;
-    r && N?.contains(r) || e && (h(!1), o(!1));
+    const c = t.target instanceof Node ? t.target : null;
+    c && N?.contains(c) || e && (h(!1), o(!1));
   });
-  const D = p("MapSettingsTile", C), W = p("MapSettingsButton", e && "active", w), A = p(
+  const D = s("MapSettingsTile", C), W = s("MapSettingsButton", e && "active", w), A = s(
     "MapSettingsTileIcon",
     "hover-scale-110",
     v ? "display-block" : "display-none",
     d?.props.className || ""
-  ), H = p(
+  ), H = s(
     "MapSettingsTileIcon",
     "hover-scale-110",
     v ? "display-none" : "display-block",
     f?.props.className || ""
-  ), l = /* @__PURE__ */ c("div", { className: W, onClick: P, children: [
+  ), r = /* @__PURE__ */ p("div", { className: W, onClick: P, children: [
     d && I.cloneElement(d, {
       className: A
     }),
@@ -73,9 +73,9 @@ const K = 800, Q = 100, n = {
       className: H
     })
   ] });
-  return /* @__PURE__ */ c("div", { className: D, ref: g, ...x, children: [
-    !s && /* @__PURE__ */ c(L, { children: [
-      a && !e ? b(l, a) : l,
+  return /* @__PURE__ */ p("div", { className: D, ref: g, ...x, children: [
+    !a && /* @__PURE__ */ p(L, { children: [
+      l && !e ? b(r, l) : r,
       /* @__PURE__ */ i("div", { className: "overflow-hidden", children: /* @__PURE__ */ i(M, { children: e && u && /* @__PURE__ */ i(
         O.div,
         {
@@ -87,12 +87,12 @@ const K = 800, Q = 100, n = {
         }
       ) }) })
     ] }),
-    s && /* @__PURE__ */ c("div", { className: "MapSettingsTile-inner position-relative", ref: _, children: [
-      a && !e ? b(l, a) : l,
-      /* @__PURE__ */ i(M, { children: e && s && /* @__PURE__ */ i(
+    a && /* @__PURE__ */ p("div", { className: "MapSettingsTile-inner position-relative", ref: _, children: [
+      l && !e ? b(r, l) : r,
+      /* @__PURE__ */ i(M, { children: e && a && /* @__PURE__ */ i(
         O.div,
         {
-          className: "dropdown",
+          className: s("dropdown", e && "open"),
           initial: n.initial,
           animate: n.animate,
           exit: n.exit,
@@ -104,7 +104,7 @@ const K = 800, Q = 100, n = {
               ref: R,
               style: { ...k.popper, minWidth: "180px" },
               ...E.popper,
-              children: s?.map((t, r) => t.type.isMapSettingsDropdownHeader ? t : /* @__PURE__ */ i(G, { value: t }, r))
+              children: a?.map((t, c) => t.type.isMapSettingsDropdownHeader ? t : /* @__PURE__ */ i(G, { value: t }, c))
             }
           )
         }

package/components/map/components/features/settings/MapSettingsTile.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MapSettingsTile.js","sources":["../../../../../../src/components/map/components/features/settings/MapSettingsTile.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { AnimatePresence, motion, type Transition } from 'motion/react';\nimport { noop } from 'es-toolkit/function';\nimport { usePopper } from 'react-popper';\n\nimport classNames from '../../../../../utils/classNames';\nimport OverlayTrigger from '../../../../overlay/OverlayTrigger';\nimport Tooltip from '../../../../tooltip/Tooltip';\nimport useClickOutside, { useClickOutsideWithRef } from '../../../../../hooks/useClickOutside';\nimport MenuItemList from '../../../../menuItems/MenuItemList';\nimport MenuItem from '../../../../menuItems/MenuItem';\nimport { isMobileScreen } from '../../../../../utils/deviceUtils';\n\nconst TOOLTIP_SHOW_TIMEOUT_IN_MS = 800;\nconst TOOLTIP_HIDE_TIMEOUT_IN_MS = 100;\n\nconst tileAnimation = {\n initial: { opacity: 0, y: 10 },\n animate: { opacity: 1, y: 0 },\n exit: { opacity: 0, y: 10 },\n transition: { duration: 0.08, ease: 'easeOut' } as Transition,\n};\n\nconst getComponentWithTooltip = (component: React.ReactNode, tooltip: React.ReactNode) => (\n <OverlayTrigger\n placement={Tooltip.TOP}\n delay={{ show: TOOLTIP_SHOW_TIMEOUT_IN_MS, hide: TOOLTIP_HIDE_TIMEOUT_IN_MS }}\n overlay={\n <Tooltip id='tooltip' width='auto'>\n {tooltip}\n </Tooltip>\n }\n >\n {component}\n </OverlayTrigger>\n);\n\nexport type MapSettingsTileProps = {\n onToggle?: (newState: boolean) => void;\n tooltip?: React.ReactNode;\n panel?: React.ReactNode;\n items?: JSX.Element[] \| undefined;\n activeIcon?: JSX.Element \| undefined;\n inactiveIcon?: JSX.Element \| undefined;\n isActive?: boolean;\n buttonClassName?: string;\n className?: string;\n};\n\nconst MapSettingsTile = (props: MapSettingsTileProps) => {\n const {\n onToggle = noop,\n activeIcon,\n inactiveIcon,\n isActive = false,\n panel,\n items,\n className,\n buttonClassName,\n tooltip,\n ...remainingProps\n } = props;\n\n const [isOpen, setIsOpen] = useState(false);\n\n const handleToggle = () => {\n const newState = !isOpen;\n setIsOpen(newState);\n onToggle(newState);\n\n buttonRef.current.blur();\n };\n\n const handleClosePanel = () => {\n if (isOpen && panel) {\n setIsOpen(false);\n onToggle(false);\n buttonRef.current.blur();\n }\n };\n\n const buttonRef = useClickOutside(handleClosePanel);\n\n const [toggleRef, setToggleRef] = useState<HTMLDivElement \| null>(null);\n const [refDropdownMenu, setRefDropdownMenu] = useState<HTMLUListElement \| null>(null);\n\n const { styles, attributes } = usePopper(toggleRef, refDropdownMenu, {\n placement: 'top-end',\n modifiers:\n isOpen && isMobileScreen()\n ? [\n {\n name: 'offset',\n options: {\n offset: [-60, -60],\n },\n },\n ]\n : [],\n });\n\n useClickOutsideWithRef(refDropdownMenu, (event: MouseEvent \| TouchEvent) => {\n const target = event.target instanceof Node ? event.target : null;\n\n if (target && toggleRef?.contains(target)) {\n return;\n }\n\n if (isOpen) {\n setIsOpen(false);\n onToggle(false);\n }\n });\n\n const wrapperClasses = classNames('MapSettingsTile', className);\n\n const buttonClasses = classNames('MapSettingsButton', isOpen && 'active', buttonClassName);\n\n const activeIconClassNames = classNames(\n 'MapSettingsTileIcon',\n 'hover-scale-110',\n isActive ? 'display-block' : 'display-none',\n activeIcon?.props.className \|\| ''\n );\n\n const inactiveIconClassNames = classNames(\n 'MapSettingsTileIcon',\n 'hover-scale-110',\n isActive ? 'display-none' : 'display-block',\n inactiveIcon?.props.className \|\| ''\n );\n\n const button = (\n <div className={buttonClasses} onClick={handleToggle}>\n {activeIcon &&\n React.cloneElement(activeIcon, {\n className: activeIconClassNames,\n })}\n {inactiveIcon &&\n React.cloneElement(inactiveIcon, {\n className: inactiveIconClassNames,\n })}\n </div>\n );\n\n return (\n <div className={wrapperClasses} ref={buttonRef} {...remainingProps}>\n {/* backwards compatible way of still showing a panel without labels /}\n {!items && (\n <>\n {tooltip && !isOpen ? getComponentWithTooltip(button, tooltip) : button}\n <div className='overflow-hidden'>\n <AnimatePresence>\n {isOpen && panel && (\n <motion.div\n initial={tileAnimation.initial}\n animate={tileAnimation.animate}\n exit={tileAnimation.exit}\n transition={tileAnimation.transition}\n >\n {panel}\n </motion.div>\n )}\n </AnimatePresence>\n </div>\n </>\n )}\n {/ new way of showing a dropdown without labels */}\n {items && (\n <div className='MapSettingsTile-inner position-relative' ref={setToggleRef}>\n {tooltip && !isOpen ? getComponentWithTooltip(button, tooltip) : button}\n <AnimatePresence>\n {isOpen && items && (\n <motion.div\n className='dropdown'\n initial={tileAnimation.initial}\n animate={tileAnimation.animate}\n exit={tileAnimation.exit}\n transition={tileAnimation.transition}\n >\n <MenuItemList\n className='margin-bottom-5 shadow-smooth border-none'\n ref={setRefDropdownMenu}\n style={{ ...styles.popper, minWidth: '180px' }}\n {...attributes.popper}\n >\n {items?.map((item, index) => {\n if (item.type.isMapSettingsDropdownHeader) {\n return item;\n }\n return <MenuItem key={index} value={item} />;\n })}\n </MenuItemList>\n </motion.div>\n )}\n </AnimatePresence>\n </div>\n )}\n </div>\n );\n};\n\nexport default MapSettingsTile;\n"],"names":["TOOLTIP_SHOW_TIMEOUT_IN_MS","TOOLTIP_HIDE_TIMEOUT_IN_MS","tileAnimation","getComponentWithTooltip","component","tooltip","jsx","OverlayTrigger","Tooltip","MapSettingsTile","props","onToggle","noop","activeIcon","inactiveIcon","isActive","panel","items","className","buttonClassName","remainingProps","isOpen","setIsOpen","useState","handleToggle","newState","buttonRef","useClickOutside","toggleRef","setToggleRef","refDropdownMenu","setRefDropdownMenu","styles","attributes","usePopper","isMobileScreen","useClickOutsideWithRef","event","target","wrapperClasses","classNames","buttonClasses","activeIconClassNames","inactiveIconClassNames","button","jsxs","React","Fragment","AnimatePresence","motion","MenuItemList","item","index","MenuItem"],"mappings":"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"}
1	+ {"version":3,"file":"MapSettingsTile.js","sources":["../../../../../../src/components/map/components/features/settings/MapSettingsTile.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { AnimatePresence, motion, type Transition } from 'motion/react';\nimport { noop } from 'es-toolkit/function';\nimport { usePopper } from 'react-popper';\n\nimport classNames from '../../../../../utils/classNames';\nimport OverlayTrigger from '../../../../overlay/OverlayTrigger';\nimport Tooltip from '../../../../tooltip/Tooltip';\nimport useClickOutside, { useClickOutsideWithRef } from '../../../../../hooks/useClickOutside';\nimport MenuItemList from '../../../../menuItems/MenuItemList';\nimport MenuItem from '../../../../menuItems/MenuItem';\nimport { isMobileScreen } from '../../../../../utils/deviceUtils';\n\nconst TOOLTIP_SHOW_TIMEOUT_IN_MS = 800;\nconst TOOLTIP_HIDE_TIMEOUT_IN_MS = 100;\n\nconst tileAnimation = {\n initial: { opacity: 0, y: 10 },\n animate: { opacity: 1, y: 0 },\n exit: { opacity: 0, y: 10 },\n transition: { duration: 0.08, ease: 'easeOut' } as Transition,\n};\n\nconst getComponentWithTooltip = (component: React.ReactNode, tooltip: React.ReactNode) => (\n <OverlayTrigger\n placement={Tooltip.TOP}\n delay={{ show: TOOLTIP_SHOW_TIMEOUT_IN_MS, hide: TOOLTIP_HIDE_TIMEOUT_IN_MS }}\n overlay={\n <Tooltip id='tooltip' width='auto'>\n {tooltip}\n </Tooltip>\n }\n >\n {component}\n </OverlayTrigger>\n);\n\nexport type MapSettingsTileProps = {\n /*\n Callback fired when the settings tile opens or closes.\n /\n onToggle?: (newState: boolean) => void;\n\n /\n Tooltip shown while the settings tile is closed.\n /\n tooltip?: React.ReactNode;\n\n /\n Custom panel rendered below the settings tile when it is open.\n /\n panel?: React.ReactNode;\n\n /\n Dropdown menu items rendered when the settings tile is open.\n /\n items?: JSX.Element[] \| undefined;\n\n /\n Icon shown when the tile is active.\n /\n activeIcon?: JSX.Element \| undefined;\n\n /\n Icon shown when the tile is inactive.\n /\n inactiveIcon?: JSX.Element \| undefined;\n\n /\n Controls whether the active or inactive icon is shown.\n /\n isActive?: boolean;\n\n /\n Additional class name for the clickable settings button.\n /\n buttonClassName?: string;\n\n /\n Additional class name for the settings tile wrapper.\n /\n className?: string;\n};\n\nconst MapSettingsTile = (props: MapSettingsTileProps) => {\n const {\n onToggle = noop,\n activeIcon,\n inactiveIcon,\n isActive = false,\n panel,\n items,\n className,\n buttonClassName,\n tooltip,\n ...remainingProps\n } = props;\n\n const [isOpen, setIsOpen] = useState(false);\n\n const handleToggle = () => {\n const newState = !isOpen;\n setIsOpen(newState);\n onToggle(newState);\n\n buttonRef.current.blur();\n };\n\n const handleClosePanel = () => {\n if (isOpen && panel) {\n setIsOpen(false);\n onToggle(false);\n buttonRef.current.blur();\n }\n };\n\n const buttonRef = useClickOutside(handleClosePanel);\n\n const [toggleRef, setToggleRef] = useState<HTMLDivElement \| null>(null);\n const [refDropdownMenu, setRefDropdownMenu] = useState<HTMLUListElement \| null>(null);\n\n const { styles, attributes } = usePopper(toggleRef, refDropdownMenu, {\n placement: 'top-end',\n modifiers:\n isOpen && isMobileScreen()\n ? [\n {\n name: 'offset',\n options: {\n offset: [-60, -60],\n },\n },\n ]\n : [],\n });\n\n useClickOutsideWithRef(refDropdownMenu, (event: MouseEvent \| TouchEvent) => {\n const target = event.target instanceof Node ? event.target : null;\n\n if (target && toggleRef?.contains(target)) {\n return;\n }\n\n if (isOpen) {\n setIsOpen(false);\n onToggle(false);\n }\n });\n\n const wrapperClasses = classNames('MapSettingsTile', className);\n\n const buttonClasses = classNames('MapSettingsButton', isOpen && 'active', buttonClassName);\n\n const activeIconClassNames = classNames(\n 'MapSettingsTileIcon',\n 'hover-scale-110',\n isActive ? 'display-block' : 'display-none',\n activeIcon?.props.className \|\| ''\n );\n\n const inactiveIconClassNames = classNames(\n 'MapSettingsTileIcon',\n 'hover-scale-110',\n isActive ? 'display-none' : 'display-block',\n inactiveIcon?.props.className \|\| ''\n );\n\n const button = (\n <div className={buttonClasses} onClick={handleToggle}>\n {activeIcon &&\n React.cloneElement(activeIcon, {\n className: activeIconClassNames,\n })}\n {inactiveIcon &&\n React.cloneElement(inactiveIcon, {\n className: inactiveIconClassNames,\n })}\n </div>\n );\n\n return (\n <div className={wrapperClasses} ref={buttonRef} {...remainingProps}>\n {/ backwards compatible way of still showing a panel without labels /}\n {!items && (\n <>\n {tooltip && !isOpen ? getComponentWithTooltip(button, tooltip) : button}\n <div className='overflow-hidden'>\n <AnimatePresence>\n {isOpen && panel && (\n <motion.div\n initial={tileAnimation.initial}\n animate={tileAnimation.animate}\n exit={tileAnimation.exit}\n transition={tileAnimation.transition}\n >\n {panel}\n </motion.div>\n )}\n </AnimatePresence>\n </div>\n </>\n )}\n {/ new way of showing a dropdown without labels */}\n {items && (\n <div className='MapSettingsTile-inner position-relative' ref={setToggleRef}>\n {tooltip && !isOpen ? getComponentWithTooltip(button, tooltip) : button}\n <AnimatePresence>\n {isOpen && items && (\n <motion.div\n className={classNames('dropdown', isOpen && 'open')}\n initial={tileAnimation.initial}\n animate={tileAnimation.animate}\n exit={tileAnimation.exit}\n transition={tileAnimation.transition}\n >\n <MenuItemList\n className='margin-bottom-5 shadow-smooth border-none'\n ref={setRefDropdownMenu}\n style={{ ...styles.popper, minWidth: '180px' }}\n {...attributes.popper}\n >\n {items?.map((item, index) => {\n if (item.type.isMapSettingsDropdownHeader) {\n return item;\n }\n return <MenuItem key={index} value={item} />;\n })}\n </MenuItemList>\n </motion.div>\n )}\n </AnimatePresence>\n </div>\n )}\n </div>\n );\n};\n\nexport default MapSettingsTile;\n"],"names":["TOOLTIP_SHOW_TIMEOUT_IN_MS","TOOLTIP_HIDE_TIMEOUT_IN_MS","tileAnimation","getComponentWithTooltip","component","tooltip","jsx","OverlayTrigger","Tooltip","MapSettingsTile","props","onToggle","noop","activeIcon","inactiveIcon","isActive","panel","items","className","buttonClassName","remainingProps","isOpen","setIsOpen","useState","handleToggle","newState","buttonRef","useClickOutside","toggleRef","setToggleRef","refDropdownMenu","setRefDropdownMenu","styles","attributes","usePopper","isMobileScreen","useClickOutsideWithRef","event","target","wrapperClasses","classNames","buttonClasses","activeIconClassNames","inactiveIconClassNames","button","jsxs","React","Fragment","AnimatePresence","motion","MenuItemList","item","index","MenuItem"],"mappings":";;;;;;;;;;;;AAaA,MAAMA,IAA6B,KAC7BC,IAA6B,KAE7BC,IAAgB;AAAA,EAClB,SAAS,EAAE,SAAS,GAAG,GAAG,GAAA;AAAA,EAC1B,SAAS,EAAE,SAAS,GAAG,GAAG,EAAA;AAAA,EAC1B,MAAM,EAAE,SAAS,GAAG,GAAG,GAAA;AAAA,EACvB,YAAY,EAAE,UAAU,MAAM,MAAM,UAAA;AACxC,GAEMC,IAA0B,CAACC,GAA4BC,MACzD,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACG,WAAWC,EAAQ;AAAA,IACnB,OAAO,EAAE,MAAMR,GAA4B,MAAMC,EAAA;AAAA,IACjD,SACI,gBAAAK,EAACE,GAAA,EAAQ,IAAG,WAAU,OAAM,QACvB,UAAAH,GACL;AAAA,IAGH,UAAAD;AAAA,EAAA;AACL,GAkDEK,KAAkB,CAACC,MAAgC;AACrD,QAAM;AAAA,IACF,UAAAC,IAAWC;AAAA,IACX,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,SAAAd;AAAA,IACA,GAAGe;AAAA,EAAA,IACHV,GAEE,CAACW,GAAQC,CAAS,IAAIC,EAAS,EAAK,GAEpCC,IAAe,MAAM;AACvB,UAAMC,IAAW,CAACJ;AAClB,IAAAC,EAAUG,CAAQ,GAClBd,EAASc,CAAQ,GAEjBC,EAAU,QAAQ,KAAA;AAAA,EACtB,GAUMA,IAAYC,EARO,MAAM;AAC3B,IAAIN,KAAUL,MACVM,EAAU,EAAK,GACfX,EAAS,EAAK,GACde,EAAU,QAAQ,KAAA;AAAA,EAE1B,CAEkD,GAE5C,CAACE,GAAWC,CAAY,IAAIN,EAAgC,IAAI,GAChE,CAACO,GAAiBC,CAAkB,IAAIR,EAAkC,IAAI,GAE9E,EAAE,QAAAS,GAAQ,YAAAC,EAAA,IAAeC,EAAUN,GAAWE,GAAiB;AAAA,IACjE,WAAW;AAAA,IACX,WACIT,KAAUc,MACJ;AAAA,MACI;AAAA,QACI,MAAM;AAAA,QACN,SAAS;AAAA,UACL,QAAQ,CAAC,KAAK,GAAG;AAAA,QAAA;AAAA,MACrB;AAAA,IACJ,IAEJ,CAAA;AAAA,EAAC,CACd;AAED,EAAAC,EAAuBN,GAAiB,CAACO,MAAmC;AACxE,UAAMC,IAASD,EAAM,kBAAkB,OAAOA,EAAM,SAAS;AAE7D,IAAIC,KAAUV,GAAW,SAASU,CAAM,KAIpCjB,MACAC,EAAU,EAAK,GACfX,EAAS,EAAK;AAAA,EAEtB,CAAC;AAED,QAAM4B,IAAiBC,EAAW,mBAAmBtB,CAAS,GAExDuB,IAAgBD,EAAW,qBAAqBnB,KAAU,UAAUF,CAAe,GAEnFuB,IAAuBF;AAAA,IACzB;AAAA,IACA;AAAA,IACAzB,IAAW,kBAAkB;AAAA,IAC7BF,GAAY,MAAM,aAAa;AAAA,EAAA,GAG7B8B,IAAyBH;AAAA,IAC3B;AAAA,IACA;AAAA,IACAzB,IAAW,iBAAiB;AAAA,IAC5BD,GAAc,MAAM,aAAa;AAAA,EAAA,GAG/B8B,IACF,gBAAAC,EAAC,OAAA,EAAI,WAAWJ,GAAe,SAASjB,GACnC,UAAA;AAAA,IAAAX,KACGiC,EAAM,aAAajC,GAAY;AAAA,MAC3B,WAAW6B;AAAA,IAAA,CACd;AAAA,IACJ5B,KACGgC,EAAM,aAAahC,GAAc;AAAA,MAC7B,WAAW6B;AAAA,IAAA,CACd;AAAA,EAAA,GACT;AAGJ,2BACK,OAAA,EAAI,WAAWJ,GAAgB,KAAKb,GAAY,GAAGN,GAE/C,UAAA;AAAA,IAAA,CAACH,KACE,gBAAA4B,EAAAE,GAAA,EACK,UAAA;AAAA,MAAA1C,KAAW,CAACgB,IAASlB,EAAwByC,GAAQvC,CAAO,IAAIuC;AAAA,wBAChE,OAAA,EAAI,WAAU,mBACX,UAAA,gBAAAtC,EAAC0C,GAAA,EACI,eAAUhC,KACP,gBAAAV;AAAA,QAAC2C,EAAO;AAAA,QAAP;AAAA,UACG,SAAS/C,EAAc;AAAA,UACvB,SAASA,EAAc;AAAA,UACvB,MAAMA,EAAc;AAAA,UACpB,YAAYA,EAAc;AAAA,UAEzB,UAAAc;AAAA,QAAA;AAAA,MAAA,GAGb,EAAA,CACJ;AAAA,IAAA,GACJ;AAAA,IAGHC,KACG,gBAAA4B,EAAC,OAAA,EAAI,WAAU,2CAA0C,KAAKhB,GACzD,UAAA;AAAA,MAAAxB,KAAW,CAACgB,IAASlB,EAAwByC,GAAQvC,CAAO,IAAIuC;AAAA,MACjE,gBAAAtC,EAAC0C,GAAA,EACI,UAAA3B,KAAUJ,KACP,gBAAAX;AAAA,QAAC2C,EAAO;AAAA,QAAP;AAAA,UACG,WAAWT,EAAW,YAAYnB,KAAU,MAAM;AAAA,UAClD,SAASnB,EAAc;AAAA,UACvB,SAASA,EAAc;AAAA,UACvB,MAAMA,EAAc;AAAA,UACpB,YAAYA,EAAc;AAAA,UAE1B,UAAA,gBAAAI;AAAA,YAAC4C;AAAA,YAAA;AAAA,cACG,WAAU;AAAA,cACV,KAAKnB;AAAA,cACL,OAAO,EAAE,GAAGC,EAAO,QAAQ,UAAU,QAAA;AAAA,cACpC,GAAGC,EAAW;AAAA,cAEd,UAAAhB,GAAO,IAAI,CAACkC,GAAMC,MACXD,EAAK,KAAK,8BACHA,IAEJ,gBAAA7C,EAAC+C,GAAA,EAAqB,OAAOF,EAAA,GAAdC,CAAoB,CAC7C;AAAA,YAAA;AAAA,UAAA;AAAA,QACL;AAAA,MAAA,EACJ,CAER;AAAA,IAAA,EAAA,CACJ;AAAA,EAAA,GAER;AAER;"}

package/components/map/components/features/settings/buttons/MapPreviousViewportButton.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { default as MapSettingsTile } from '../MapSettingsTile';
+export type MapPreviousViewportButtonProps = Omit<React.ComponentProps<typeof MapSettingsTile>, 'activeIcon' | 'inactiveIcon' | 'isActive' | 'onToggle'> & {
+    /**
+     * Callback fired after the map viewport history jumps back to the previous viewport.
+     */
+    onGoBack?: () => void;
+};
+declare const MapPreviousViewportButton: (props: MapPreviousViewportButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+export default MapPreviousViewportButton;

package/components/map/components/features/settings/buttons/MapPreviousViewportButton.js ADDED Viewed

@@ -0,0 +1,23 @@
+import { jsx as o } from "react/jsx-runtime";
+import c from "../MapSettingsTile.js";
+import { useMapContext as s } from "../../../MapContext.js";
+import { MapIcon as p } from "../../../../icons/MapIcon.js";
+const g = (t) => {
+  const { onGoBack: r, ...e } = t, { viewportHistory: a } = s(), { canGoBack: n, goBack: i } = a;
+  return n ? /* @__PURE__ */ o(
+    c,
+    {
+      className: "MapPreviousViewportButton",
+      isActive: !0,
+      activeIcon: /* @__PURE__ */ o(p, { name: "rioglyph-arrow-left", className: "MapPreviousViewportButtonIcon text-color-gray" }),
+      onToggle: () => {
+        i(), r?.();
+      },
+      ...e
+    }
+  ) : null;
+};
+export {
+  g as default
+};
+//# sourceMappingURL=MapPreviousViewportButton.js.map

package/components/map/components/features/settings/buttons/MapPreviousViewportButton.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"MapPreviousViewportButton.js","sources":["../../../../../../../src/components/map/components/features/settings/buttons/MapPreviousViewportButton.tsx"],"sourcesContent":["import type React from 'react';\n\nimport MapSettingsTile from '../MapSettingsTile';\nimport { useMapContext } from '../../../MapContext';\nimport { MapIcon } from '../../../../icons/MapIcon';\n\nexport type MapPreviousViewportButtonProps = Omit<\n React.ComponentProps<typeof MapSettingsTile>,\n 'activeIcon' | 'inactiveIcon' | 'isActive' | 'onToggle'\n> & {\n /**\n * Callback fired after the map viewport history jumps back to the previous viewport.\n */\n onGoBack?: () => void;\n};\n\nconst MapPreviousViewportButton = (props: MapPreviousViewportButtonProps) => {\n const { onGoBack, ...remainingProps } = props;\n const { viewportHistory } = useMapContext();\n const { canGoBack, goBack } = viewportHistory;\n\n if (!canGoBack) {\n return null;\n }\n\n const handleGoBack = () => {\n goBack();\n onGoBack?.();\n };\n\n return (\n <MapSettingsTile\n className='MapPreviousViewportButton'\n isActive\n activeIcon={\n <MapIcon name='rioglyph-arrow-left' className='MapPreviousViewportButtonIcon text-color-gray' />\n }\n onToggle={handleGoBack}\n {...remainingProps}\n />\n );\n};\n\nexport default MapPreviousViewportButton;\n"],"names":["MapPreviousViewportButton","props","onGoBack","remainingProps","viewportHistory","useMapContext","canGoBack","goBack","jsx","MapSettingsTile","MapIcon"],"mappings":";;;;AAgBA,MAAMA,IAA4B,CAACC,MAA0C;AACzE,QAAM,EAAE,UAAAC,GAAU,GAAGC,EAAA,IAAmBF,GAClC,EAAE,iBAAAG,EAAA,IAAoBC,EAAA,GACtB,EAAE,WAAAC,GAAW,QAAAC,EAAA,IAAWH;AAE9B,SAAKE,IAUD,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,WAAU;AAAA,MACV,UAAQ;AAAA,MACR,YACI,gBAAAD,EAACE,GAAA,EAAQ,MAAK,uBAAsB,WAAU,iDAAgD;AAAA,MAElG,UAZa,MAAM;AACvB,QAAAH,EAAA,GACAL,IAAA;AAAA,MACJ;AAAA,MAUS,GAAGC;AAAA,IAAA;AAAA,EAAA,IAhBD;AAmBf;"}

package/components/map/hooks/useMapViewportHistory.d.ts ADDED Viewed

@@ -0,0 +1,19 @@
+import { MapApi, Position } from '../utils/mapTypes';
+export type MapViewport = {
+    center: Position;
+    zoom: number;
+};
+export type MapViewportHistory = {
+    entries: MapViewport[];
+    canGoBack: boolean;
+    goBack: () => void;
+};
+export type UseMapViewportHistoryOptions = {
+    maxEntries?: number;
+    centerDistanceThresholdMeters?: number;
+    zoomThreshold?: number;
+    zoomAnimation?: boolean;
+    controlledViewport?: MapViewport;
+};
+export declare const defaultMapViewportHistory: MapViewportHistory;
+export declare const useMapViewportHistory: (api: MapApi | undefined, { maxEntries, centerDistanceThresholdMeters, zoomThreshold, zoomAnimation, controlledViewport, }?: UseMapViewportHistoryOptions) => MapViewportHistory;

package/components/map/hooks/useMapViewportHistory.js ADDED Viewed

@@ -0,0 +1,116 @@
+import { useState as d, useRef as D, useCallback as T, useEffect as _ } from "react";
+const V = 5, A = 100, p = 0.1, H = 180, k = 6371e3, y = {
+  entries: [],
+  canGoBack: !1,
+  goBack: () => {
+  }
+}, R = (e) => e * Math.PI / 180, C = (e, n) => {
+  const o = R(n.lat - e.lat), u = R(n.lng - e.lng), l = R(e.lat), s = R(n.lat), a = Math.sin(o / 2) ** 2 + Math.cos(l) * Math.cos(s) * Math.sin(u / 2) ** 2;
+  return 2 * k * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+}, f = (e) => {
+  const n = e.getCenter(), { zoom: o = 0 } = e.getViewModel().getLookAtData();
+  return {
+    center: {
+      lat: n.lat,
+      lng: n.lng
+    },
+    zoom: o
+  };
+}, z = (e, n, o, u) => {
+  if (!(e && n))
+    return !1;
+  const l = C(e.center, n.center), s = Math.abs(e.zoom - n.zoom);
+  return l >= o || s >= u;
+}, I = (e, n) => e?.center.lat === n?.center.lat && e?.center.lng === n?.center.lng && e?.zoom === n?.zoom, B = (e, {
+  maxEntries: n = V,
+  centerDistanceThresholdMeters: o = A,
+  zoomThreshold: u = p,
+  zoomAnimation: l = !1,
+  controlledViewport: s
+} = {}) => {
+  const [a, M] = d({
+    entries: [],
+    currentViewport: s,
+    isRestoring: !1
+  }), m = D(), g = D(), w = T(
+    (t, c) => z(t, c, o, u),
+    [o, u]
+  ), h = T(
+    (t, c) => {
+      const r = t[0];
+      return r && !w(c, r) ? t : [c, ...t].slice(0, n);
+    },
+    [w, n]
+  ), i = T(
+    (t, { replace: c = !1 } = {}) => {
+      M((r) => {
+        if (c)
+          return {
+            ...r,
+            currentViewport: t,
+            isRestoring: !1
+          };
+        if (r.isRestoring)
+          return {
+            ...r,
+            currentViewport: t,
+            isRestoring: !1
+          };
+        const { currentViewport: E } = r;
+        return E ? I(E, t) ? r : w(E, t) ? {
+          ...r,
+          entries: h(r.entries, E),
+          currentViewport: t
+        } : {
+          ...r,
+          currentViewport: t
+        } : {
+          ...r,
+          currentViewport: t
+        };
+      });
+    },
+    [h, w]
+  ), L = T(() => {
+    const t = e?.map, c = a.entries[0];
+    t && c && (window.clearTimeout(m.current), window.clearTimeout(g.current), M((r) => ({
+      ...r,
+      entries: r.entries.slice(1),
+      currentViewport: c,
+      isRestoring: !0
+    })), t.getViewModel().setLookAtData(
+      {
+        position: c.center,
+        zoom: c.zoom
+      },
+      l
+    ), m.current = window.setTimeout(() => {
+      i(f(t), { replace: !0 }), m.current = void 0;
+    }, 750));
+  }, [e?.map, i, a.entries, l]);
+  return _(() => {
+    s && i(s);
+  }, [i, s]), _(() => {
+    const t = e?.map;
+    if (!t)
+      return;
+    i(f(t), { replace: !0 });
+    const c = () => {
+      window.clearTimeout(g.current), g.current = window.setTimeout(() => {
+        g.current = void 0, i(f(t));
+      }, H);
+    };
+    return t.addEventListener("mapviewchangeend", c), () => {
+      t.removeEventListener("mapviewchangeend", c), window.clearTimeout(m.current), window.clearTimeout(g.current), m.current = void 0, g.current = void 0;
+    };
+  }, [e?.map, i]), {
+    entries: a.entries,
+    canGoBack: a.entries.length > 0,
+    goBack: L
+  };
+};
+export {
+  y as defaultMapViewportHistory,
+  B as useMapViewportHistory
+};
+//# sourceMappingURL=useMapViewportHistory.js.map

package/components/map/hooks/useMapViewportHistory.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useMapViewportHistory.js","sources":["../../../../src/components/map/hooks/useMapViewportHistory.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nimport type { MapApi, Position } from '../utils/mapTypes';\n\nexport type MapViewport = {\n center: Position;\n zoom: number;\n};\n\nexport type MapViewportHistory = {\n entries: MapViewport[];\n canGoBack: boolean;\n goBack: () => void;\n};\n\nexport type UseMapViewportHistoryOptions = {\n maxEntries?: number;\n centerDistanceThresholdMeters?: number;\n zoomThreshold?: number;\n zoomAnimation?: boolean;\n controlledViewport?: MapViewport;\n};\n\nconst DEFAULT_MAX_ENTRIES = 5;\n\nconst DEFAULT_CENTER_DISTANCE_THRESHOLD_METERS = 100;\nconst DEFAULT_ZOOM_THRESHOLD = 0.1;\nconst VIEWPORT_CHANGE_SETTLE_DELAY_MS = 180;\nconst EARTH_RADIUS_METERS = 6371000;\n\nexport const defaultMapViewportHistory: MapViewportHistory = {\n entries: [],\n canGoBack: false,\n goBack: () => {},\n};\n\nconst toRadians = (degrees: number) => (degrees * Math.PI) / 180;\n\nconst getDistanceMeters = (first: Position, second: Position) => {\n const latDistance = toRadians(second.lat - first.lat);\n const lngDistance = toRadians(second.lng - first.lng);\n const firstLat = toRadians(first.lat);\n const secondLat = toRadians(second.lat);\n\n const haversine =\n Math.sin(latDistance / 2) ** 2 + Math.cos(firstLat) * Math.cos(secondLat) * Math.sin(lngDistance / 2) ** 2;\n\n return 2 * EARTH_RADIUS_METERS * Math.atan2(Math.sqrt(haversine), Math.sqrt(1 - haversine));\n};\n\nconst getViewport = (map: H.Map): MapViewport => {\n const center = map.getCenter();\n const { zoom = 0 } = map.getViewModel().getLookAtData();\n\n return {\n center: {\n lat: center.lat,\n lng: center.lng,\n },\n zoom,\n };\n};\n\nconst hasRelevantViewportChange = (\n first: MapViewport | undefined,\n second: MapViewport | undefined,\n centerDistanceThresholdMeters: number,\n zoomThreshold: number\n) => {\n if (!(first && second)) {\n return false;\n }\n\n const centerDistance = getDistanceMeters(first.center, second.center);\n const zoomDistance = Math.abs(first.zoom - second.zoom);\n\n return centerDistance >= centerDistanceThresholdMeters || zoomDistance >= zoomThreshold;\n};\n\nconst hasSameViewport = (first: MapViewport | undefined, second: MapViewport | undefined) =>\n first?.center.lat === second?.center.lat &&\n first?.center.lng === second?.center.lng &&\n first?.zoom === second?.zoom;\n\ntype MapViewportHistoryState = {\n entries: MapViewport[];\n currentViewport?: MapViewport;\n isRestoring: boolean;\n};\n\nexport const useMapViewportHistory = (\n api: MapApi | undefined,\n {\n maxEntries = DEFAULT_MAX_ENTRIES,\n centerDistanceThresholdMeters = DEFAULT_CENTER_DISTANCE_THRESHOLD_METERS,\n zoomThreshold = DEFAULT_ZOOM_THRESHOLD,\n zoomAnimation = false,\n controlledViewport,\n }: UseMapViewportHistoryOptions = {}\n): MapViewportHistory => {\n const [state, setState] = useState<MapViewportHistoryState>({\n entries: [],\n currentViewport: controlledViewport,\n isRestoring: false,\n });\n const restoreFallbackTimeoutRef = useRef<number>();\n const commitHistoryTimeoutRef = useRef<number>();\n\n const isRelevantChange = useCallback(\n (first: MapViewport | undefined, second: MapViewport | undefined) =>\n hasRelevantViewportChange(first, second, centerDistanceThresholdMeters, zoomThreshold),\n [centerDistanceThresholdMeters, zoomThreshold]\n );\n\n const getEntriesWithViewport = useCallback(\n (entries: MapViewport[], viewport: MapViewport) => {\n const latestEntry = entries[0];\n\n if (latestEntry && !isRelevantChange(viewport, latestEntry)) {\n return entries;\n }\n\n return [viewport, ...entries].slice(0, maxEntries);\n },\n [isRelevantChange, maxEntries]\n );\n\n const commitViewport = useCallback(\n (nextViewport: MapViewport, { replace = false } = {}) => {\n setState(previousState => {\n if (replace) {\n return {\n ...previousState,\n currentViewport: nextViewport,\n isRestoring: false,\n };\n }\n\n if (previousState.isRestoring) {\n return {\n ...previousState,\n currentViewport: nextViewport,\n isRestoring: false,\n };\n }\n\n const { currentViewport } = previousState;\n\n if (!currentViewport) {\n return {\n ...previousState,\n currentViewport: nextViewport,\n };\n }\n\n if (hasSameViewport(currentViewport, nextViewport)) {\n return previousState;\n }\n\n if (!isRelevantChange(currentViewport, nextViewport)) {\n return {\n ...previousState,\n currentViewport: nextViewport,\n };\n }\n\n return {\n ...previousState,\n entries: getEntriesWithViewport(previousState.entries, currentViewport),\n currentViewport: nextViewport,\n };\n });\n },\n [getEntriesWithViewport, isRelevantChange]\n );\n\n const goBack = useCallback(() => {\n const map = api?.map;\n const targetViewport = state.entries[0];\n\n if (!(map && targetViewport)) {\n return;\n }\n\n window.clearTimeout(restoreFallbackTimeoutRef.current);\n window.clearTimeout(commitHistoryTimeoutRef.current);\n setState(previousState => ({\n ...previousState,\n entries: previousState.entries.slice(1),\n currentViewport: targetViewport,\n isRestoring: true,\n }));\n\n map.getViewModel().setLookAtData(\n {\n position: targetViewport.center,\n zoom: targetViewport.zoom,\n },\n zoomAnimation\n );\n\n restoreFallbackTimeoutRef.current = window.setTimeout(() => {\n commitViewport(getViewport(map), { replace: true });\n restoreFallbackTimeoutRef.current = undefined;\n }, 750);\n }, [api?.map, commitViewport, state.entries, zoomAnimation]);\n\n useEffect(() => {\n if (controlledViewport) {\n commitViewport(controlledViewport);\n }\n }, [commitViewport, controlledViewport]);\n\n useEffect(() => {\n const map = api?.map;\n\n if (!map) {\n return;\n }\n\n commitViewport(getViewport(map), { replace: true });\n\n const handleMapViewChangeEnd = () => {\n window.clearTimeout(commitHistoryTimeoutRef.current);\n\n commitHistoryTimeoutRef.current = window.setTimeout(() => {\n commitHistoryTimeoutRef.current = undefined;\n commitViewport(getViewport(map));\n }, VIEWPORT_CHANGE_SETTLE_DELAY_MS);\n };\n\n map.addEventListener('mapviewchangeend', handleMapViewChangeEnd as EventListener);\n\n return () => {\n map.removeEventListener('mapviewchangeend', handleMapViewChangeEnd as EventListener);\n window.clearTimeout(restoreFallbackTimeoutRef.current);\n window.clearTimeout(commitHistoryTimeoutRef.current);\n restoreFallbackTimeoutRef.current = undefined;\n commitHistoryTimeoutRef.current = undefined;\n };\n }, [api?.map, commitViewport]);\n\n return {\n entries: state.entries,\n canGoBack: state.entries.length > 0,\n goBack,\n };\n};\n"],"names":["DEFAULT_MAX_ENTRIES","DEFAULT_CENTER_DISTANCE_THRESHOLD_METERS","DEFAULT_ZOOM_THRESHOLD","VIEWPORT_CHANGE_SETTLE_DELAY_MS","EARTH_RADIUS_METERS","defaultMapViewportHistory","toRadians","degrees","getDistanceMeters","first","second","latDistance","lngDistance","firstLat","secondLat","haversine","getViewport","map","center","zoom","hasRelevantViewportChange","centerDistanceThresholdMeters","zoomThreshold","centerDistance","zoomDistance","hasSameViewport","useMapViewportHistory","api","maxEntries","zoomAnimation","controlledViewport","state","setState","useState","restoreFallbackTimeoutRef","useRef","commitHistoryTimeoutRef","isRelevantChange","useCallback","getEntriesWithViewport","entries","viewport","latestEntry","commitViewport","nextViewport","replace","previousState","currentViewport","goBack","targetViewport","useEffect","handleMapViewChangeEnd"],"mappings":"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"}

package/components/map/icons/MapIcon.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 export type MapIconProps = {
     name?: string;
+    pairName?: string;
     height?: number;
     width?: number;
     className?: string;