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

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

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

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

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

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

@@ -1,58 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = require("react");
-const MapContext_1 = require("../../../MapContext");
-const Layer = (props) => {
-    const { id, createLayer } = props;
-    const [currentLayers, setCurrentLayers] = (0, react_1.useState)([]);
-    const currentLayerRef = (0, react_1.useRef)([]);
-    const { api, enableWebGL, language, baseLayer } = (0, MapContext_1.useMapContext)();
-    // const [previousBaseLayer, setPreviousBaseLayer] = useState<string>();
-    // useEffect(() => {
-    //     // setCurrentLayers([]);
-    //     currentLayerRef.current.forEach(item => {
-    //         console.log('cleanup');
-    //         api.map?.removeLayer(item.layer);
-    //         item.layer.dispose();
-    //     });
-    //     currentLayerRef.current = [];
-    //     // setPreviousBaseLayer(baseLayer);
-    // }, [baseLayer]);
-    const mapLayers = api.map?.getLayers();
-    console.log({ mapLayers: mapLayers?.asArray() });
-    (0, react_1.useEffect)(() => {
-        const newLayer = createLayer(api, enableWebGL, baseLayer, language);
-        // console.log({ currentLayers: currentLayerRef.current });
-        // console.log({ mapLayer: api.map?.getLayers(), previousBaseLayer, baseLayer });
-        // const trafficLayer = api.map?.getLayers().get(20);
-        // const roadRestrictionLayer = api.map?.getLayers().get(30);
-        // console.log({ trafficLayer, roadRestrictionLayer });
-        // const hasLayer = currentLayerRef.current.find((item: any) => item.id === id);
-        // console.log({ hasLayer });
-        // if (newLayer && !hasLayer) {
-        // if (newLayer && api.map?.getLayers().getLength() === 0) {
-        if (newLayer) {
-            console.log(`add layer - ${id}`);
-            // const mapLayers = api.map?.getLayers();
-            // console.log({ mapLayers: mapLayers?.asArray() });
-            // const hasLayer = mapLayers?.asArray().includes(newLayer);
-            // console.log({ hasLayer });
-            api.map?.addLayer(newLayer);
-            // setCurrentLayers([...currentLayers, { id, layer: newLayer }]);
-            // currentLayerRef.current = [...currentLayerRef.current, { id, layer: newLayer }];
-            // console.log({ currentLayers: currentLayerRef.current });
-        }
-        return () => {
-            if (newLayer) {
-                api.map?.removeLayer(newLayer);
-                newLayer.dispose();
-                console.log(`remove layer - ${id}`);
-                // setCurrentLayers([...currentLayers.filter((item: any) => item.id !== id)]);
-                // setCurrentLayers([]);
-                // currentLayerRef.current = [...currentLayerRef.current.filter((item: any) => item.id !== id)];
-            }
-        };
-    }, [api.map]);
-    return null;
-};
-exports.default = Layer;

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

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

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

@@ -1,37 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const constants_1 = require("../../../constants");
-const Layer_1 = tslib_1.__importDefault(require("./Layer"));
-const MapContext_1 = require("../../../MapContext");
-const rendering_1 = require("../../../../utils/rendering");
-// Layer for rendering truck road signs
-const createRoadRestrictionLayer = (engineType, devicePixelRatio) => (api, useWebGL, baseLayerName, language) => {
-    // @ts-ignore-next-line: according to the Here docs, the engine type exists
-    const trafficTileService = api.platform?.getRasterTileService({
-        resource: 'blank',
-        format: constants_1.DEFAULT_RASTER_LAYER_FORMAT,
-        queryParams: {
-            lang: language,
-            // Increase size of road sign for pixel maps and high resolutions, otherwise the icons are too small
-            ppi: engineType === constants_1.ENGINE_TYPE_P2D && devicePixelRatio > 1 ? 200 : 100,
-            features: 'vehicle_restrictions:active_and_inactive',
-        },
-    });
-    // @ts-ignore-next-line: according to the Here docs, the engine type exists
-    const trafficTileProvider1 = new H.service.rasterTile.Provider(trafficTileService, {
-        engineType,
-        tileSize: constants_1.DEFAULT_TILE_SIZE,
-    });
-    const trafficTileLayer = new H.map.layer.TileLayer(trafficTileProvider1);
-    console.log('createRoadRestrictionLayer');
-    return trafficTileLayer;
-};
-const RoadRestrictionLayer = (props) => {
-    const { enableWebGL, baseLayer, devicePixelRatio } = (0, MapContext_1.useMapContext)();
-    const engineType = (0, rendering_1.isVectorBased)(enableWebGL, baseLayer) ? constants_1.ENGINE_TYPE_HARP : constants_1.ENGINE_TYPE_P2D;
-    const restrictionLayerCreator = createRoadRestrictionLayer(engineType, devicePixelRatio);
-    return (0, jsx_runtime_1.jsx)(Layer_1.default, { ...props, createLayer: restrictionLayerCreator });
-};
-exports.default = RoadRestrictionLayer;

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

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

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

@@ -1,51 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const constants_1 = require("../../../constants");
-const Layer_1 = tslib_1.__importDefault(require("./Layer"));
-const MapContext_1 = require("../../../MapContext");
-const rendering_1 = require("../../../../utils/rendering");
-const createRasterTrafficLayer = (api, useWebGL, baseLayerName, language) => {
-    // Traffic
-    const baseTrafficUrl = new H.service.Url('https', 'traffic.maps.hereapi.com');
-    // @ts-ignore-next-line: according to the Here docs, the engine type exists
-    const trafficTileService = api.platform?.getRasterTileService({
-        baseUrl: baseTrafficUrl,
-        format: constants_1.DEFAULT_RASTER_LAYER_FORMAT,
-        path: 'v3',
-        resource: 'flow',
-        queryParams: {
-            apikey: api.credentials?.apikey,
-            lang: language,
-            ppi: 400,
-            style: 'explore.day',
-        },
-    });
-    // @ts-ignore-next-line: according to the Here docs, the engine type exists
-    const trafficTileProvider = new H.service.rasterTile.Provider(trafficTileService, {
-        engineType: constants_1.ENGINE_TYPE_P2D,
-        tileSize: constants_1.DEFAULT_TILE_SIZE,
-    });
-    const trafficTileLayer = new H.map.layer.TileLayer(trafficTileProvider);
-    return trafficTileLayer;
-};
-const createVectorTrafficLayer = (api, useWebGL, baseLayerName) => {
-    // @ts-ignore-next-line
-    const providerTrafficFlow = new H.service.trafficVectorTile.Provider(
-    // @ts-ignore-next-line
-    api.platform?.getTrafficVectorTileService({ layer: 'flow' }), 
-    // @ts-ignore-next-line
-    new H.map.render.harp.Style({}), { engineType: constants_1.ENGINE_TYPE_HARP });
-    // @ts-ignore-next-line:
-    const trafficFlowLayer = new H.map.layer.TileLayer(providerTrafficFlow, { min: 2, max: 24 });
-    return trafficFlowLayer;
-};
-const TrafficLayer = (props) => {
-    const mapContext = (0, MapContext_1.useMapContext)();
-    const layerCreator = (0, rendering_1.isVectorBased)(mapContext.enableWebGL, mapContext.baseLayer)
-        ? createVectorTrafficLayer
-        : createRasterTrafficLayer;
-    return (0, jsx_runtime_1.jsx)(Layer_1.default, { ...props, createLayer: layerCreator });
-};
-exports.default = TrafficLayer;

package/lib/es/components/map/components/features/settings/MapSettingsItem.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-export type MapSettingsItemProps = {
-    activeIcon?: JSX.Element;
-    inactiveIcon?: JSX.Element;
-    isActive?: boolean;
-    className?: string;
-    label?: string | JSX.Element;
-    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
-};
-declare const MapSettingsItem: (props: MapSettingsItemProps) => import("react/jsx-runtime").JSX.Element;
-export default MapSettingsItem;

package/lib/es/components/map/components/features/settings/MapSettingsItem.js

@@ -1,23 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
-const MapSettingsItem = (props) => {
-    const { onClick = noop_1.default, activeIcon, inactiveIcon, isActive = false, label, className = '' } = props;
-    const activeIconClassNames = (0, classnames_1.default)('MapSettingsTileIcon', !label && 'hover-scale-110', isActive ? 'display-block' : 'display-none', activeIcon?.props.className || '');
-    const inactiveIconClassNames = (0, classnames_1.default)('MapSettingsTileIcon', !label && 'hover-scale-110', isActive ? 'display-none' : 'display-block', inactiveIcon?.props.className || '');
-    const defaultIcon = activeIcon &&
-        react_1.default.cloneElement(activeIcon, {
-            className: activeIconClassNames,
-        });
-    const highlightedIcon = inactiveIcon &&
-        react_1.default.cloneElement(inactiveIcon, {
-            className: inactiveIconClassNames,
-        });
-    const mapSettingsItemClassNames = (0, classnames_1.default)('MapSettingsItem', 'display-flex align-items-center gap-10', 'text-color-darker', label && 'margin--5', className);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: mapSettingsItemClassNames, onClick: onClick, children: [label && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: 'margin-left--5', children: [highlightedIcon, defaultIcon] }), (0, jsx_runtime_1.jsx)("div", { className: 'flex-1-1 line-height-16 padding-right-5', children: label })] })), !label && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [highlightedIcon, defaultIcon] }))] }));
-};
-exports.default = MapSettingsItem;

package/lib/es/components/map/components/features/settings/MapSettingsPanel.d.ts

@@ -1,6 +0,0 @@
-import { type PropsWithChildren } from 'react';
-export type MapSettingsPanelProps = {
-    className?: string;
-};
-declare const MapSettingsPanel: (props: PropsWithChildren<MapSettingsPanelProps>) => import("react/jsx-runtime").JSX.Element;
-export default MapSettingsPanel;

package/lib/es/components/map/components/features/settings/MapSettingsPanel.js

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const framer_motion_1 = require("framer-motion");
-const MapSettingsPanel = (props) => {
-    const { className = '', children } = props;
-    const panelClassNames = (0, classnames_1.default)('MapSettingsPanel', className);
-    return ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { opacity: 0, y: 100 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0.5, y: 200 }, transition: {
-            duration: 0.15,
-            ease: 'easeInOut',
-        }, className: panelClassNames, children: children }));
-};
-exports.default = MapSettingsPanel;

package/lib/es/components/map/components/features/settings/MapSettingsTile.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-export type MapSettingsTileProps = {
-    onToggle?: () => void;
-    tooltip?: React.ReactNode;
-    panel?: React.ReactNode;
-    items?: JSX.Element[] | undefined;
-    activeIcon?: JSX.Element | undefined;
-    inactiveIcon?: JSX.Element | undefined;
-    isActive?: boolean;
-    buttonClassName?: string;
-    className?: string;
-};
-declare const MapSettingsTile: (props: MapSettingsTileProps) => import("react/jsx-runtime").JSX.Element;
-export default MapSettingsTile;

package/lib/es/components/map/components/features/settings/MapSettingsTile.js

@@ -1,80 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importStar(require("react"));
-const framer_motion_1 = require("framer-motion");
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
-const react_popper_1 = require("react-popper");
-const OverlayTrigger_1 = tslib_1.__importDefault(require("../../../../overlay/OverlayTrigger"));
-const Tooltip_1 = tslib_1.__importDefault(require("../../../../tooltip/Tooltip"));
-const useClickOutside_1 = tslib_1.__importDefault(require("../../../../../hooks/useClickOutside"));
-const MenuItemList_1 = tslib_1.__importDefault(require("../../../../menuItems/MenuItemList"));
-const MenuItem_1 = tslib_1.__importDefault(require("../../../../menuItems/MenuItem"));
-const deviceUtils_1 = require("../../../../../utils/deviceUtils");
-const TOOLTIP_SHOW_TIMEOUT_IN_MS = 800;
-const TOOLTIP_HIDE_TIMEOUT_IN_MS = 100;
-const getComponentWithTooltip = (component, tooltip) => {
-    return ((0, jsx_runtime_1.jsx)(OverlayTrigger_1.default, { placement: Tooltip_1.default.TOP, delay: { show: TOOLTIP_SHOW_TIMEOUT_IN_MS, hide: TOOLTIP_HIDE_TIMEOUT_IN_MS }, overlay: (0, jsx_runtime_1.jsx)(Tooltip_1.default, { id: 'tooltip', width: 'auto', children: tooltip }), children: component }));
-};
-const MapSettingsTile = (props) => {
-    const { onToggle = noop_1.default, activeIcon, inactiveIcon, isActive = false, panel, items, className, buttonClassName, tooltip, ...remainingProps } = props;
-    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
-    const handleToggle = () => {
-        const newState = !isOpen;
-        setIsOpen(newState);
-        onToggle(newState);
-        buttonRef.current.blur();
-    };
-    const handleClosePanel = () => {
-        if (isOpen && panel) {
-            setIsOpen(false);
-            onToggle(false);
-            buttonRef.current.blur();
-        }
-    };
-    const buttonRef = (0, useClickOutside_1.default)(handleClosePanel);
-    const [toggleRef, setToggleRef] = (0, react_1.useState)(null);
-    const [refDropdownMenu, setRefDropdownMenu] = (0, react_1.useState)(null);
-    const { styles, attributes } = (0, react_popper_1.usePopper)(toggleRef, refDropdownMenu, {
-        placement: 'top-end',
-        modifiers: isOpen && (0, deviceUtils_1.isMobileScreen)()
-            ? [
-                {
-                    name: 'offset',
-                    options: {
-                        offset: [-60, -60],
-                    },
-                },
-            ]
-            : [],
-    });
-    const dropdownWrapperRef = (0, useClickOutside_1.default)((event) => {
-        if (toggleRef?.contains(event.target)) {
-            return;
-        }
-        if (isOpen) {
-            setIsOpen(false);
-            onToggle(false);
-        }
-    });
-    const wrapperClasses = (0, classnames_1.default)('MapSettingsTile', className);
-    const buttonClasses = (0, classnames_1.default)('MapSettingsButton', isOpen && 'active', buttonClassName);
-    const activeIconClassNames = (0, classnames_1.default)('MapSettingsTileIcon', 'hover-scale-110', isActive ? 'display-block' : 'display-none', activeIcon?.props.className || '');
-    const inactiveIconClassNames = (0, classnames_1.default)('MapSettingsTileIcon', 'hover-scale-110', isActive ? 'display-none' : 'display-block', inactiveIcon?.props.className || '');
-    const button = ((0, jsx_runtime_1.jsxs)("div", { className: buttonClasses, onClick: handleToggle, children: [activeIcon &&
-                react_1.default.cloneElement(activeIcon, {
-                    className: activeIconClassNames,
-                }), inactiveIcon &&
-                react_1.default.cloneElement(inactiveIcon, {
-                    className: inactiveIconClassNames,
-                })] }));
-    return ((0, jsx_runtime_1.jsxs)("div", { className: wrapperClasses, ref: buttonRef, ...remainingProps, children: [!items && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [tooltip && !isOpen ? getComponentWithTooltip(button, tooltip) : button, (0, jsx_runtime_1.jsx)("div", { className: 'overflow-hidden', children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: isOpen && panel && panel }) })] })), items && ((0, jsx_runtime_1.jsxs)("div", { className: 'MapSettingsTile-inner position-relative', ref: setToggleRef, children: [tooltip && !isOpen ? getComponentWithTooltip(button, tooltip) : button, (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: (0, jsx_runtime_1.jsx)("div", { className: 'dropdown', ref: dropdownWrapperRef, children: isOpen && items && ((0, jsx_runtime_1.jsx)(MenuItemList_1.default, { className: 'margin-bottom-10 shadow-smooth border-none', ref: setRefDropdownMenu, style: { ...styles.popper, minWidth: '180px' }, ...attributes.popper, children: items?.map((item, index) => {
-                                    if (item.type.isMapSettingsDropdownHeader) {
-                                        return item;
-                                    }
-                                    return (0, jsx_runtime_1.jsx)(MenuItem_1.default, { value: item }, index);
-                                }) })) }) })] }))] }));
-};
-exports.default = MapSettingsTile;

package/lib/es/components/map/components/features/settings/ZoomButtons.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-export type ZoomButtonsProps = {
-    onZoomIn?: (event: React.MouseEvent<HTMLDivElement>) => void;
-    onZoomOut?: (event: React.MouseEvent<HTMLDivElement>) => void;
-};
-declare const ZoomButtons: ({ onZoomIn, onZoomOut }: ZoomButtonsProps) => import("react/jsx-runtime").JSX.Element;
-export default ZoomButtons;

package/lib/es/components/map/components/features/settings/ZoomButtons.js

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const MapIcon_1 = require("../../../icons/MapIcon");
-const ZoomButtons = ({ onZoomIn, onZoomOut }) => {
-    const buttonClasses = (0, classnames_1.default)('ZoomButtons');
-    return ((0, jsx_runtime_1.jsxs)("div", { className: buttonClasses, children: [(0, jsx_runtime_1.jsx)("div", { className: 'MapSettingsTile', onClick: onZoomIn, children: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.ZOOM_IN, className: 'display-block hover-scale-110', height: 16, width: 16 }) }), (0, jsx_runtime_1.jsx)("div", { className: 'MapSettingsTileSpacer' }), (0, jsx_runtime_1.jsx)("div", { className: 'MapSettingsTile', onClick: onZoomOut, children: (0, jsx_runtime_1.jsx)(MapIcon_1.MapIcon, { name: MapIcon_1.ZOOM_OUT, className: 'display-block hover-scale-110', height: 16, width: 16 }) })] }));
-};
-exports.default = ZoomButtons;

package/lib/es/components/map/components/features/settings/builtinSettings/MapAdditionalLayerSettings.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-export type MapAdditionalLayerSettingsProps = {
-    activeBuiltinLayers?: string[];
-    activeLayers?: string[];
-    layers?: JSX.Element[];
-    tooltip?: string | React.ReactNode;
-};
-declare const MapAdditionalLayerSettings: (props: MapAdditionalLayerSettingsProps) => import("react/jsx-runtime").JSX.Element;
-export default MapAdditionalLayerSettings;