@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

package/dist/docs/components/mapRoute.md

@@ -0,0 +1,3816 @@
+# Route
+
+*Category:* Components
+*Section:* Map
+*Source:* https://uikit.developers.rio.cloud/#components/mapRoute
+*Captured:* 2025-12-12T12:39:31.759Z
+
+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.
+
+### Example: Example 1
+
+Terms of use© 1987–2025 HERE
+
+10 km
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
+
+#### Summary
+
+Terms of use© 1987–2025 HERE
+
+10 km
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+
+// biome-ignore lint/suspicious/noShadowRestrictedNames: <explanation>
+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 { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';
+import type { MapEvent, Position } from '@rio-cloud/rio-uikit/mapTypes';
+
+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 getRandomValueToForceRerender = () => Math.random();
+
+const Routes = () => {
+    const [activeRouteId, setActiveRouteId] = useState(1);
+    const isActive = (id: number) => activeRouteId === id;
+    const isFirstRouteActive = isActive(1);
+    const isSecondRouteActive = isActive(2);
+
+    const markerEventListenerMap = {
+        [EventUtils.TAP]: (event: MapEvent) => {
+            event.stopPropagation();
+            setActiveRouteId(event.currentTarget.getData().id);
+        },
+    };
+
+    const routeEventListenerMap = {
+        [EventUtils.TAP]: (event: MapEvent) => {
+            event.stopPropagation();
+            setActiveRouteId(event.currentTarget.getData().id);
+            Notification.info('Route clicked');
+        },
+        [EventUtils.POINTER_MOVE]: (event: MapEvent) => {
+            event.stopPropagation();
+            console.log(event);
+        },
+    };
+
+    return (
+        <>
+            <Route
+                key={getRandomValueToForceRerender()}
+                positions={positions}
+                startIcon={<SingleMapMarker iconNames={['start']} markerColor='bg-map-marker-route' />}
+                endIcon={<SingleMapMarker iconNames={['finish']} markerColor='bg-map-marker-route' />}
+                isRouteAlternative={!isFirstRouteActive}
+                eventListenerMap={routeEventListenerMap}
+                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='2'
+                        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={getRandomValueToForceRerender()}
+                positions={route2Positions}
+                hasArrows={false}
+                isRouteAlternative={!isSecondRouteActive}
+                eventListenerMap={routeEventListenerMap}
+                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}
+                isReduced
+            />
+        </>
+    );
+};
+
+const RouteExample = () => {
+    const position = { lat: 48.7497783, lng: 13.1000291 };
+
+    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>
+    );
+};
+
+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. |
+| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |
+| 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. |
+
+## Route with changing geometry
+
+### Example: Example 2
+
+Terms of use© 1987–2025 HERE
+
+10 km
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
+
+Change routeToggle route
+
+#### Summary
+
+Terms of use© 1987–2025 HERE
+
+10 km
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
+
+Change routeToggle route
+
+#### React (tsx)
+
+```tsx
+import React, { useState } from 'react';
+
+// biome-ignore lint/suspicious/noShadowRestrictedNames: <explanation>
+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 => {
+            return { 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. |
+| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |
+| 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. |
+
+## Route with changing styles
+
+### Example: Example 3
+
+Terms of use© 1987–2025 HERE
+
+10 km
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
+
+Toggle reduced styleToggle arrows
+
+#### Summary
+
+Terms of use© 1987–2025 HERE
+
+10 km
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
+
+Toggle reduced styleToggle arrows
+
+#### React (tsx)
+
+```tsx
+import React, { useState } from 'react';
+
+// biome-ignore lint/suspicious/noShadowRestrictedNames: <explanation>
+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. |
+| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |
+| 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. |
+
+## Route with different colors
+
+### Example: Example 4
+
+Terms of use© 1987–2025 HERE
+
+10 km
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
+
+#### Summary
+
+Terms of use© 1987–2025 HERE
+
+10 km
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
+
+#### React (tsx)
+
+```tsx
+// biome-ignore lint/suspicious/noShadowRestrictedNames: <explanation>
+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 () => {
+    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'
+                        />,
+                    ]}
+                />
+            }
+        >
+            <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. |
+| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |
+| 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. |
+
+## Route indicating a range for electric vehicles
+
+### Example: Example 5
+
+Terms of use© 1987–2025 HERE
+
+10 km
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
+
+#### Summary
+
+Terms of use© 1987–2025 HERE
+
+10 km
+
+Choose view
+Map view
+Satellite
+
+Traffic conditions
+Show traffic incidents
+
+#### React (tsx)
+
+```tsx
+// biome-ignore lint/suspicious/noShadowRestrictedNames: <explanation>
+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 () => {
+    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'
+                        />,
+                    ]}
+                />
+            }
+        >
+            <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. |
+| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |
+| 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. |
+
+## Route sandbox
+
+### Example: Example 6
+
+Terms of use© 1987–2025 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 routeCreate demo markerToggle 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 aposition and markerProps to define its shape.
+
+#### Summary
+
+Terms of use© 1987–2025 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 routeCreate demo markerToggle 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 aposition and markerProps to define its shape.
+
+#### React (tsx)
+
+```tsx
+import { useEffect, useState } from 'react';
+
+import FilePicker from '@rio-cloud/rio-uikit/FilePicker';
+
+// biome-ignore lint/suspicious/noShadowRestrictedNames: <explanation>
+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 => {
+        return (
+            <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 (error) {
+            setHasError(true);
+        }
+    }, [text, showRouteEvents]);
+
+    const handlePick = async (acceptedFiles: FileList | null) => {
+        if (acceptedFiles) {
+            const newText = await acceptedFiles[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. |
+| eventListenerMap | EventListenerMap | — | Map of event listeners for the route. |
+| 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. |