# Route

*Category:* Components
*Section:* Map
*Source:* https://uikit.developers.rio.cloud/#/components/mapRoute
*Captured:* 2026-04-27T14:59:22.858Z

There are currently 3 different route styles built-in into the map component.

## Route

The "reduced" style is meant for historic routes and shall indicate that the driver went that route but is ahead of a certain timestamp.

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';
import Marker from '@rio-cloud/rio-uikit/Marker';
import SingleMapMarker from '@rio-cloud/rio-uikit/SingleMapMarker';
import MapSettings from '@rio-cloud/rio-uikit/MapSettings';
import MapTypeSettings from '@rio-cloud/rio-uikit/MapTypeSettings';
import Notification from '@rio-cloud/rio-uikit/Notification';
import type { MapEvent, Position } from '@rio-cloud/rio-uikit/mapTypes';

import { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';

const offset = 0.3;

const getMiddlePos = (allPositions: Position[]) => allPositions[Math.floor(allPositions.length / 2)];

const positions: Position[] = [
    { lat: 48.6898766, lng: 12.6748714 },
    { lat: 48.69664, lng: 12.676465 },
    { lat: 48.7036781, lng: 12.6883364 },
    { lat: 48.7120438, lng: 12.7029095 },
    { lat: 48.719677, lng: 12.7183695 },
    { lat: 48.7297783, lng: 12.7300291 },
    { lat: 48.7417717, lng: 12.736865 },
    { lat: 48.7487717, lng: 12.7527666 },
    { lat: 48.7575531, lng: 12.7673788 },
    { lat: 48.7681808, lng: 12.7792053 },
    { lat: 48.7763824, lng: 12.7935705 },
    { lat: 48.7802505, lng: 12.8117657 },
    { lat: 48.7864838, lng: 12.8284893 },
    { lat: 48.7955551, lng: 12.8416948 },
    { lat: 48.801033, lng: 12.8583927 },
    { lat: 48.8017998, lng: 12.8773537 },
    { lat: 48.7978935, lng: 12.8954306 },
    { lat: 48.7991867, lng: 12.9137754 },
    { lat: 48.8086166, lng: 12.9266558 },
];
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 = ({ showHitArea }: { showHitArea: boolean }) => {
    const [activeRouteId, setActiveRouteId] = useState(1);
    const isActive = (id: number) => activeRouteId === id;
    const isFirstRouteActive = isActive(1);
    const isSecondRouteActive = isActive(2);

    const route1Key = useId();
    const route2Key = useId();

    const markerEventListenerMap = {
        [EventUtils.TAP]: (event: MapEvent) => {
            event.stopPropagation();
            setActiveRouteId((event.currentTarget as H.map.Object).getData().id);
        },
    };

    const routeEventListenerMap = {
        [EventUtils.TAP]: (event: MapEvent) => {
            event.stopPropagation();
            setActiveRouteId((event.currentTarget as H.map.Object).getData().id);
            Notification.info('Route clicked');
        },
        [EventUtils.POINTER_MOVE]: (event: MapEvent) => {
            event.stopPropagation();
            console.log(event);
        },
    };

    return (
        <>
            <Route
                key={route1Key}
                positions={positions}
                startIcon={<SingleMapMarker iconNames={['start']} markerColor='bg-map-marker-route' />}
                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={[
                    <Marker
                        key='1'
                        customData={{ id: 1 }}
                        position={getMiddlePos(positions)}
                        eventListenerMap={markerEventListenerMap}
                        icon={
                            <SingleMapMarker
                                iconNames={['route']}
                                name='236km / 2h 37min'
                                markerColor='bg-map-marker-route'
                                active={isFirstRouteActive}
                                fixed
                            />
                        }
                    />,
                    <Marker
                        key='2'
                        position={positions[3]}
                        icon={
                            <SingleMapMarker
                                markerColor='bg-map-marker-route'
                                name={<div className='padding-x-15'>Lorem ipsum dolor sit amet</div>}
                                markerOnHover
                            />
                        }
                    />,
                    <Marker
                        key='3'
                        position={positions[5]}
                        icon={
                            <SingleMapMarker
                                markerColor='bg-map-marker-route'
                                name={<div className='padding-x-15'>Lorem ipsum dolor sit amet</div>}
                                markerOnHover
                            />
                        }
                    />,
                ]}
            />
            <Route
                key={route2Key}
                positions={route2Positions}
                hasArrows={false}
                isRouteAlternative={!isSecondRouteActive}
                eventListenerMap={routeEventListenerMap}
                hoverStyle={{ width: 7, borderWidth: 3 }}
                showHitArea={showHitArea}
                customData={{ id: 2 }}
                markers={[
                    <Marker
                        key='2'
                        customData={{ id: 2 }}
                        position={getMiddlePos(route2Positions)}
                        eventListenerMap={markerEventListenerMap}
                        icon={
                            <SingleMapMarker
                                iconNames={['route']}
                                name='166km / 1h 47min'
                                markerColor='bg-map-marker-route'
                                active={isSecondRouteActive}
                                fixed
                            />
                        }
                    />,
                ]}
            />
            <Route
                positions={route3Positions}
                startIcon={<SingleMapMarker iconNames={['start']} markerColor='bg-map-marker-route' />}
                endIcon={<SingleMapMarker iconNames={['finish']} markerColor='bg-map-marker-route' />}
                eventListenerMap={routeEventListenerMap}
                hasArrows={false}
                showHitArea={showHitArea}
                isReduced
            />
        </>
    );
};

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 showHitArea={showHitArea} />
            </Map>
            <div className='margin-top-10'>
                <Checkbox checked={showHitArea} onChange={event => setShowHitArea(event.target.checked)}>
                    Show route hit area
                </Checkbox>
            </div>
        </>
    );
};

export default RouteExample;
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| positions | Array of Objects | — | Array of points {lat, lng} the route is connecting. |
| hasArrows | Boolean | true | Defines whether to show arrows or not. |
| arrowStyle | ArrowStyle | — | Defines the style of the arrows on the route. |
| 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. |
| 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 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)

```tsx
import React, { useState } from 'react';

import Map from '@rio-cloud/rio-uikit/Map';
import Route from '@rio-cloud/rio-uikit/Route';
import SingleMapMarker from '@rio-cloud/rio-uikit/SingleMapMarker';
import MapSettings from '@rio-cloud/rio-uikit/MapSettings';
import MapTypeSettings from '@rio-cloud/rio-uikit/MapTypeSettings';
import Button from '@rio-cloud/rio-uikit/Button';

import { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';
import type { Position } from '@rio-cloud/rio-uikit/mapTypes';

const position = { lat: 48.7497783, lng: 12.8300291 };

const positions: Position[] = [
    { lat: 48.6898766, lng: 12.6748714 },
    { lat: 48.69664, lng: 12.676465 },
    { lat: 48.7036781, lng: 12.6883364 },
    { lat: 48.7120438, lng: 12.7029095 },
    { lat: 48.719677, lng: 12.7183695 },
    { lat: 48.7297783, lng: 12.7300291 },
    { lat: 48.7417717, lng: 12.736865 },
    { lat: 48.7487717, lng: 12.7527666 },
    { lat: 48.7575531, lng: 12.7673788 },
    { lat: 48.7681808, lng: 12.7792053 },
    { lat: 48.7763824, lng: 12.7935705 },
    { lat: 48.7802505, lng: 12.8117657 },
    { lat: 48.7864838, lng: 12.8284893 },
    { lat: 48.7955551, lng: 12.8416948 },
    { lat: 48.801033, lng: 12.8583927 },
    { lat: 48.8017998, lng: 12.8773537 },
    { lat: 48.7978935, lng: 12.8954306 },
    { lat: 48.7991867, lng: 12.9137754 },
    { lat: 48.8086166, lng: 12.9266558 },
];

const getRandomModifier = () => {
    const operator = Math.random() < 0.5 ? -1 : 1;
    return Math.random() * Math.floor(1) * operator;
};

const RouteWithChangingGeometryExample = () => {
    const [currentRoute, setCurrentRoute] = useState(positions);
    const [center, setCenter] = useState(position);
    const [showRoute, setShowRoute] = useState(true);

    const handleClick = () => {
        const modifier = getRandomModifier();
        const newRoute = currentRoute.map(pos => ({ lat: pos.lat + modifier, lng: pos.lng + modifier }));

        setCurrentRoute(newRoute);
        setCenter(newRoute[Math.floor(currentRoute.length / 2)]);
    };

    const handleToggle = () => setShowRoute(!showRoute);

    return (
        <React.Fragment>
            <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'
                            />,
                        ]}
                    />
                }
            >
                {showRoute && (
                    <Route
                        positions={currentRoute}
                        startIcon={<SingleMapMarker iconNames={['start']} markerColor='bg-map-marker-route' />}
                        middleIcon={
                            <SingleMapMarker
                                anchorIconName='route'
                                markerColor='bg-map-marker-route'
                                clickable={false}
                                anchorSize='lg'
                            />
                        }
                        endIcon={<SingleMapMarker iconNames={['finish']} markerColor='bg-map-marker-route' />}
                    />
                )}
            </Map>
            <div className='btn-toolbar margin-top-10'>
                <Button onClick={handleClick}>Change route</Button>
                <Button onClick={handleToggle}>Toggle route</Button>
            </div>
        </React.Fragment>
    );
};

export default RouteWithChangingGeometryExample;
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| positions | Array of Objects | — | Array of points {lat, lng} the route is connecting. |
| hasArrows | Boolean | true | Defines whether to show arrows or not. |
| arrowStyle | ArrowStyle | — | Defines the style of the arrows on the route. |
| 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. |
| 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 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)

```tsx
import React, { useState } from 'react';

import Map from '@rio-cloud/rio-uikit/Map';
import Route from '@rio-cloud/rio-uikit/Route';
import SingleMapMarker from '@rio-cloud/rio-uikit/SingleMapMarker';
import MapSettings from '@rio-cloud/rio-uikit/MapSettings';
import MapTypeSettings from '@rio-cloud/rio-uikit/MapTypeSettings';
import Button from '@rio-cloud/rio-uikit/Button';

import { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';
import type { Position } from '@rio-cloud/rio-uikit/mapTypes';

const position = { lat: 48.7497783, lng: 12.8300291 };

const positions: Position[] = [
    { lat: 48.6898766, lng: 12.6748714 },
    { lat: 48.69664, lng: 12.676465 },
    { lat: 48.7036781, lng: 12.6883364 },
    { lat: 48.7120438, lng: 12.7029095 },
    { lat: 48.719677, lng: 12.7183695 },
    { lat: 48.7297783, lng: 12.7300291 },
    { lat: 48.7417717, lng: 12.736865 },
    { lat: 48.7487717, lng: 12.7527666 },
    { lat: 48.7575531, lng: 12.7673788 },
    { lat: 48.7681808, lng: 12.7792053 },
    { lat: 48.7763824, lng: 12.7935705 },
    { lat: 48.7802505, lng: 12.8117657 },
    { lat: 48.7864838, lng: 12.8284893 },
    { lat: 48.7955551, lng: 12.8416948 },
    { lat: 48.801033, lng: 12.8583927 },
    { lat: 48.8017998, lng: 12.8773537 },
    { lat: 48.7978935, lng: 12.8954306 },
    { lat: 48.7991867, lng: 12.9137754 },
    { lat: 48.8086166, lng: 12.9266558 },
];

const RouteWithChangingStylesExample = () => {
    const [reduced, setReduced] = useState(false);
    const [arrows, setArrows] = useState(false);

    const handleReducedButtonClick = () => setReduced(!reduced);
    const handleArrowsButtonClick = () => setArrows(!arrows);

    return (
        <React.Fragment>
            <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'
                            />,
                        ]}
                    />
                }
            >
                <Route
                    isReduced={reduced}
                    hasArrows={arrows}
                    positions={positions}
                    startIcon={<SingleMapMarker iconNames={['start']} markerColor='bg-map-marker-route' />}
                    endIcon={<SingleMapMarker iconNames={['finish']} markerColor='bg-map-marker-route' />}
                />
            </Map>
            <div className='btn-toolbar margin-top-10'>
                <Button onClick={handleReducedButtonClick}>Toggle reduced style</Button>
                <Button onClick={handleArrowsButtonClick}>Toggle arrows</Button>
            </div>
        </React.Fragment>
    );
};

export default RouteWithChangingStylesExample;
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| positions | Array of Objects | — | Array of points {lat, lng} the route is connecting. |
| hasArrows | Boolean | true | Defines whether to show arrows or not. |
| arrowStyle | ArrowStyle | — | Defines the style of the arrows on the route. |
| 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. |
| 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 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)

```tsx
import Map from '@rio-cloud/rio-uikit/Map';
import Route, {
    ROUTE_COLOR_DANGER,
    ROUTE_COLOR_SUCCESS,
    ROUTE_COLOR_WARNING,
    ROUTE_COLOR_WHITE,
} from '@rio-cloud/rio-uikit/Route';
import SingleMapMarker from '@rio-cloud/rio-uikit/SingleMapMarker';
import MapSettings from '@rio-cloud/rio-uikit/MapSettings';
import MapTypeSettings from '@rio-cloud/rio-uikit/MapTypeSettings';

import { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';
import type { Position } from '@rio-cloud/rio-uikit/mapTypes';

const center = { lat: 48.7497783, lng: 12.8300291 };

const goodRouteStart: Position[] = [
    { lat: 48.6898766, lng: 12.6748714 },
    { lat: 48.69664, lng: 12.676465 },
    { lat: 48.7036781, lng: 12.6883364 },
    { lat: 48.7120438, lng: 12.7029095 },
    { lat: 48.719677, lng: 12.7183695 },
    { lat: 48.7297783, lng: 12.7300291 },
];

const dangerRoute: Position[] = [
    { lat: 48.7297783, lng: 12.7300291 },
    { lat: 48.7417717, lng: 12.736865 },
    { lat: 48.7487717, lng: 12.7527666 },
    { lat: 48.7575531, lng: 12.7673788 },
    { lat: 48.7681808, lng: 12.7792053 },
    { lat: 48.7763824, lng: 12.7935705 },
    { lat: 48.7802505, lng: 12.8117657 },
    { lat: 48.7864838, lng: 12.8284893 },
    { lat: 48.7955551, lng: 12.8416948 },
];

const goodRouteEnd: Position[] = [
    { lat: 48.7955551, lng: 12.8416948 },
    { lat: 48.801033, lng: 12.8583927 },
    { lat: 48.8017998, lng: 12.8773537 },
    { lat: 48.7978935, lng: 12.8954306 },
    { lat: 48.7991867, lng: 12.9137754 },
    { lat: 48.8086166, lng: 12.9266558 },
];

const getRandomModifier = () => {
    const operator = Math.random() < 0.5 ? -1 : 1;
    return Math.random() * Math.floor(1) * operator;
};

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}
                />
            }
            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

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| positions | Array of Objects | — | Array of points {lat, lng} the route is connecting. |
| hasArrows | Boolean | true | Defines whether to show arrows or not. |
| arrowStyle | ArrowStyle | — | Defines the style of the arrows on the route. |
| 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. |
| 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 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)

```tsx
import Map from '@rio-cloud/rio-uikit/Map';
import Route, { ROUTE_COLOR_DANGER, ROUTE_COLOR_WARNING, ARROW_COLOR_WARNING } from '@rio-cloud/rio-uikit/Route';
import SingleMapMarker from '@rio-cloud/rio-uikit/SingleMapMarker';
import MapSettings from '@rio-cloud/rio-uikit/MapSettings';
import MapTypeSettings from '@rio-cloud/rio-uikit/MapTypeSettings';

import { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';
import type { Position } from '@rio-cloud/rio-uikit/mapTypes';

const center = { lat: 48.7497783, lng: 12.8300291 };

const goodRouteStart: Position[] = [
    { lat: 48.6898766, lng: 12.6748714 },
    { lat: 48.69664, lng: 12.676465 },
    { lat: 48.7036781, lng: 12.6883364 },
    { lat: 48.7120438, lng: 12.7029095 },
    { lat: 48.719677, lng: 12.7183695 },
    { lat: 48.7297783, lng: 12.7300291 },
];

const dangerRoute: Position[] = [
    { lat: 48.7297783, lng: 12.7300291 },
    { lat: 48.7417717, lng: 12.736865 },
    { lat: 48.7487717, lng: 12.7527666 },
    { lat: 48.7575531, lng: 12.7673788 },
    { lat: 48.7681808, lng: 12.7792053 },
    { lat: 48.7763824, lng: 12.7935705 },
    { lat: 48.7802505, lng: 12.8117657 },
    { lat: 48.7864838, lng: 12.8284893 },
    { lat: 48.7955551, lng: 12.8416948 },
];

const goodRouteEnd: Position[] = [
    { lat: 48.7955551, lng: 12.8416948 },
    { lat: 48.801033, lng: 12.8583927 },
    { lat: 48.8017998, lng: 12.8773537 },
    { lat: 48.7978935, lng: 12.8954306 },
    { lat: 48.7991867, lng: 12.9137754 },
    { lat: 48.8086166, lng: 12.9266558 },
];

const getRandomModifier = () => {
    const operator = Math.random() < 0.5 ? -1 : 1;
    return Math.random() * Math.floor(1) * operator;
};

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}
                />
            }
            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

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| positions | Array of Objects | — | Array of points {lat, lng} the route is connecting. |
| hasArrows | Boolean | true | Defines whether to show arrows or not. |
| arrowStyle | ArrowStyle | — | Defines the style of the arrows on the route. |
| 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. |
| 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 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": [
{
"points": [
{
"lat": 48.17933,
"lng": 11.48731
},
{
"lat": 48.17937,
"lng": 11.4875
},
{
"lat": 48.17939,
"lng": 11.48767
},
{
"lat": 48.17941,
"lng": 11.4879
},
{
"lat": 48.17942,
"lng": 11.48826
},
{
"lat": 48.17942,
"lng": 11.48867
},
{
"lat": 48.17941,
"lng": 11.48924
},
{
"lat": 48.1794,
"lng": 11.48959
},
{
"lat": 48.17939,
"lng": 11.48999
},
{
"lat": 48.17936,
"lng": 11.4904
},
{
"lat": 48.17933,
"lng": 11.4906
},
{
"lat": 48.17927,
"lng": 11.49095
},
{
"lat": 48.17915,
"lng": 11.49154
},
{
"lat": 48.17895,
"lng": 11.49235
},
{
"lat": 48.1788,
"lng": 11.49283
},
{
"lat": 48.17869,
"lng": 11.49314
},
{
"lat": 48.17856,
"lng": 11.49346
},
{
"lat": 48.17843,
"lng": 11.49376
},
{
"lat": 48.17828,
"lng": 11.49413
},
{
"lat": 48.17813,
"lng": 11.49445
},
{
"lat": 48.17797,
"lng": 11.49479
},
{
"lat": 48.1778,
"lng": 11.49521
},
{
"lat": 48.17775,
"lng": 11.49538
},
{
"lat": 48.17769,
"lng": 11.49551
},
{
"lat": 48.17757,
"lng": 11.49576
},
{
"lat": 48.17752,
"lng": 11.49586
},
{
"lat": 48.17748,
"lng": 11.49595
},
{
"lat": 48.17744,
"lng": 11.49604
},
{
"lat": 48.17735,
"lng": 11.49622
},
{
"lat": 48.17722,
"lng": 11.49649
},
{
"lat": 48.17701,
"lng": 11.49692
},
{
"lat": 48.177,
"lng": 11.49695
},
{
"lat": 48.17698,
"lng": 11.49699
},
{
"lat": 48.1767,
"lng": 11.49758
},
{
"lat": 48.1758,
"lng": 11.49944
},
{
"lat": 48.17572,
"lng": 11.4996
},
{
"lat": 48.17538,
"lng": 11.50031
},
{
"lat": 48.17523,
"lng": 11.50061
},
{
"lat": 48.17519,
"lng": 11.50069
},
{
"lat": 48.17513,
"lng": 11.50081
},
{
"lat": 48.17495,
"lng": 11.50117
},
{
"lat": 48.17468,
"lng": 11.50171
},
{
"lat": 48.17449,
"lng": 11.50205
},
{
"lat": 48.17431,
"lng": 11.50234
},
{
"lat": 48.17418,
"lng": 11.50254
},
{
"lat": 48.17405,
"lng": 11.5027
},
{
"lat": 48.17346,
"lng": 11.5035
},
{
"lat": 48.173,
"lng": 11.50416
},
{
"lat": 48.17276,
"lng": 11.50448
},
{
"lat": 48.17253,
"lng": 11.50482
},
{
"lat": 48.17237,
"lng": 11.50509
},
{
"lat": 48.17223,
"lng": 11.50536
},
{
"lat": 48.1721,
"lng": 11.50564
},
{
"lat": 48.17188,
"lng": 11.50614
},
{
"lat": 48.17169,
"lng": 11.50658
},
{
"lat": 48.17128,
"lng": 11.50753
},
{
"lat": 48.17117,
"lng": 11.50777
},
{
"lat": 48.17095,
"lng": 11.50828
},
{
"lat": 48.1709,
"lng": 11.50838
},
{
"lat": 48.17076,
"lng": 11.50871
},
{
"lat": 48.17057,
"lng": 11.50922
},
{
"lat": 48.17051,
"lng": 11.50938
},
{
"lat": 48.17042,
"lng": 11.50953
},
{
"lat": 48.17032,
"lng": 11.50976
},
{
"lat": 48.17022,
"lng": 11.50999
},
{
"lat": 48.17014,
"lng": 11.51017
},
{
"lat": 48.17007,
"lng": 11.51029
},
{
"lat": 48.16999,
"lng": 11.51044
},
{
"lat": 48.16993,
"lng": 11.51055
},
{
"lat": 48.16985,
"lng": 11.51069
},
{
"lat": 48.1698,
"lng": 11.51078
},
{
"lat": 48.16976,
"lng": 11.51086
},
{
"lat": 48.16984,
"lng": 11.5109
},
{
"lat": 48.16991,
"lng": 11.51093
},
{
"lat": 48.17003,
"lng": 11.51097
},
{
"lat": 48.17015,
"lng": 11.51099
},
{
"lat": 48.1703,
"lng": 11.511
},
{
"lat": 48.17048,
"lng": 11.51104
},
{
"lat": 48.17068,
"lng": 11.5111
},
{
"lat": 48.17093,
"lng": 11.51118
},
{
"lat": 48.17112,
"lng": 11.51124
},
{
"lat": 48.17131,
"lng": 11.51131
},
{
"lat": 48.1715,
"lng": 11.51139
},
{
"lat": 48.17165,
"lng": 11.51147
},
{
"lat": 48.17179,
"lng": 11.51156
},
{
"lat": 48.17192,
"lng": 11.51166
},
{
"lat": 48.17205,
"lng": 11.51178
},
{
"lat": 48.17219,
"lng": 11.51192
},
{
"lat": 48.17232,
"lng": 11.51206
},
{
"lat": 48.17242,
"lng": 11.51219
},
{
"lat": 48.17251,
"lng": 11.51234
},
{
"lat": 48.17261,
"lng": 11.5125
},
{
"lat": 48.1727,
"lng": 11.51268
},
{
"lat": 48.17279,
"lng": 11.51287
},
{
"lat": 48.17294,
"lng": 11.51328
},
{
"lat": 48.17304,
"lng": 11.51362
},
{
"lat": 48.17307,
"lng": 11.51373
},
{
"lat": 48.17315,
"lng": 11.51402
},
{
"lat": 48.17333,
"lng": 11.51476
},
{
"lat": 48.17341,
"lng": 11.51511
},
{
"lat": 48.17365,
"lng": 11.51612
},
{
"lat": 48.17394,
"lng": 11.51727
},
{
"lat": 48.1741,
"lng": 11.51791
},
{
"lat": 48.17416,
"lng": 11.51819
},
{
"lat": 48.17433,
"lng": 11.51893
},
{
"lat": 48.17438,
"lng": 11.51911
},
{
"lat": 48.17453,
"lng": 11.51968
},
{
"lat": 48.17465,
"lng": 11.52003
},
{
"lat": 48.17469,
"lng": 11.52013
},
{
"lat": 48.17477,
"lng": 11.52031
},
{
"lat": 48.17488,
"lng": 11.52056
},
{
"lat": 48.17501,
"lng": 11.52084
},
{
"lat": 48.17509,
"lng": 11.52099
},
{
"lat": 48.1754,
"lng": 11.52154
},
{
"lat": 48.17541,
"lng": 11.52171
},
{
"lat": 48.17542,
"lng": 11.52198
},
{
"lat": 48.17541,
"lng": 11.52245
},
{
"lat": 48.17517,
"lng": 11.52292
},
{
"lat": 48.17478,
"lng": 11.52371
},
{
"lat": 48.17462,
"lng": 11.52403
},
{
"lat": 48.17455,
"lng": 11.52416
},
{
"lat": 48.17451,
"lng": 11.52425
},
{
"lat": 48.17442,
"lng": 11.52442
},
{
"lat": 48.17421,
"lng": 11.52483
},
{
"lat": 48.17412,
"lng": 11.52499
},
{
"lat": 48.17388,
"lng": 11.52544
},
{
"lat": 48.17376,
"lng": 11.52567
},
{
"lat": 48.17353,
"lng": 11.52614
},
{
"lat": 48.17317,
"lng": 11.52684
},
{
"lat": 48.17299,
"lng": 11.52719
},
{
"lat": 48.17267,
"lng": 11.52782
},
{
"lat": 48.17262,
"lng": 11.52792
},
{
"lat": 48.17246,
"lng": 11.52824
},
{
"lat": 48.17225,
"lng": 11.52861
},
{
"lat": 48.17219,
"lng": 11.52872
},
{
"lat": 48.17214,
"lng": 11.52882
},
{
"lat": 48.17189,
"lng": 11.52926
},
{
"lat": 48.17187,
"lng": 11.5293
},
{
"lat": 48.1715,
"lng": 11.52995
},
{
"lat": 48.17132,
"lng": 11.53026
},
{
"lat": 48.17127,
"lng": 11.53034
},
{
"lat": 48.17103,
"lng": 11.53075
},
{
"lat": 48.17073,
"lng": 11.53125
},
{
"lat": 48.17028,
"lng": 11.53194
},
{
"lat": 48.17017,
"lng": 11.53211
},
{
"lat": 48.16982,
"lng": 11.53266
},
{
"lat": 48.16976,
"lng": 11.53277
},
{
"lat": 48.16939,
"lng": 11.53331
},
{
"lat": 48.16885,
"lng": 11.53418
},
{
"lat": 48.16872,
"lng": 11.53437
},
{
"lat": 48.16822,
"lng": 11.5351
},
{
"lat": 48.16809,
"lng": 11.5353
},
{
"lat": 48.16791,
"lng": 11.53554
},
{
"lat": 48.16785,
"lng": 11.53562
},
{
"lat": 48.16774,
"lng": 11.53577
},
{
"lat": 48.16761,
"lng": 11.53593
},
{
"lat": 48.16745,
"lng": 11.53612
},
{
"lat": 48.16714,
"lng": 11.53644
},
{
"lat": 48.167,
"lng": 11.53659
},
{
"lat": 48.16695,
"lng": 11.53664
},
{
"lat": 48.16688,
"lng": 11.53671
},
{
"lat": 48.16653,
"lng": 11.53704
},
{
"lat": 48.1659,
"lng": 11.53768
},
{
"lat": 48.16578,
"lng": 11.53781
},
{
"lat": 48.16564,
"lng": 11.53796
},
{
"lat": 48.1655,
"lng": 11.53812
},
{
"lat": 48.16513,
"lng": 11.53854
},
{
"lat": 48.16487,
"lng": 11.53887
},
{
"lat": 48.16472,
"lng": 11.53908
},
{
"lat": 48.1644,
"lng": 11.53958
},
{
"lat": 48.16432,
"lng": 11.53971
},
{
"lat": 48.16369,
"lng": 11.54072
},
{
"lat": 48.16354,
"lng": 11.54097
},
{
"lat": 48.16328,
"lng": 11.54138
},
{
"lat": 48.16281,
"lng": 11.54216
},
{
"lat": 48.16231,
"lng": 11.54299
},
{
"lat": 48.16185,
"lng": 11.54381
},
{
"lat": 48.16127,
"lng": 11.54476
},
{
"lat": 48.16115,
"lng": 11.54496
},
{
"lat": 48.16097,
"lng": 11.54525
},
{
"lat": 48.16073,
"lng": 11.54561
},
{
"lat": 48.16056,
"lng": 11.54587
},
{
"lat": 48.16029,
"lng": 11.54625
},
{
"lat": 48.16014,
"lng": 11.54644
},
{
"lat": 48.15994,
"lng": 11.54668
},
{
"lat": 48.15979,
"lng": 11.54683
},
{
"lat": 48.15969,
"lng": 11.54693
},
{
"lat": 48.15958,
"lng": 11.54707
},
{
"lat": 48.15947,
"lng": 11.54721
},
{
"lat": 48.15933,
"lng": 11.54737
},
{
"lat": 48.15902,
"lng": 11.54779
},
{
"lat": 48.15882,
"lng": 11.54804
},
{
"lat": 48.15811,
"lng": 11.54893
},
{
"lat": 48.15794,
"lng": 11.54914
},
{
"lat": 48.15734,
"lng": 11.54987
},
{
"lat": 48.15605,
"lng": 11.55145
},
{
"lat": 48.15531,
"lng": 11.55236
},
{
"lat": 48.15523,
"lng": 11.55246
},
{
"lat": 48.15422,
"lng": 11.55378
},
{
"lat": 48.15389,
"lng": 11.55422
},
{
"lat": 48.15342,
"lng": 11.55479
},
{
"lat": 48.15274,
"lng": 11.55563
},
{
"lat": 48.1521,
"lng": 11.55639
},
{
"lat": 48.15167,
"lng": 11.5569
},
{
"lat": 48.15153,
"lng": 11.55707
},
{
"lat": 48.15131,
"lng": 11.55733
},
{
"lat": 48.15102,
"lng": 11.55766
},
{
"lat": 48.1509,
"lng": 11.55778
},
{
"lat": 48.15085,
"lng": 11.55771
},
{
"lat": 48.15077,
"lng": 11.55763
},
{
"lat": 48.15061,
"lng": 11.55751
},
{
"lat": 48.15043,
"lng": 11.55736
},
{
"lat": 48.15036,
"lng": 11.55733
},
{
"lat": 48.15033,
"lng": 11.55733
},
{
"lat": 48.15029,
"lng": 11.55735
},
{
"lat": 48.15026,
"lng": 11.55737
},
{
"lat": 48.15023,
"lng": 11.55742
},
{
"lat": 48.15021,
"lng": 11.55746
},
{
"lat": 48.15021,
"lng": 11.55753
},
{
"lat": 48.15024,
"lng": 11.55783
},
{
"lat": 48.15027,
"lng": 11.55813
},
{
"lat": 48.15028,
"lng": 11.55824
},
{
"lat": 48.15028,
"lng": 11.55836
},
{
"lat": 48.15027,
"lng": 11.55848
},
{
"lat": 48.15023,
"lng": 11.55868
},
{
"lat": 48.1502,
"lng": 11.55881
},
{
"lat": 48.15017,
"lng": 11.55891
},
{
"lat": 48.14997,
"lng": 11.55967
},
{
"lat": 48.14985,
"lng": 11.5601
},
{
"lat": 48.14919,
"lng": 11.56242
},
{
"lat": 48.14908,
"lng": 11.56282
},
{
"lat": 48.14906,
"lng": 11.56288
},
{
"lat": 48.14873,
"lng": 11.56403
},
{
"lat": 48.14858,
"lng": 11.56455
},
{
"lat": 48.14845,
"lng": 11.56501
},
{
"lat": 48.14833,
"lng": 11.56545
},
{
"lat": 48.14821,
"lng": 11.56587
},
{
"lat": 48.14804,
"lng": 11.5665
},
{
"lat": 48.14793,
"lng": 11.56688
},
{
"lat": 48.14791,
"lng": 11.56696
},
{
"lat": 48.14782,
"lng": 11.56726
},
{
"lat": 48.1476,
"lng": 11.56804
},
{
"lat": 48.14755,
"lng": 11.56823
},
{
"lat": 48.14752,
"lng": 11.56834
},
{
"lat": 48.14725,
"lng": 11.56927
},
{
"lat": 48.14702,
"lng": 11.5701
},
{
"lat": 48.14695,
"lng": 11.57037
},
{
"lat": 48.14689,
"lng": 11.57057
},
{
"lat": 48.14631,
"lng": 11.57269
},
{
"lat": 48.14623,
"lng": 11.57297
},
{
"lat": 48.14607,
"lng": 11.5732
},
{
"lat": 48.14596,
"lng": 11.57336
},
{
"lat": 48.14587,
"lng": 11.57355
},
{
"lat": 48.14585,
"lng": 11.57359
},
{
"lat": 48.14577,
"lng": 11.57378
},
{
"lat": 48.14566,
"lng": 11.57413
},
{
"lat": 48.14562,
"lng": 11.57426
},
{
"lat": 48.14555,
"lng": 11.57433
},
{
"lat": 48.14552,
"lng": 11.57439
},
{
"lat": 48.14549,
"lng": 11.57447
},
{
"lat": 48.14546,
"lng": 11.5746
},
{
"lat": 48.14541,
"lng": 11.57482
},
{
"lat": 48.14538,
"lng": 11.57501
},
{
"lat": 48.14537,
"lng": 11.57518
},
{
"lat": 48.14539,
"lng": 11.57552
},
{
"lat": 48.14544,
"lng": 11.57592
},
{
"lat": 48.14546,
"lng": 11.57626
},
{
"lat": 48.14549,
"lng": 11.57667
},
{
"lat": 48.14551,
"lng": 11.57702
},
{
"lat": 48.14551,
"lng": 11.57722
},
{
"lat": 48.14551,
"lng": 11.57737
},
{
"lat": 48.14551,
"lng": 11.57746
},
{
"lat": 48.1455,
"lng": 11.57762
},
{
"lat": 48.14549,
"lng": 11.57768
},
{
"lat": 48.14547,
"lng": 11.5778
},
{
"lat": 48.14537,
"lng": 11.57825
},
{
"lat": 48.14525,
"lng": 11.57878
},
{
"lat": 48.14486,
"lng": 11.57861
},
{
"lat": 48.14467,
"lng": 11.57852
},
{
"lat": 48.14428,
"lng": 11.57833
},
{
"lat": 48.14411,
"lng": 11.57825
},
{
"lat": 48.14389,
"lng": 11.57814
},
{
"lat": 48.14357,
"lng": 11.57799
},
{
"lat": 48.1433,
"lng": 11.57787
},
{
"lat": 48.14318,
"lng": 11.57782
},
{
"lat": 48.14304,
"lng": 11.57776
},
{
"lat": 48.14263,
"lng": 11.57752
},
{
"lat": 48.14258,
"lng": 11.57772
},
{
"lat": 48.14244,
"lng": 11.57771
},
{
"lat": 48.14237,
"lng": 11.57791
},
{
"lat": 48.14244,
"lng": 11.57771
},
{
"lat": 48.14258,
"lng": 11.57772
},
{
"lat": 48.14251,
"lng": 11.57804
},
{
"lat": 48.14249,
"lng": 11.57811
},
{
"lat": 48.14241,
"lng": 11.57837
},
{
"lat": 48.14234,
"lng": 11.57869
},
{
"lat": 48.14222,
"lng": 11.57923
},
{
"lat": 48.14208,
"lng": 11.57917
},
{
"lat": 48.14193,
"lng": 11.57996
},
{
"lat": 48.14182,
"lng": 11.58051
},
{
"lat": 48.14166,
"lng": 11.58118
},
{
"lat": 48.14151,
"lng": 11.58122
},
{
"lat": 48.14122,
"lng": 11.58107
},
{
"lat": 48.1408,
"lng": 11.58089
},
{
"lat": 48.14029,
"lng": 11.58068
},
{
"lat": 48.1401,
"lng": 11.58061
},
{
"lat": 48.13995,
"lng": 11.58055
},
{
"lat": 48.13937,
"lng": 11.58033
},
{
"lat": 48.1391,
"lng": 11.58025
},
{
"lat": 48.13916,
"lng": 11.57996
},
{
"lat": 48.13878,
"lng": 11.57965
},
{
"lat": 48.13871,
"lng": 11.57983
},
{
"lat": 48.13859,
"lng": 11.58013
}
],
"alternative": false
}
],
"markers": [
{
"id": "100",
"position": {
"lat": 48.17933,
"lng": 11.48731
},
"markerProps": {
"active": false,
"iconNames": [
"start"
],
"markerColor": "bg-map-marker-route",
"clickable": false
}
},
{
"id": "200",
"position": {
"lat": 48.13859,
"lng": 11.58013
},
"markerProps": {
"active": false,
"iconNames": [
"finish"
],
"markerColor": "bg-map-marker-route",
"clickable": false
}
},
{
"id": "59.70357",
"position": {
"lat": 48.16745,
"lng": 11.53612
},
"markerProps": {
"active": true,
"iconNames": [
"route"
],
"markerColor": "bg-map-marker-route",
"name": "10 km / 36 min",
"clickable": false,
"fixed": true
}
}
]
}

Select file...

Create demo route Create demo marker Toggle route events
Enter your route data into the input or select a JSON file to render a route with multiple segments and markers . Please note that this will replace all previously existing markers and route segments.
Segments are separate parts of the route, each containing a list of points , which can be rendered as reduced route (semi-transparent) and with or without arrows (showArrows). A Marker should provide a position and markerProps to define its shape.

#### React (tsx)

```tsx
import { useEffect, useState } from 'react';

import FilePicker from '@rio-cloud/rio-uikit/FilePicker';
import Map from '@rio-cloud/rio-uikit/Map';
import Route, { type RouteStyle } from '@rio-cloud/rio-uikit/Route';
import Marker from '@rio-cloud/rio-uikit/Marker';
import MapSettings from '@rio-cloud/rio-uikit/MapSettings';
import MapTypeSettings from '@rio-cloud/rio-uikit/MapTypeSettings';
import SingleMapMarker, { type SingleMapMarkerProps } from '@rio-cloud/rio-uikit/SingleMapMarker';
import Button from '@rio-cloud/rio-uikit/Button';

import { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';
import { defaultRoute } from './routes';
import type { Position } from '@rio-cloud/rio-uikit/mapTypes';

export type MarkerData = {
    markerType?: 'custommarker';
    enableContextMenu?: boolean;
    contextMenuMarkerName?: string;
    lat?: number;
    lng?: number;
};

export type RoutePoint = Position & {
    pointIndex: number;
};

export type RouteSegment = {
    points: RoutePoint[];
    data?: object;
    showArrows?: boolean;
    reduced?: boolean;
    style?: RouteStyle;
    alternative?: boolean;
};

export type SandboxMarker = {
    id: string;
    data?: MarkerData;
    type?: 'addressType' | 'customerPoiType' | 'workshopPoiType';
    markerProps: SingleMapMarkerProps;
    position: Position;
};

const defaultPosition: Position = { lat: 48.7497783, lng: 13.1000291 };

const getRandomValueToForceRerender = () => Math.random();

const getBoundingBox = (positions: Position[]) => {
    const lats = positions.map(position => position.lat);
    const lngs = positions.map(position => position.lng);
    const bbox = {
        top: Math.max(...lats),
        left: Math.min(...lngs),
        right: Math.max(...lngs),
        bottom: Math.min(...lats),
    };
    return bbox;
};

const Markers = ({ markers }: { markers: SandboxMarker[] }) => {
    const mapMarkers = markers.map(marker => {
        const customData = { id: marker.id, data: marker.data };
        return (
            <Marker
                key={marker.id}
                customData={customData}
                position={marker.position}
                icon={<SingleMapMarker {...marker.markerProps} />}
            />
        );
    });
    return mapMarkers;
};

const Segments = ({ segments }: { segments: RouteSegment[] }) => {
    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;
};

const RouteSandboxExample = () => {
    const [text, setText] = useState(defaultRoute);
    const [markers, setMarkers] = useState<SandboxMarker[]>([]);
    const [segments, setSegments] = useState([]);
    const [hasError, setHasError] = useState(false);
    const [showRouteEvents, setShowRouteEvents] = useState(false);

    useEffect(() => {
        try {
            const data = JSON.parse(text);

            let routePoints = [];

            if (showRouteEvents) {
                // add segments as route marker points to simulate historic events on the route
                routePoints = data.segments[0].points.map((item: RoutePoint, index: number) => ({
                    id: `${item.lat}-${item.lng}+${index}`,
                    position: { ...item },
                    markerProps: {
                        key: `${item.lat}-${item.lng}+${index}`,
                        visibleOnHover: true,
                        markerColor: 'bg-map-marker-route',
                        size: 'lg',
                        name: (
                            <div className='display-flex align-item-start gap-5 padding-3 margin-x--3'>
                                <span
                                    className={`text-size-16 rioglyph ${
                                        index % 2 ? 'rioglyph-status-driving' : 'rioglyph-stopover'
                                    }`}
                                />
                                <div className='line-height-16'>
                                    <div className='text-medium'>{index % 2 ? 'Angefahren' : 'Angehalten'}</div>
                                    <div className='text-size-12'>14.07.2023, 08:26</div>
                                </div>
                            </div>
                        ),
                        clickable: false,
                    },
                }));
            }

            setMarkers([...data.markers, ...routePoints]);
            setSegments(data.segments);
            setHasError(false);
        } catch {
            setHasError(true);
        }
    }, [text, showRouteEvents]);

    const handlePick = async (files: File[]) => {
        if (files) {
            const newText = await files[0].text();
            setText(newText);
        }
    };

    const handleTextChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
        const newText = event.target.value;
        setText(newText);
    };

    const handleCreateRoute = () => setText(defaultRoute);
    const handleCreateMarker = () => setText(JSON.stringify(defaultMarker, null, 4));

    const handleShowRouteEvents = () => setShowRouteEvents(!showRouteEvents);

    let center: Position | undefined = defaultPosition;
    let boundingBox;

    if (segments?.length > 0) {
        center = undefined;
        boundingBox = getBoundingBox((segments as RouteSegment[]).flatMap(segment => segment.points));
    } else if (markers?.length > 0) {
        center = markers[0].position;
    }

    return (
        <>
            <Map
                credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}
                center={center}
                boundingBox={boundingBox}
                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'
                            />,
                        ]}
                    />
                }
            >
                {segments && <Segments segments={segments} />}
                {markers && <Markers markers={markers} />}
            </Map>
            <div className='padding-top-10'>
                <div className={`form-group margin-0 ${hasError ? 'has-feedback has-error' : ''}`}>
                    <textarea
                        className='form-control width-100pct'
                        rows={10}
                        value={text}
                        onChange={handleTextChange}
                    />
                    {hasError && <div className='help-block'>Invalid JSON</div>}
                </div>
            </div>
            <div className='display-flex flex-col gap-15 align-items-center padding-top-10'>
                <div>
                    <FilePicker
                        displayMode={FilePicker.DISPLAY_MODE_BUTTON}
                        label='Select file...'
                        onPick={handlePick}
                        multiple={false}
                        accept={{
                            'application/json': ['.json'],
                        }}
                    />
                </div>
                <Button onClick={handleCreateRoute}>Create demo route</Button>
                <Button onClick={handleCreateMarker}>Create demo marker</Button>
                <Button onClick={handleShowRouteEvents}>Toggle route events</Button>
            </div>
            <div className='margin-top-20'>
                <p>
                    Enter your route data into the input or select a JSON file to render a route with multiple{' '}
                    <code>segments</code> and <code>markers</code>. Please note that this will replace all previously
                    existing markers and route segments.
                </p>{' '}
                <p>
                    Segments are separate parts of the route, each containing a list of <code>points</code>, which can
                    be rendered as reduced route (semi-transparent) and with or without arrows (showArrows). A Marker
                    should provide a<code>position</code> and <code>markerProps</code> to define its shape.
                </p>
            </div>
        </>
    );
};

export default RouteSandboxExample;

const defaultMarker = {
    markers: [
        {
            id: '066aa89e-ffc0-4326-bc95-ea45d5601ce4',
            markerProps: {
                active: false,
                iconNames: ['start'],
                markerColor: 'bg-map-marker-route',
            },
            position: {
                lat: 48.178,
                lng: 11.487,
            },
        },
    ],
};
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| positions | Array of Objects | — | Array of points {lat, lng} the route is connecting. |
| hasArrows | Boolean | true | Defines whether to show arrows or not. |
| arrowStyle | ArrowStyle | — | Defines the style of the arrows on the route. |
| 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. |
| 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 and returned by route interaction events. |