@rio-cloud/uikit-mcp 1.1.9 → 1.1.11

package/dist/docs/components/mapRoute.md

@@ -3,7 +3,7 @@
 *Category:* Components
 *Section:* Map
 *Source:* https://uikit.developers.rio.cloud/#/components/mapRoute
-*Captured:* 2026-03-06T10:41:23.634Z
+*Captured:* 2026-04-27T14:59:22.858Z
 
 There are currently 3 different route styles built-in into the map component.
 
@@ -13,15 +13,31 @@ The "reduced" style is meant for historic routes and shall indicate that the dri
 
 The "alternativeRoute" style is meant for route planning cases and shall show alternate routes.
 
+If route interaction is enabled, the route uses an invisible hit area for hover and click handling. This keeps pointer and hover behavior stable even though the visible route may render multiple polylines such as line, border or arrows.
+
+For routes with multiple segments, render each segment as its own Route component. This allows attaching separate eventListenerMap handlers and customData to each segment, for example to make an alternative route clickable independently from the main route.
+
 ### Example: Example 1
 
+Terms of use © 1987–2026 HERE
+
+10 km
 
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
+
+Show route hit area
 
 #### React (tsx)
 
 ```tsx
 import { useId, useState } from 'react';
 
+import Checkbox from '@rio-cloud/rio-uikit/Checkbox';
 import Map from '@rio-cloud/rio-uikit/Map';
 import EventUtils from '@rio-cloud/rio-uikit/EventUtils';
 import Route from '@rio-cloud/rio-uikit/Route';
@@ -62,7 +78,7 @@ const positions: Position[] = [
 const route2Positions = positions.map(pos => ({ lat: pos.lat, lng: pos.lng + offset }));
 const route3Positions = positions.map(pos => ({ lat: pos.lat, lng: pos.lng + offset * 2 }));
 
-const Routes = () => {
+const Routes = ({ showHitArea }: { showHitArea: boolean }) => {
     const [activeRouteId, setActiveRouteId] = useState(1);
     const isActive = (id: number) => activeRouteId === id;
     const isFirstRouteActive = isActive(1);
@@ -99,6 +115,8 @@ const Routes = () => {
                 endIcon={<SingleMapMarker iconNames={['finish']} markerColor='bg-map-marker-route' />}
                 isRouteAlternative={!isFirstRouteActive}
                 eventListenerMap={routeEventListenerMap}
+                hoverStyle={{ width: 7, borderWidth: 3 }}
+                showHitArea={showHitArea}
                 customData={{ id: 1 }}
                 hasArrows={false}
                 markers={[
@@ -147,6 +165,8 @@ const Routes = () => {
                 hasArrows={false}
                 isRouteAlternative={!isSecondRouteActive}
                 eventListenerMap={routeEventListenerMap}
+                hoverStyle={{ width: 7, borderWidth: 3 }}
+                showHitArea={showHitArea}
                 customData={{ id: 2 }}
                 markers={[
                     <Marker
@@ -172,6 +192,7 @@ const Routes = () => {
                 endIcon={<SingleMapMarker iconNames={['finish']} markerColor='bg-map-marker-route' />}
                 eventListenerMap={routeEventListenerMap}
                 hasArrows={false}
+                showHitArea={showHitArea}
                 isReduced
             />
         </>
@@ -180,32 +201,40 @@ const Routes = () => {
 
 const RouteExample = () => {
     const position = { lat: 48.7497783, lng: 13.1000291 };
+    const [showHitArea, setShowHitArea] = useState(false);
 
     return (
-        <Map
-            credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
-            center={position}
-            zoom={10}
-            height={300}
-            mapSettings={
-                <MapSettings
-                    options={[
-                        <MapTypeSettings
-                            key='mapTypeSettings'
-                            tooltip='Change map type'
-                            dropdownHeaderText='Map views'
-                            defaultTypeLabel='Default view'
-                            truckTypeLabel='Truck view'
-                            terrainTypeLabel='Terrain view'
-                            satelliteTypeLabel='Satellite view'
-                            nightTypeLabel='Night view'
-                        />,
-                    ]}
-                />
-            }
-        >
-            <Routes />
-        </Map>
+        <>
+            <Map
+                credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
+                center={position}
+                zoom={10}
+                height={300}
+                mapSettings={
+                    <MapSettings
+                        options={[
+                            <MapTypeSettings
+                                key='mapTypeSettings'
+                                tooltip='Change map type'
+                                dropdownHeaderText='Map views'
+                                defaultTypeLabel='Default view'
+                                truckTypeLabel='Truck view'
+                                terrainTypeLabel='Terrain view'
+                                satelliteTypeLabel='Satellite view'
+                                nightTypeLabel='Night view'
+                            />,
+                        ]}
+                    />
+                }
+            >
+                <Routes showHitArea={showHitArea} />
+            </Map>
+            <div className='margin-top-10'>
+                <Checkbox checked={showHitArea} onChange={event => setShowHitArea(event.target.checked)}>
+                    Show route hit area
+                </Checkbox>
+            </div>
+        </>
     );
 };
 
@@ -222,17 +251,31 @@ export default RouteExample;
 | isReduced | Boolean | false | Defines whether to render the route as reduced (transparent). |
 | isRouteAlternative | Boolean | false | Defines whether to render the route with alternative route style. |
 | style | RouteStyle | — | Custom style for the route. |
-| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |
+| hoverStyle | RouteStyle | — | Optional style that is applied while hovering the route. |
+| showHitArea | Boolean | false | Shows the invisible route hit area for debugging. The hit area is used as the route interaction surface. |
+| cursor | string | — | Optional CSS cursor for the route. Defaults to pointer when tap, double tap or context menu handlers are set. |
+| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. Events are attached to the route hit area, which acts as the route interaction surface. |
 | startIcon | JSX.Element | — | Icon to be displayed at the start of the route. |
 | middleIcon | JSX.Element | — | Icon to be displayed at the middle of the route. |
 | endIcon | JSX.Element | — | Icon to be displayed at the end of the route. |
 | markers | JSX.Element[] | — | Array of markers to be displayed on the route. |
-| customData | object | — | Custom data to be passed to the route. |
+| customData | object | — | Custom data to be passed to the route and returned by route interaction events. |
 
 ## Route with changing geometry
 
 ### Example: Example 2
 
+Terms of use © 1987–2026 HERE
+
+10 km
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
+
 Change route Toggle route
 
 #### React (tsx)
@@ -286,9 +329,7 @@ const RouteWithChangingGeometryExample = () => {
 
     const handleClick = () => {
         const modifier = getRandomModifier();
-        const newRoute = currentRoute.map(pos => {
-            return { lat: pos.lat + modifier, lng: pos.lng + modifier };
-        });
+        const newRoute = currentRoute.map(pos => ({ lat: pos.lat + modifier, lng: pos.lng + modifier }));
 
         setCurrentRoute(newRoute);
         setCenter(newRoute[Math.floor(currentRoute.length / 2)]);
@@ -357,17 +398,31 @@ export default RouteWithChangingGeometryExample;
 | isReduced | Boolean | false | Defines whether to render the route as reduced (transparent). |
 | isRouteAlternative | Boolean | false | Defines whether to render the route with alternative route style. |
 | style | RouteStyle | — | Custom style for the route. |
-| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |
+| hoverStyle | RouteStyle | — | Optional style that is applied while hovering the route. |
+| showHitArea | Boolean | false | Shows the invisible route hit area for debugging. The hit area is used as the route interaction surface. |
+| cursor | string | — | Optional CSS cursor for the route. Defaults to pointer when tap, double tap or context menu handlers are set. |
+| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. Events are attached to the route hit area, which acts as the route interaction surface. |
 | startIcon | JSX.Element | — | Icon to be displayed at the start of the route. |
 | middleIcon | JSX.Element | — | Icon to be displayed at the middle of the route. |
 | endIcon | JSX.Element | — | Icon to be displayed at the end of the route. |
 | markers | JSX.Element[] | — | Array of markers to be displayed on the route. |
-| customData | object | — | Custom data to be passed to the route. |
+| customData | object | — | Custom data to be passed to the route and returned by route interaction events. |
 
 ## Route with changing styles
 
 ### Example: Example 3
 
+Terms of use © 1987–2026 HERE
+
+10 km
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
+
 Toggle reduced style Toggle arrows
 
 #### React (tsx)
@@ -469,18 +524,30 @@ export default RouteWithChangingStylesExample;
 | isReduced | Boolean | false | Defines whether to render the route as reduced (transparent). |
 | isRouteAlternative | Boolean | false | Defines whether to render the route with alternative route style. |
 | style | RouteStyle | — | Custom style for the route. |
-| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |
+| hoverStyle | RouteStyle | — | Optional style that is applied while hovering the route. |
+| showHitArea | Boolean | false | Shows the invisible route hit area for debugging. The hit area is used as the route interaction surface. |
+| cursor | string | — | Optional CSS cursor for the route. Defaults to pointer when tap, double tap or context menu handlers are set. |
+| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. Events are attached to the route hit area, which acts as the route interaction surface. |
 | startIcon | JSX.Element | — | Icon to be displayed at the start of the route. |
 | middleIcon | JSX.Element | — | Icon to be displayed at the middle of the route. |
 | endIcon | JSX.Element | — | Icon to be displayed at the end of the route. |
 | markers | JSX.Element[] | — | Array of markers to be displayed on the route. |
-| customData | object | — | Custom data to be passed to the route. |
+| customData | object | — | Custom data to be passed to the route and returned by route interaction events. |
 
 ## Route with different colors
 
 ### Example: Example 4
 
+Terms of use © 1987–2026 HERE
+
+10 km
 
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
 
 #### React (tsx)
 
@@ -536,67 +603,65 @@ const getRandomModifier = () => {
     return Math.random() * Math.floor(1) * operator;
 };
 
-export default () => {
-    return (
-        <Map
-            credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
-            center={center}
-            zoom={10}
-            height={300}
-            mapSettings={
-                <MapSettings
-                    options={[
-                        <MapTypeSettings
-                            key='mapTypeSettings'
-                            tooltip='Change map type'
-                            dropdownHeaderText='Map views'
-                            defaultTypeLabel='Default view'
-                            truckTypeLabel='Truck view'
-                            terrainTypeLabel='Terrain view'
-                            satelliteTypeLabel='Satellite view'
-                            nightTypeLabel='Night view'
-                        />,
-                    ]}
+export default () => (
+    <Map
+        credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
+        center={center}
+        zoom={10}
+        height={300}
+        mapSettings={
+            <MapSettings
+                options={[
+                    <MapTypeSettings
+                        key='mapTypeSettings'
+                        tooltip='Change map type'
+                        dropdownHeaderText='Map views'
+                        defaultTypeLabel='Default view'
+                        truckTypeLabel='Truck view'
+                        terrainTypeLabel='Terrain view'
+                        satelliteTypeLabel='Satellite view'
+                        nightTypeLabel='Night view'
+                    />,
+                ]}
+            />
+        }
+    >
+        <Route
+            positions={goodRouteStart}
+            startIcon={<SingleMapMarker iconNames={['start']} markerColor='bg-map-marker-route' />}
+            style={{ color: ROUTE_COLOR_WARNING }}
+        />
+        <Route
+            positions={dangerRoute}
+            middleIcon={
+                <SingleMapMarker
+                    anchorIconName='road-restrictions'
+                    anchorSize='lg'
+                    markerColor='bg-map-marker-danger'
+                    clickable={false}
                 />
             }
-        >
-            <Route
-                positions={goodRouteStart}
-                startIcon={<SingleMapMarker iconNames={['start']} markerColor='bg-map-marker-route' />}
-                style={{ color: ROUTE_COLOR_WARNING }}
-            />
-            <Route
-                positions={dangerRoute}
-                middleIcon={
-                    <SingleMapMarker
-                        anchorIconName='road-restrictions'
-                        anchorSize='lg'
-                        markerColor='bg-map-marker-danger'
-                        clickable={false}
-                    />
-                }
-                style={{ color: ROUTE_COLOR_DANGER, borderColor: '#b91624' }}
-                arrowStyle={{
-                    fillColor: ROUTE_COLOR_WHITE,
-                    strokeColor: ROUTE_COLOR_WHITE,
-                }}
-            />
-            <Route
-                positions={goodRouteEnd}
-                middleIcon={
-                    <SingleMapMarker
-                        anchorIconName='ok'
-                        anchorSize='lg'
-                        markerColor='bg-map-marker-success'
-                        clickable={false}
-                    />
-                }
-                endIcon={<SingleMapMarker iconNames={['finish']} markerColor='bg-map-marker-route' />}
-                style={{ color: ROUTE_COLOR_SUCCESS }}
-            />
-        </Map>
-    );
-};
+            style={{ color: ROUTE_COLOR_DANGER, borderColor: '#b91624' }}
+            arrowStyle={{
+                fillColor: ROUTE_COLOR_WHITE,
+                strokeColor: ROUTE_COLOR_WHITE,
+            }}
+        />
+        <Route
+            positions={goodRouteEnd}
+            middleIcon={
+                <SingleMapMarker
+                    anchorIconName='ok'
+                    anchorSize='lg'
+                    markerColor='bg-map-marker-success'
+                    clickable={false}
+                />
+            }
+            endIcon={<SingleMapMarker iconNames={['finish']} markerColor='bg-map-marker-route' />}
+            style={{ color: ROUTE_COLOR_SUCCESS }}
+        />
+    </Map>
+);
 ```
 
 #### Props
@@ -609,18 +674,30 @@ export default () => {
 | isReduced | Boolean | false | Defines whether to render the route as reduced (transparent). |
 | isRouteAlternative | Boolean | false | Defines whether to render the route with alternative route style. |
 | style | RouteStyle | — | Custom style for the route. |
-| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |
+| hoverStyle | RouteStyle | — | Optional style that is applied while hovering the route. |
+| showHitArea | Boolean | false | Shows the invisible route hit area for debugging. The hit area is used as the route interaction surface. |
+| cursor | string | — | Optional CSS cursor for the route. Defaults to pointer when tap, double tap or context menu handlers are set. |
+| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. Events are attached to the route hit area, which acts as the route interaction surface. |
 | startIcon | JSX.Element | — | Icon to be displayed at the start of the route. |
 | middleIcon | JSX.Element | — | Icon to be displayed at the middle of the route. |
 | endIcon | JSX.Element | — | Icon to be displayed at the end of the route. |
 | markers | JSX.Element[] | — | Array of markers to be displayed on the route. |
-| customData | object | — | Custom data to be passed to the route. |
+| customData | object | — | Custom data to be passed to the route and returned by route interaction events. |
 
 ## Route indicating a range for electric vehicles
 
 ### Example: Example 5
 
+Terms of use © 1987–2026 HERE
+
+10 km
+
+Choose view
+Map view
+Satellite
 
+Traffic conditions
+Show traffic incidents
 
 #### React (tsx)
 
@@ -671,67 +748,65 @@ const getRandomModifier = () => {
     return Math.random() * Math.floor(1) * operator;
 };
 
-export default () => {
-    return (
-        <Map
-            credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
-            center={center}
-            zoom={10}
-            height={300}
-            mapSettings={
-                <MapSettings
-                    options={[
-                        <MapTypeSettings
-                            key='mapTypeSettings'
-                            tooltip='Change map type'
-                            dropdownHeaderText='Map views'
-                            defaultTypeLabel='Default view'
-                            truckTypeLabel='Truck view'
-                            terrainTypeLabel='Terrain view'
-                            satelliteTypeLabel='Satellite view'
-                            nightTypeLabel='Night view'
-                        />,
-                    ]}
+export default () => (
+    <Map
+        credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
+        center={center}
+        zoom={10}
+        height={300}
+        mapSettings={
+            <MapSettings
+                options={[
+                    <MapTypeSettings
+                        key='mapTypeSettings'
+                        tooltip='Change map type'
+                        dropdownHeaderText='Map views'
+                        defaultTypeLabel='Default view'
+                        truckTypeLabel='Truck view'
+                        terrainTypeLabel='Terrain view'
+                        satelliteTypeLabel='Satellite view'
+                        nightTypeLabel='Night view'
+                    />,
+                ]}
+            />
+        }
+    >
+        <Route
+            positions={goodRouteStart}
+            startIcon={<SingleMapMarker iconNames={['start']} markerColor='bg-map-marker-route' />}
+        />
+        <Route
+            positions={dangerRoute}
+            startIcon={
+                <SingleMapMarker
+                    anchorIconName='battery-level-low'
+                    anchorSize='lg'
+                    markerColor='bg-map-marker-warning'
+                    clickable={false}
                 />
             }
-        >
-            <Route
-                positions={goodRouteStart}
-                startIcon={<SingleMapMarker iconNames={['start']} markerColor='bg-map-marker-route' />}
-            />
-            <Route
-                positions={dangerRoute}
-                startIcon={
-                    <SingleMapMarker
-                        anchorIconName='battery-level-low'
-                        anchorSize='lg'
-                        markerColor='bg-map-marker-warning'
-                        clickable={false}
-                    />
-                }
-                style={{ color: ROUTE_COLOR_WARNING }}
-                arrowStyle={{
-                    fillColor: ARROW_COLOR_WARNING,
-                    strokeColor: ARROW_COLOR_WARNING,
-                }}
-            />
-            <Route
-                positions={goodRouteEnd}
-                startIcon={
-                    <SingleMapMarker
-                        anchorIconName='battery-level-empty'
-                        anchorSize='lg'
-                        markerColor='bg-map-marker-danger'
-                        clickable={false}
-                    />
-                }
-                endIcon={<SingleMapMarker iconNames={['finish']} markerColor='bg-map-marker-danger' />}
-                style={{ color: ROUTE_COLOR_DANGER, borderColor: '#b91624', borderWidth: 0, lineDash: [1.5, 1] }}
-                hasArrows={false}
-            />
-        </Map>
-    );
-};
+            style={{ color: ROUTE_COLOR_WARNING }}
+            arrowStyle={{
+                fillColor: ARROW_COLOR_WARNING,
+                strokeColor: ARROW_COLOR_WARNING,
+            }}
+        />
+        <Route
+            positions={goodRouteEnd}
+            startIcon={
+                <SingleMapMarker
+                    anchorIconName='battery-level-empty'
+                    anchorSize='lg'
+                    markerColor='bg-map-marker-danger'
+                    clickable={false}
+                />
+            }
+            endIcon={<SingleMapMarker iconNames={['finish']} markerColor='bg-map-marker-danger' />}
+            style={{ color: ROUTE_COLOR_DANGER, borderColor: '#b91624', borderWidth: 0, lineDash: [1.5, 1] }}
+            hasArrows={false}
+        />
+    </Map>
+);
 ```
 
 #### Props
@@ -744,17 +819,31 @@ export default () => {
 | isReduced | Boolean | false | Defines whether to render the route as reduced (transparent). |
 | isRouteAlternative | Boolean | false | Defines whether to render the route with alternative route style. |
 | style | RouteStyle | — | Custom style for the route. |
-| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |
+| hoverStyle | RouteStyle | — | Optional style that is applied while hovering the route. |
+| showHitArea | Boolean | false | Shows the invisible route hit area for debugging. The hit area is used as the route interaction surface. |
+| cursor | string | — | Optional CSS cursor for the route. Defaults to pointer when tap, double tap or context menu handlers are set. |
+| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. Events are attached to the route hit area, which acts as the route interaction surface. |
 | startIcon | JSX.Element | — | Icon to be displayed at the start of the route. |
 | middleIcon | JSX.Element | — | Icon to be displayed at the middle of the route. |
 | endIcon | JSX.Element | — | Icon to be displayed at the end of the route. |
 | markers | JSX.Element[] | — | Array of markers to be displayed on the route. |
-| customData | object | — | Custom data to be passed to the route. |
+| customData | object | — | Custom data to be passed to the route and returned by route interaction events. |
 
 ## Route sandbox
 
 ### Example: Example 6
 
+Terms of use © 1987–2026 HERE
+
+10 km
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
+
 {
 "segments": [
 {
@@ -2151,18 +2240,16 @@ const Markers = ({ markers }: { markers: SandboxMarker[] }) => {
 };
 
 const Segments = ({ segments }: { segments: RouteSegment[] }) => {
-    const mapSegments = segments.map(segment => {
-        return (
-            <Route
-                key={getRandomValueToForceRerender()}
-                positions={segment.points}
-                isRouteAlternative={segment.alternative}
-                isReduced={segment.reduced}
-                style={segment.style}
-                hasArrows={segment.showArrows}
-            />
-        );
-    });
+    const mapSegments = segments.map(segment => (
+        <Route
+            key={getRandomValueToForceRerender()}
+            positions={segment.points}
+            isRouteAlternative={segment.alternative}
+            isReduced={segment.reduced}
+            style={segment.style}
+            hasArrows={segment.showArrows}
+        />
+    ));
     return mapSegments;
 };
 
@@ -2210,7 +2297,7 @@ const RouteSandboxExample = () => {
             setMarkers([...data.markers, ...routePoints]);
             setSegments(data.segments);
             setHasError(false);
-        } catch (error) {
+        } catch {
             setHasError(true);
         }
     }, [text, showRouteEvents]);
@@ -2343,9 +2430,12 @@ const defaultMarker = {
 | isReduced | Boolean | false | Defines whether to render the route as reduced (transparent). |
 | isRouteAlternative | Boolean | false | Defines whether to render the route with alternative route style. |
 | style | RouteStyle | — | Custom style for the route. |
-| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |
+| hoverStyle | RouteStyle | — | Optional style that is applied while hovering the route. |
+| showHitArea | Boolean | false | Shows the invisible route hit area for debugging. The hit area is used as the route interaction surface. |
+| cursor | string | — | Optional CSS cursor for the route. Defaults to pointer when tap, double tap or context menu handlers are set. |
+| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. Events are attached to the route hit area, which acts as the route interaction surface. |
 | startIcon | JSX.Element | — | Icon to be displayed at the start of the route. |
 | middleIcon | JSX.Element | — | Icon to be displayed at the middle of the route. |
 | endIcon | JSX.Element | — | Icon to be displayed at the end of the route. |
 | markers | JSX.Element[] | — | Array of markers to be displayed on the route. |
-| customData | object | — | Custom data to be passed to the route. |
+| customData | object | — | Custom data to be passed to the route and returned by route interaction events. |