npm - @rio-cloud/uikit-mcp - Versions diffs - 1.0.0 - Mend

@rio-cloud/uikit-mcp 1.0.0

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

Files changed (198) hide show

package/data/pages/Components/components/maproute.json ADDED Viewed

@@ -0,0 +1,623 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:31.025Z",
+    "source": "https://uikit.developers.rio.cloud/#components/mapRoute",
+    "category": "Components",
+    "section": "Map",
+    "slug": "components/maproute",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "4c5faa7d1e349c3cae2ae4fddd801005ba0f01811d7938568d445728a01f1ecf"
+  },
+  "title": "Route",
+  "lead": "There are currently 3 different route styles built-in into the map component.",
+  "content": [
+    {
+      "heading": "Route",
+      "body": "The \"reduced\" style is meant for historic routes and shall indicate that the driver went that route but is ahead of a certain timestamp.\n\nThe \"alternativeRoute\" style is meant for route planning cases and shall show alternate routes.",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"Map position-relative map-type-default \" style=\"height: 300px;\"><div style=\"position: relative; width: 100%; height: 100%; overflow: hidden; -webkit-tap-highlight-color: transparent;\"><div style=\"z-index: 0; width: 100%; height: 100%; direction: ltr; position: absolute; touch-action: none;\"><canvas width=\"908\" height=\"300\" data-engine=\"three.js r152\" style=\"position: absolute; left: 0px; top: 0px; width: 908px; height: 300px;\"></canvas><canvas width=\"908\" height=\"300\" style=\"position: absolute; left: 0px; top: 0px; width: 908px; height: 300px; display: none;\"></canvas><div style=\"position: absolute; height: 100%; width: 100%; z-index: 1;\"><div style=\"position: absolute; pointer-events: none; width: 908px; height: 300px; z-index: 1;\"></div></div></div><div class=\"H_imprint\" style=\"position: absolute; bottom: 0px; right: 0px; left: 0px; z-index: 1; direction: ltr; pointer-events: none; user-select: none; font: 11px &quot;Lucida Grande&quot;, Arial, Helvetica, sans-serif;\"><div class=\"H_logo\" style=\"margin: 0px 0px 16px 16px; display: inline-block;\"><svg height=\"40\" viewBox=\"0 0 47 40\" width=\"47\" xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" fill-rule=\"evenodd\"><path d=\"m45.2054149 8.82876345.6003191.40637037-.2240425.6914074-.4490426 1.38570368c-.1024468.3148889-.6998936 1.9596297-2.43 3.5918519l-.017234.0163704c-.188617.1887407-.3801064.3659259-.5467021.5084444l-.4605319.4285185-.486383.4516296-.1407447-.0702963c-.7257447.4583704-1.4926596.7886667-2.2796809.9831852l.5840426.5864445-.6769149.6817778-2.052766 2.0636296-.169468.1704444-.019149.0192593-2.3821276 2.3958518c-.4902128.8493334-1.1202128 1.6331852-1.8497873 2.3111112-.6031915.6047407-1.2504255 1.1054814-1.935 1.4954814l-.4777659.4805186-4.3247873 4.3506666-.0296808.0298519-.0315958.0269629-2.1532978 1.8171111-.2661702.2253334h-.3485107-3.8948936l-3.968617 3.9914815-1.3547873 1.3616296-.6769148.6808148-.6769149-.6808148-1.3538298-1.3616296-4.80925535-4.837926-3.2687234-3.2875555-1.63436171-1.6437778h2.3112766 4.62255319 2.67223407l-4.71063832-4.7368148-.6769149-.6808148.6769149-.6808148 4.93851062-4.9650371.6769149-.6798518.6769149.6808148 2.7296809 2.7454074c.9363829-.8820741 2.1485106-1.4685185 3.4037234-1.6562963.278617-1.4694815 1.0187234-2.834963 2.168617-3.9885926.5696808-.572 1.1843617-1.0438519 1.8335106-1.4107407l.2901064-.2917778 4.3094681-4.31985187c.5830851-1.0582963 1.4256383-1.78918519 2.0364893-2.12718519l.4471277-.24748148c.3829787-.7617037.9047872-1.47622222 1.5539362-2.12622222 1.510851-1.51666667 3.3165957-2.31881482 5.22-2.31881482.0871276 0 .1752127.00192593.2594681.00577778 1.9484042.06933334 3.8441489.97933334 5.4775532 2.62792593.1512765.15022222.3303191.34859259.5361702.5797037l.0526595.05874074c.1120213.12518519.2345745.26192593.370532.40733334l1.2657446 1.36066666.6328724.67985185-.6548936.65866667-.2508511.25325926zm-27.9288192 22.17414815h-9.57446804l4.78723404 4.8148148zm23.1864894-21.70422223c-.9220213 1.38666663-2.5180851 3.63037033-4.1984042 1.94133333l4.2510638-4.27651851c-.3810638-.41022222-.6711702-.754-.8923404-.97740741-2.2921277-2.31207407-4.8743617-2.34192593-6.8984043-.312-1.3528723 1.35681481-1.7071277 2.91007407-1.313617 4.38533332l-1.332766-1.52629628c-.385851.21474074-2.0182979 1.65918518-.7937234 3.84703708l-1.5252127-1.274963-2.0240426 2.0299259 2.7344681 2.7502222c-2.1121277-1.6861481-4.3889362-1.5205185-6.2157447.312-1.9560638 1.9615556-1.8181915 4.3381482-.3532979 6.293926l-.295851-.2946667c-1.9321277-1.9432593-4.0318085-1.2576296-5.0706383-.2128148-.8023405.8079259-1.2944681 1.9191852-1.0924468 2.6905185l-4.195532-4.2187407-2.22893613 2.2408148 8.25893613 8.3065185h4.4339362l-2.9767021-2.9938519c-.5893908-.6029568-.9604155-1.0987731-1.1531529-1.5232627-.3182349-.7008886-.1504161-1.2073234.3230465-1.680515.7334043-.7318519 1.583617-.2763704 3.0829787 1.2277777l2.9412766 2.9562963 2.2164894-2.2292592-2.7909575-2.8060741c2.0125532 1.5291852 4.4224468 1.612 6.5728724-.545037 1.3567021-1.2653334 1.7425532-2.4565185 1.7425532-2.4565185l-1.6755319-1.1314815c-.9229788 1.3866666-2.5152128 3.6361481-4.195532 1.9461481l4.2606383-4.2851852 2.655 2.6712593 2.3160639-2.3294074-3.3223405-3.3424445c-1.5520212-1.5609629-.6328723-3.0275555.0124469-3.5793333.3025531.6442222.7448936 1.2624445 1.3078723 1.8296296 2.1485106 2.1676297 4.9260638 2.6038519 7.3685106.1550371 1.3567022-1.2643704 1.7425532-2.4565185 1.7425532-2.4565185zm-3.6564894-1.35537321-2.0211702 2.03377777c-.9890425-1.18251851-.9392553-1.81422222-.3245744-2.43051851.7439361-.7462963 1.4993617-.43044445 2.3457446.39674074zm-12.4879787 12.56088884c-.9890425-1.1825185-.9411702-1.819037-.3284042-2.4353333.7448936-.7462963 1.5003191-.4304444 2.3467021.3967408z\" fill=\"#0f1621\" fill-opacity=\".7\" style=\"fill: rgb(255, 255, 255); fill-opacity: 0.6;\"></path><path d=\"m17.2765957 31.0029116-4.787234 4.8148148-4.78723404-4.8148148zm23.1864894-21.70422223 1.6755319 1.13148153s-.385851 1.1921481-1.7425532 2.4565185c-2.4424468 2.4488148-5.22 2.0125926-7.3685106-.1550371-.5629787-.5671851-1.0053192-1.1854074-1.3078723-1.8296296-.6453192.5517778-1.5644681 2.0183704-.0124469 3.5793333l3.3223405 3.3424445-2.3160639 2.3294074-2.655-2.6712593-4.2606383 4.2851852c1.6803192 1.69 3.2725532-.5594815 4.195532-1.9461481l1.6755319 1.1314815s-.3858511 1.1911851-1.7425532 2.4565185c-2.1504256 2.157037-4.5603192 2.0742222-6.5728724.545037l2.7909575 2.8060741-2.2164894 2.2292592-2.9412766-2.9562963c-1.4993617-1.5041481-2.3495744-1.9596296-3.0829787-1.2277777-.4734626.4731916-.6412814.9796264-.3230465 1.680515.1927374.4244896.5637621.9203059 1.1531529 1.5232627l2.9767021 2.9938519h-4.4339362l-8.25893613-8.3065185 2.22893613-2.2408148 4.195532 4.2187407c-.2020213-.7713333.2901063-1.8825926 1.0924468-2.6905185 1.0388298-1.0448148 3.1385106-1.7304445 5.0706383.2128148l.295851.2946667c-1.4648936-1.9557778-1.6027659-4.3323704.3532979-6.293926 1.8268085-1.8325185 4.103617-1.9981481 6.2157447-.312l-2.7344681-2.7502222 2.0240426-2.0299259 1.5252127 1.274963c-1.2245745-2.1878519.4078724-3.63229634.7937234-3.84703708l1.332766 1.52629628c-.3935107-1.47525925-.0392553-3.02851851 1.313617-4.38533332 2.0240426-2.02992593 4.6062766-2.00007407 6.8984043.312.2211702.22340741.5112766.56718519.8923404.97740741l-4.2510638 4.27651851c1.6803191 1.689037 3.2763829-.5546667 4.1984042-1.94133333zm-16.1444681 11.20551563 2.0182979-2.0385925c-.846383-.8271852-1.6018085-1.1430371-2.3467021-.3967408-.612766.6162963-.6606383 1.2528148.3284042 2.4353333zm12.4879787-12.56088884c-.8463829-.82718519-1.6018085-1.14303704-2.3457446-.39674074-.6146809.61629629-.6644681 1.248.3245744 2.43051851z\" fill=\"#fff\" fill-opacity=\".3\" style=\"fill: rgb(15, 22, 33); fill-opacity: 0.3;\"></path></g></svg></div><div class=\"H_copyright\" style=\"right: 0px; bottom: 0px; position: absolute; background-color: rgba(255, 255, 255, 0.8); color: rgb(15, 22, 33); padding: 2px 16px;\"><a target=\"_blank\" tabindex=\"1\" href=\"https://legal.here.com/us-en/terms/here-end-user-terms\" style=\"color: inherit; margin: 0px 8px; text-decoration: none; pointer-events: all;\">Terms of use</a><span style=\"margin: 0px 8px;\">© 1987–2025 HERE</span><span style=\"margin: 0px;\"></span></div></div><div class=\"H_ui\" dir=\"ltr\"><div class=\"H_l_top H_l_left\"><div class=\"H_l_anchor H_l_horizontal\"></div><div class=\"H_l_anchor H_l_vertical\"></div></div><div class=\"H_l_top H_l_right\"><div class=\"H_l_anchor H_l_horizontal\"></div><div class=\"H_l_anchor H_l_vertical\"></div></div><div class=\"H_l_bottom H_l_left\"><div class=\"H_l_anchor H_l_vertical\"></div><div class=\"H_l_anchor H_l_horizontal\"><div class=\"H_ctl H_el H_scalebar\" title=\"Change to miles\" aria-label=\"Change to miles\" tabindex=\"0\" style=\"direction: ltr; display: none;\"><svg height=\"12\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"99\"><polyline style=\"fill:none; stroke:white; stroke-width:4\" points=\"2 2 2 10 97 10 97 2\"></polyline><polyline style=\"fill:none; stroke:black; stroke-width:2\" points=\"2 2 2 10 97 10 97 2\"></polyline></svg><div style=\"padding: 0 0 0 10px\">10 km</div></div></div></div><div class=\"H_l_bottom H_l_right\"><div class=\"H_l_anchor H_l_vertical\"></div><div class=\"H_l_anchor H_l_horizontal\"><div class=\"H_ctl H_el\" tabindex=\"-1\" style=\"display: none;\"><div class=\"H_btn H_el\" title=\"Choose view\" aria-label=\"Choose view\" tabindex=\"0\"><svg xmlns=\"http://www.w3.org/2000/svg\" class=\"H_icon\" viewBox=\"0 0 24 24\"><path fill-rule=\"evenodd\" d=\"M6.7,14.6 L4.5,16 L12,20.6 L19.5,16 L17.3,14.6 L19.1,13.5 L23,16 L12,23 L1,16 L4.9,13.5 L6.7,14.6 Z M12,2 L23,9 L12,16 L1,9 L12,2 Z\"></path></svg></div><div class=\"H_overlay H_el\" tabindex=\"-1\"><div class=\"H_rdo H_el\" tabindex=\"-1\"><div class=\"H_rdo_title H_el\" tabindex=\"-1\">Choose view</div><div class=\"H_rdo_buttons H_el\" tabindex=\"-1\"><div class=\"H_btn H_el H_active\" tabindex=\"-1\">Map view</div><div class=\"H_btn H_el\" tabindex=\"-1\">Satellite</div></div></div><div class=\"H_separator H_el\" tabindex=\"-1\"></div><div class=\"H_grp H_el\" tabindex=\"-1\"><div class=\"H_btn H_el\" tabindex=\"-1\">Traffic conditions</div><div class=\"H_btn H_el\" tabindex=\"-1\">Show traffic incidents</div></div></div></div></div></div><div class=\"H_l_anchor H_l_top H_l_center H_l_horizontal\" style=\"margin-left: 0px;\"></div><div class=\"H_l_anchor H_l_left H_l_middle H_l_vertical\" style=\"margin-top: 0px;\"></div><div class=\"H_l_anchor H_l_right H_l_middle H_l_vertical\" style=\"margin-top: 0px;\"></div><div class=\"H_l_anchor H_l_bottom H_l_center H_l_horizontal\" style=\"margin-left: 0px;\"></div></div></div><div class=\"ZoomButtons\"><div class=\"MapSettingsTile\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" class=\"display-block hover-scale-110\"><path fill=\"#A7AFBB\" d=\"M9.5 1v5.5H15v3H9.5V15h-3V9.5H1v-3h5.5V1z\"></path></svg></div><div class=\"MapSettingsTileSpacer\"></div><div class=\"MapSettingsTile\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" class=\"display-block hover-scale-110\"><path fill=\"#A7AFBB\" d=\"M7.177 9.5H1v-3h14v3H8.823z\"></path></svg></div></div><div class=\"MapSettingsWrapper\"><div class=\"MapSettingsTile MapTypeSettings\"><div class=\"MapSettingsTile-inner position-relative\"><div class=\"MapSettingsButton\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" class=\"MapSettingsTileIcon hover-scale-110 display-block\"><g fill=\"none\" fill-rule=\"evenodd\"><path fill=\"#939BA8\" d=\"m20 12.451 19.98 11.322L20 35.095.02 23.773l11.052-6.262a4.85 4.85 0 0 0 1.13.484l-2.775 1.572c0-.002 3.353 1.922 3.353 1.922l3.353-1.924-2.446-1.384c.16-.005.32-.019.478-.04l2.222 1.274 3.354-1.924-2.296-1.3c.07-.097.138-.197.202-.3l2.235 1.28.147.085.052.03 3.352-1.924-3.353-1.9-1.854 1.052c.095-.38.142-.762.144-1.139l1.63-.924Zm-.093 17.57-3.353 1.9 3.353 1.922 3.354-1.924-3.354-1.899Zm3.746-2.05-3.353 1.9 3.354 1.922 3.353-1.924-3.354-1.899Zm-7.383-.026-3.353 1.9 3.353 1.923 3.353-1.924-3.353-1.899Zm-3.636-2.04-3.353 1.9c0-.002 3.353 1.923 3.353 1.923l3.353-1.925-3.353-1.898Zm7.383-.01-3.353 1.901c0-.002 3.353 1.922 3.353 1.922l3.353-1.924-3.353-1.9Zm7.287-.015-3.353 1.9 3.353 1.923 3.353-1.924-3.353-1.899ZM9 23.868l-3.354 1.9L9 27.691l3.353-1.924L9 23.868Zm7.381-.013-3.353 1.9 3.353 1.923 3.353-1.924-3.353-1.899Zm14.53-.049-3.353 1.9c0-.002 3.353 1.923 3.353 1.923l3.353-1.925-3.353-1.898Zm-7.244 0-3.353 1.9 3.353 1.922 3.353-1.924-3.353-1.899Zm-10.92-1.988-3.354 1.9 3.354 1.923 3.353-1.924-3.353-1.899Zm-7.364-.013L2.03 23.707c0-.002 3.353 1.922 3.353 1.922l3.354-1.924-3.354-1.9Zm14.648-.04-3.353 1.9c0-.002 3.353 1.923 3.353 1.923l3.353-1.924-3.353-1.9Zm7.243-.034-3.353 1.9 3.353 1.923 3.353-1.924-3.353-1.899Zm7.33-.055-3.353 1.901c0-.002 3.353 1.922 3.353 1.922l3.353-1.924-3.353-1.899ZM9.13 19.756l-3.353 1.901c0-.002 3.353 1.922 3.353 1.922l3.354-1.924-3.354-1.9Zm7.266-.028-3.353 1.9 3.353 1.923 3.353-1.924-3.353-1.899Zm7.242-.038-3.353 1.901c0-.002 3.353 1.923 3.353 1.923l3.353-1.924-3.353-1.9Zm7.329-.089-3.353 1.901c0-.002 3.353 1.922 3.353 1.922l3.353-1.923-3.353-1.9Zm-10.964-1.948-3.353 1.9 3.353 1.924 3.354-1.925-3.354-1.899Zm7.328-.093-3.353 1.902c0-.002 3.353 1.922 3.353 1.922l3.353-1.924-3.353-1.9Zm-3.635-2.036-3.353 1.901c0-.002 3.353 1.922 3.353 1.922l3.354-1.924-3.354-1.899Z\"></path><path fill=\"#C9CDD3\" d=\"M8.403 15.762c.15.282.05.632-.227.792l-1.392.74a.584.584 0 0 1-.45.044.593.593 0 0 1-.105-1.09l1.39-.74a.592.592 0 0 1 .784.254ZM14.7 9.09a4.15 4.15 0 1 1-2.427 7.939 4.15 4.15 0 0 1 2.427-7.94Zm-6.333 1.784a.593.593 0 1 1-.347 1.134l-2.269-.693a.602.602 0 0 1-.393-.74c.1-.31.428-.485.74-.394l2.269.693ZM20.99 9.07a.593.593 0 0 1-.245.801l-1.392.74a.587.587 0 0 1-.452.044.564.564 0 0 1-.35-.289.586.586 0 0 1 .245-.801l1.392-.74a.593.593 0 0 1 .802.245ZM9.95 5.497c.153.05.279.16.35.304l.74 1.392a.588.588 0 0 1-.246.802.564.564 0 0 1-.451.044.587.587 0 0 1-.35-.29l-.74-1.392a.595.595 0 0 1 .235-.82.595.595 0 0 1 .462-.04Zm6.023-.566c.313.096.489.428.393.74l-.693 2.269a.593.593 0 1 1-1.134-.347l.693-2.268a.593.593 0 0 1 .74-.394ZM29.571 9.467a.791.791 0 0 0-.4.1.88.88 0 0 0 .067-.35c0-.55-.4-1-.89-1-.2 0-.355.075-.51.175-.222-.975-1-1.675-1.934-1.675-1.11 0-2 1-2 2.25 0 .1 0 .2.022.275-.088-.025-.155-.025-.244-.025-.622 0-1.111.55-1.111 1.25s.489 1.25 1.111 1.25h5.889c.555 0 1-.5 1-1.125s-.445-1.125-1-1.125ZM30.446 14.917c.117 0 .233.02.35.08a.652.652 0 0 1-.058-.28c0-.44.35-.8.777-.8a.85.85 0 0 1 .448.14c.194-.78.875-1.34 1.691-1.34.973 0 1.75.8 1.75 1.8 0 .08 0 .16-.019.22.078-.02.136-.02.214-.02.544 0 .972.44.972 1s-.428 1-.972 1h-5.153a.884.884 0 0 1-.875-.9c0-.462.331-.838.765-.893l.11-.007Z\"></path></g></svg></div><div class=\"dropdown\"></div></div></div></div><div class=\"MapElements\"></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState } from 'react';\n\n// biome-ignore lint/suspicious/noShadowRestrictedNames: <explanation>\nimport Map from '@rio-cloud/rio-uikit/Map';\nimport EventUtils from '@rio-cloud/rio-uikit/EventUtils';\nimport Route from '@rio-cloud/rio-uikit/Route';\nimport Marker from '@rio-cloud/rio-uikit/Marker';\nimport SingleMapMarker from '@rio-cloud/rio-uikit/SingleMapMarker';\nimport MapSettings from '@rio-cloud/rio-uikit/MapSettings';\nimport MapTypeSettings from '@rio-cloud/rio-uikit/MapTypeSettings';\nimport Notification from '@rio-cloud/rio-uikit/Notification';\n\nimport { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';\nimport type { MapEvent, Position } from '@rio-cloud/rio-uikit/mapTypes';\n\nconst offset = 0.3;\n\nconst getMiddlePos = (allPositions: Position[]) => allPositions[Math.floor(allPositions.length / 2)];\n\nconst positions: Position[] = [\n    { lat: 48.6898766, lng: 12.6748714 },\n    { lat: 48.69664, lng: 12.676465 },\n    { lat: 48.7036781, lng: 12.6883364 },\n    { lat: 48.7120438, lng: 12.7029095 },\n    { lat: 48.719677, lng: 12.7183695 },\n    { lat: 48.7297783, lng: 12.7300291 },\n    { lat: 48.7417717, lng: 12.736865 },\n    { lat: 48.7487717, lng: 12.7527666 },\n    { lat: 48.7575531, lng: 12.7673788 },\n    { lat: 48.7681808, lng: 12.7792053 },\n    { lat: 48.7763824, lng: 12.7935705 },\n    { lat: 48.7802505, lng: 12.8117657 },\n    { lat: 48.7864838, lng: 12.8284893 },\n    { lat: 48.7955551, lng: 12.8416948 },\n    { lat: 48.801033, lng: 12.8583927 },\n    { lat: 48.8017998, lng: 12.8773537 },\n    { lat: 48.7978935, lng: 12.8954306 },\n    { lat: 48.7991867, lng: 12.9137754 },\n    { lat: 48.8086166, lng: 12.9266558 },\n];\nconst route2Positions = positions.map(pos => ({ lat: pos.lat, lng: pos.lng + offset }));\nconst route3Positions = positions.map(pos => ({ lat: pos.lat, lng: pos.lng + offset * 2 }));\n\nconst getRandomValueToForceRerender = () => Math.random();\n\nconst Routes = () => {\n    const [activeRouteId, setActiveRouteId] = useState(1);\n    const isActive = (id: number) => activeRouteId === id;\n    const isFirstRouteActive = isActive(1);\n    const isSecondRouteActive = isActive(2);\n\n    const markerEventListenerMap = {\n        [EventUtils.TAP]: (event: MapEvent) => {\n            event.stopPropagation();\n            setActiveRouteId(event.currentTarget.getData().id);\n        },\n    };\n\n    const routeEventListenerMap = {\n        [EventUtils.TAP]: (event: MapEvent) => {\n            event.stopPropagation();\n            setActiveRouteId(event.currentTarget.getData().id);\n            Notification.info('Route clicked');\n        },\n        [EventUtils.POINTER_MOVE]: (event: MapEvent) => {\n            event.stopPropagation();\n            console.log(event);\n        },\n    };\n\n    return (\n        <>\n            <Route\n                key={getRandomValueToForceRerender()}\n                positions={positions}\n                startIcon={<SingleMapMarker iconNames={['start']} markerColor='bg-map-marker-route' />}\n                endIcon={<SingleMapMarker iconNames={['finish']} markerColor='bg-map-marker-route' />}\n                isRouteAlternative={!isFirstRouteActive}\n                eventListenerMap={routeEventListenerMap}\n                customData={{ id: 1 }}\n                hasArrows={false}\n                markers={[\n                    <Marker\n                        key='1'\n                        customData={{ id: 1 }}\n                        position={getMiddlePos(positions)}\n                        eventListenerMap={markerEventListenerMap}\n                        icon={\n                            <SingleMapMarker\n                                iconNames={['route']}\n                                name='236km / 2h 37min'\n                                markerColor='bg-map-marker-route'\n                                active={isFirstRouteActive}\n                                fixed\n                            />\n                        }\n                    />,\n                    <Marker\n                        key='2'\n                        position={positions[3]}\n                        icon={\n                            <SingleMapMarker\n                                markerColor='bg-map-marker-route'\n                                name={<div className='padding-x-15'>Lorem ipsum dolor sit amet</div>}\n                                markerOnHover\n                            />\n                        }\n                    />,\n                    <Marker\n                        key='2'\n                        position={positions[5]}\n                        icon={\n                            <SingleMapMarker\n                                markerColor='bg-map-marker-route'\n                                name={<div className='padding-x-15'>Lorem ipsum dolor sit amet</div>}\n                                markerOnHover\n                            />\n                        }\n                    />,\n                ]}\n            />\n            <Route\n                key={getRandomValueToForceRerender()}\n                positions={route2Positions}\n                hasArrows={false}\n                isRouteAlternative={!isSecondRouteActive}\n                eventListenerMap={routeEventListenerMap}\n                customData={{ id: 2 }}\n                markers={[\n                    <Marker\n                        key='2'\n                        customData={{ id: 2 }}\n                        position={getMiddlePos(route2Positions)}\n                        eventListenerMap={markerEventListenerMap}\n                        icon={\n                            <SingleMapMarker\n                                iconNames={['route']}\n                                name='166km / 1h 47min'\n                                markerColor='bg-map-marker-route'\n                                active={isSecondRouteActive}\n                                fixed\n                            />\n                        }\n                    />,\n                ]}\n            />\n            <Route\n                positions={route3Positions}\n                startIcon={<SingleMapMarker iconNames={['start']} markerColor='bg-map-marker-route' />}\n                endIcon={<SingleMapMarker iconNames={['finish']} markerColor='bg-map-marker-route' />}\n                eventListenerMap={routeEventListenerMap}\n                hasArrows={false}\n                isReduced\n            />\n        </>\n    );\n};\n\nconst RouteExample = () => {\n    const position = { lat: 48.7497783, lng: 13.1000291 };\n\n    return (\n        <Map\n            credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}\n            center={position}\n            zoom={10}\n            height={300}\n            mapSettings={\n                <MapSettings\n                    options={[\n                        <MapTypeSettings\n                            key='mapTypeSettings'\n                            tooltip='Change map type'\n                            dropdownHeaderText='Map views'\n                            defaultTypeLabel='Default view'\n                            truckTypeLabel='Truck view'\n                            terrainTypeLabel='Terrain view'\n                            satelliteTypeLabel='Satellite view'\n                            nightTypeLabel='Night view'\n                        />,\n                    ]}\n                />\n            }\n        >\n            <Routes />\n        </Map>\n    );\n};\n\nexport default RouteExample;"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "positions",
+                      "type": "Array of Objects",
+                      "default": "",
+                      "description": "Array of points {lat, lng} the route is connecting."
+                    },
+                    {
+                      "name": "hasArrows",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Defines whether to show arrows or not."
+                    },
+                    {
+                      "name": "arrowStyle",
+                      "type": "ArrowStyle",
+                      "default": "",
+                      "description": "Defines the style of the arrows on the route."
+                    },
+                    {
+                      "name": "isReduced",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether to render the route as reduced (transparent)."
+                    },
+                    {
+                      "name": "isRouteAlternative",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether to render the route with alternative route style."
+                    },
+                    {
+                      "name": "style",
+                      "type": "RouteStyle",
+                      "default": "",
+                      "description": "Custom style for the route."
+                    },
+                    {
+                      "name": "eventListenerMap",
+                      "type": "EventListenerMap",
+                      "default": "",
+                      "description": "Map of event listeners for the route."
+                    },
+                    {
+                      "name": "startIcon",
+                      "type": "JSX.Element",
+                      "default": "",
+                      "description": "Icon to be displayed at the start of the route."
+                    },
+                    {
+                      "name": "middleIcon",
+                      "type": "JSX.Element",
+                      "default": "",
+                      "description": "Icon to be displayed at the middle of the route."
+                    },
+                    {
+                      "name": "endIcon",
+                      "type": "JSX.Element",
+                      "default": "",
+                      "description": "Icon to be displayed at the end of the route."
+                    },
+                    {
+                      "name": "markers",
+                      "type": "JSX.Element[]",
+                      "default": "",
+                      "description": "Array of markers to be displayed on the route."
+                    },
+                    {
+                      "name": "customData",
+                      "type": "object",
+                      "default": "",
+                      "description": "Custom data to be passed to the route."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "Route with changing geometry",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 2",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"Map position-relative map-type-default \" style=\"height: 300px;\"><div style=\"position: relative; width: 100%; height: 100%; overflow: hidden; -webkit-tap-highlight-color: transparent;\"><div style=\"z-index: 0; width: 100%; height: 100%; direction: ltr; position: absolute; touch-action: none;\"><canvas width=\"908\" height=\"300\" data-engine=\"three.js r152\" style=\"position: absolute; left: 0px; top: 0px; width: 908px; height: 300px;\"></canvas><canvas width=\"908\" height=\"300\" style=\"position: absolute; left: 0px; top: 0px; width: 908px; height: 300px; display: none;\"></canvas><div style=\"position: absolute; height: 100%; width: 100%; z-index: 1;\"><div style=\"position: absolute; pointer-events: none; width: 908px; height: 300px; z-index: 1;\"></div></div></div><div class=\"H_imprint\" style=\"position: absolute; bottom: 0px; right: 0px; left: 0px; z-index: 1; direction: ltr; pointer-events: none; user-select: none; font: 11px &quot;Lucida Grande&quot;, Arial, Helvetica, sans-serif;\"><div class=\"H_logo\" style=\"margin: 0px 0px 16px 16px; display: inline-block;\"><svg height=\"40\" viewBox=\"0 0 47 40\" width=\"47\" xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" fill-rule=\"evenodd\"><path d=\"m45.2054149 8.82876345.6003191.40637037-.2240425.6914074-.4490426 1.38570368c-.1024468.3148889-.6998936 1.9596297-2.43 3.5918519l-.017234.0163704c-.188617.1887407-.3801064.3659259-.5467021.5084444l-.4605319.4285185-.486383.4516296-.1407447-.0702963c-.7257447.4583704-1.4926596.7886667-2.2796809.9831852l.5840426.5864445-.6769149.6817778-2.052766 2.0636296-.169468.1704444-.019149.0192593-2.3821276 2.3958518c-.4902128.8493334-1.1202128 1.6331852-1.8497873 2.3111112-.6031915.6047407-1.2504255 1.1054814-1.935 1.4954814l-.4777659.4805186-4.3247873 4.3506666-.0296808.0298519-.0315958.0269629-2.1532978 1.8171111-.2661702.2253334h-.3485107-3.8948936l-3.968617 3.9914815-1.3547873 1.3616296-.6769148.6808148-.6769149-.6808148-1.3538298-1.3616296-4.80925535-4.837926-3.2687234-3.2875555-1.63436171-1.6437778h2.3112766 4.62255319 2.67223407l-4.71063832-4.7368148-.6769149-.6808148.6769149-.6808148 4.93851062-4.9650371.6769149-.6798518.6769149.6808148 2.7296809 2.7454074c.9363829-.8820741 2.1485106-1.4685185 3.4037234-1.6562963.278617-1.4694815 1.0187234-2.834963 2.168617-3.9885926.5696808-.572 1.1843617-1.0438519 1.8335106-1.4107407l.2901064-.2917778 4.3094681-4.31985187c.5830851-1.0582963 1.4256383-1.78918519 2.0364893-2.12718519l.4471277-.24748148c.3829787-.7617037.9047872-1.47622222 1.5539362-2.12622222 1.510851-1.51666667 3.3165957-2.31881482 5.22-2.31881482.0871276 0 .1752127.00192593.2594681.00577778 1.9484042.06933334 3.8441489.97933334 5.4775532 2.62792593.1512765.15022222.3303191.34859259.5361702.5797037l.0526595.05874074c.1120213.12518519.2345745.26192593.370532.40733334l1.2657446 1.36066666.6328724.67985185-.6548936.65866667-.2508511.25325926zm-27.9288192 22.17414815h-9.57446804l4.78723404 4.8148148zm23.1864894-21.70422223c-.9220213 1.38666663-2.5180851 3.63037033-4.1984042 1.94133333l4.2510638-4.27651851c-.3810638-.41022222-.6711702-.754-.8923404-.97740741-2.2921277-2.31207407-4.8743617-2.34192593-6.8984043-.312-1.3528723 1.35681481-1.7071277 2.91007407-1.313617 4.38533332l-1.332766-1.52629628c-.385851.21474074-2.0182979 1.65918518-.7937234 3.84703708l-1.5252127-1.274963-2.0240426 2.0299259 2.7344681 2.7502222c-2.1121277-1.6861481-4.3889362-1.5205185-6.2157447.312-1.9560638 1.9615556-1.8181915 4.3381482-.3532979 6.293926l-.295851-.2946667c-1.9321277-1.9432593-4.0318085-1.2576296-5.0706383-.2128148-.8023405.8079259-1.2944681 1.9191852-1.0924468 2.6905185l-4.195532-4.2187407-2.22893613 2.2408148 8.25893613 8.3065185h4.4339362l-2.9767021-2.9938519c-.5893908-.6029568-.9604155-1.0987731-1.1531529-1.5232627-.3182349-.7008886-.1504161-1.2073234.3230465-1.680515.7334043-.7318519 1.583617-.2763704 3.0829787 1.2277777l2.9412766 2.9562963 2.2164894-2.2292592-2.7909575-2.8060741c2.0125532 1.5291852 4.4224468 1.612 6.5728724-.545037 1.3567021-1.2653334 1.7425532-2.4565185 1.7425532-2.4565185l-1.6755319-1.1314815c-.9229788 1.3866666-2.5152128 3.6361481-4.195532 1.9461481l4.2606383-4.2851852 2.655 2.6712593 2.3160639-2.3294074-3.3223405-3.3424445c-1.5520212-1.5609629-.6328723-3.0275555.0124469-3.5793333.3025531.6442222.7448936 1.2624445 1.3078723 1.8296296 2.1485106 2.1676297 4.9260638 2.6038519 7.3685106.1550371 1.3567022-1.2643704 1.7425532-2.4565185 1.7425532-2.4565185zm-3.6564894-1.35537321-2.0211702 2.03377777c-.9890425-1.18251851-.9392553-1.81422222-.3245744-2.43051851.7439361-.7462963 1.4993617-.43044445 2.3457446.39674074zm-12.4879787 12.56088884c-.9890425-1.1825185-.9411702-1.819037-.3284042-2.4353333.7448936-.7462963 1.5003191-.4304444 2.3467021.3967408z\" fill=\"#0f1621\" fill-opacity=\".7\" style=\"fill: rgb(255, 255, 255); fill-opacity: 0.6;\"></path><path d=\"m17.2765957 31.0029116-4.787234 4.8148148-4.78723404-4.8148148zm23.1864894-21.70422223 1.6755319 1.13148153s-.385851 1.1921481-1.7425532 2.4565185c-2.4424468 2.4488148-5.22 2.0125926-7.3685106-.1550371-.5629787-.5671851-1.0053192-1.1854074-1.3078723-1.8296296-.6453192.5517778-1.5644681 2.0183704-.0124469 3.5793333l3.3223405 3.3424445-2.3160639 2.3294074-2.655-2.6712593-4.2606383 4.2851852c1.6803192 1.69 3.2725532-.5594815 4.195532-1.9461481l1.6755319 1.1314815s-.3858511 1.1911851-1.7425532 2.4565185c-2.1504256 2.157037-4.5603192 2.0742222-6.5728724.545037l2.7909575 2.8060741-2.2164894 2.2292592-2.9412766-2.9562963c-1.4993617-1.5041481-2.3495744-1.9596296-3.0829787-1.2277777-.4734626.4731916-.6412814.9796264-.3230465 1.680515.1927374.4244896.5637621.9203059 1.1531529 1.5232627l2.9767021 2.9938519h-4.4339362l-8.25893613-8.3065185 2.22893613-2.2408148 4.195532 4.2187407c-.2020213-.7713333.2901063-1.8825926 1.0924468-2.6905185 1.0388298-1.0448148 3.1385106-1.7304445 5.0706383.2128148l.295851.2946667c-1.4648936-1.9557778-1.6027659-4.3323704.3532979-6.293926 1.8268085-1.8325185 4.103617-1.9981481 6.2157447-.312l-2.7344681-2.7502222 2.0240426-2.0299259 1.5252127 1.274963c-1.2245745-2.1878519.4078724-3.63229634.7937234-3.84703708l1.332766 1.52629628c-.3935107-1.47525925-.0392553-3.02851851 1.313617-4.38533332 2.0240426-2.02992593 4.6062766-2.00007407 6.8984043.312.2211702.22340741.5112766.56718519.8923404.97740741l-4.2510638 4.27651851c1.6803191 1.689037 3.2763829-.5546667 4.1984042-1.94133333zm-16.1444681 11.20551563 2.0182979-2.0385925c-.846383-.8271852-1.6018085-1.1430371-2.3467021-.3967408-.612766.6162963-.6606383 1.2528148.3284042 2.4353333zm12.4879787-12.56088884c-.8463829-.82718519-1.6018085-1.14303704-2.3457446-.39674074-.6146809.61629629-.6644681 1.248.3245744 2.43051851z\" fill=\"#fff\" fill-opacity=\".3\" style=\"fill: rgb(15, 22, 33); fill-opacity: 0.3;\"></path></g></svg></div><div class=\"H_copyright\" style=\"right: 0px; bottom: 0px; position: absolute; background-color: rgba(255, 255, 255, 0.8); color: rgb(15, 22, 33); padding: 2px 16px;\"><a target=\"_blank\" tabindex=\"1\" href=\"https://legal.here.com/us-en/terms/here-end-user-terms\" style=\"color: inherit; margin: 0px 8px; text-decoration: none; pointer-events: all;\">Terms of use</a><span style=\"margin: 0px 8px;\">© 1987–2025 HERE</span><span style=\"margin: 0px;\"></span></div></div><div class=\"H_ui\" dir=\"ltr\"><div class=\"H_l_top H_l_left\"><div class=\"H_l_anchor H_l_horizontal\"></div><div class=\"H_l_anchor H_l_vertical\"></div></div><div class=\"H_l_top H_l_right\"><div class=\"H_l_anchor H_l_horizontal\"></div><div class=\"H_l_anchor H_l_vertical\"></div></div><div class=\"H_l_bottom H_l_left\"><div class=\"H_l_anchor H_l_vertical\"></div><div class=\"H_l_anchor H_l_horizontal\"><div class=\"H_ctl H_el H_scalebar\" title=\"Change to miles\" aria-label=\"Change to miles\" tabindex=\"0\" style=\"direction: ltr; display: none;\"><svg height=\"12\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"99\"><polyline style=\"fill:none; stroke:white; stroke-width:4\" points=\"2 2 2 10 97 10 97 2\"></polyline><polyline style=\"fill:none; stroke:black; stroke-width:2\" points=\"2 2 2 10 97 10 97 2\"></polyline></svg><div style=\"padding: 0 0 0 10px\">10 km</div></div></div></div><div class=\"H_l_bottom H_l_right\"><div class=\"H_l_anchor H_l_vertical\"></div><div class=\"H_l_anchor H_l_horizontal\"><div class=\"H_ctl H_el\" tabindex=\"-1\" style=\"display: none;\"><div class=\"H_btn H_el\" title=\"Choose view\" aria-label=\"Choose view\" tabindex=\"0\"><svg xmlns=\"http://www.w3.org/2000/svg\" class=\"H_icon\" viewBox=\"0 0 24 24\"><path fill-rule=\"evenodd\" d=\"M6.7,14.6 L4.5,16 L12,20.6 L19.5,16 L17.3,14.6 L19.1,13.5 L23,16 L12,23 L1,16 L4.9,13.5 L6.7,14.6 Z M12,2 L23,9 L12,16 L1,9 L12,2 Z\"></path></svg></div><div class=\"H_overlay H_el\" tabindex=\"-1\"><div class=\"H_rdo H_el\" tabindex=\"-1\"><div class=\"H_rdo_title H_el\" tabindex=\"-1\">Choose view</div><div class=\"H_rdo_buttons H_el\" tabindex=\"-1\"><div class=\"H_btn H_el H_active\" tabindex=\"-1\">Map view</div><div class=\"H_btn H_el\" tabindex=\"-1\">Satellite</div></div></div><div class=\"H_separator H_el\" tabindex=\"-1\"></div><div class=\"H_grp H_el\" tabindex=\"-1\"><div class=\"H_btn H_el\" tabindex=\"-1\">Traffic conditions</div><div class=\"H_btn H_el\" tabindex=\"-1\">Show traffic incidents</div></div></div></div></div></div><div class=\"H_l_anchor H_l_top H_l_center H_l_horizontal\" style=\"margin-left: 0px;\"></div><div class=\"H_l_anchor H_l_left H_l_middle H_l_vertical\" style=\"margin-top: 0px;\"></div><div class=\"H_l_anchor H_l_right H_l_middle H_l_vertical\" style=\"margin-top: 0px;\"></div><div class=\"H_l_anchor H_l_bottom H_l_center H_l_horizontal\" style=\"margin-left: 0px;\"></div></div></div><div class=\"ZoomButtons\"><div class=\"MapSettingsTile\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" class=\"display-block hover-scale-110\"><path fill=\"#A7AFBB\" d=\"M9.5 1v5.5H15v3H9.5V15h-3V9.5H1v-3h5.5V1z\"></path></svg></div><div class=\"MapSettingsTileSpacer\"></div><div class=\"MapSettingsTile\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" class=\"display-block hover-scale-110\"><path fill=\"#A7AFBB\" d=\"M7.177 9.5H1v-3h14v3H8.823z\"></path></svg></div></div><div class=\"MapSettingsWrapper\"><div class=\"MapSettingsTile MapTypeSettings\"><div class=\"MapSettingsTile-inner position-relative\"><div class=\"MapSettingsButton\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" class=\"MapSettingsTileIcon hover-scale-110 display-block\"><g fill=\"none\" fill-rule=\"evenodd\"><path fill=\"#939BA8\" d=\"m20 12.451 19.98 11.322L20 35.095.02 23.773l11.052-6.262a4.85 4.85 0 0 0 1.13.484l-2.775 1.572c0-.002 3.353 1.922 3.353 1.922l3.353-1.924-2.446-1.384c.16-.005.32-.019.478-.04l2.222 1.274 3.354-1.924-2.296-1.3c.07-.097.138-.197.202-.3l2.235 1.28.147.085.052.03 3.352-1.924-3.353-1.9-1.854 1.052c.095-.38.142-.762.144-1.139l1.63-.924Zm-.093 17.57-3.353 1.9 3.353 1.922 3.354-1.924-3.354-1.899Zm3.746-2.05-3.353 1.9 3.354 1.922 3.353-1.924-3.354-1.899Zm-7.383-.026-3.353 1.9 3.353 1.923 3.353-1.924-3.353-1.899Zm-3.636-2.04-3.353 1.9c0-.002 3.353 1.923 3.353 1.923l3.353-1.925-3.353-1.898Zm7.383-.01-3.353 1.901c0-.002 3.353 1.922 3.353 1.922l3.353-1.924-3.353-1.9Zm7.287-.015-3.353 1.9 3.353 1.923 3.353-1.924-3.353-1.899ZM9 23.868l-3.354 1.9L9 27.691l3.353-1.924L9 23.868Zm7.381-.013-3.353 1.9 3.353 1.923 3.353-1.924-3.353-1.899Zm14.53-.049-3.353 1.9c0-.002 3.353 1.923 3.353 1.923l3.353-1.925-3.353-1.898Zm-7.244 0-3.353 1.9 3.353 1.922 3.353-1.924-3.353-1.899Zm-10.92-1.988-3.354 1.9 3.354 1.923 3.353-1.924-3.353-1.899Zm-7.364-.013L2.03 23.707c0-.002 3.353 1.922 3.353 1.922l3.354-1.924-3.354-1.9Zm14.648-.04-3.353 1.9c0-.002 3.353 1.923 3.353 1.923l3.353-1.924-3.353-1.9Zm7.243-.034-3.353 1.9 3.353 1.923 3.353-1.924-3.353-1.899Zm7.33-.055-3.353 1.901c0-.002 3.353 1.922 3.353 1.922l3.353-1.924-3.353-1.899ZM9.13 19.756l-3.353 1.901c0-.002 3.353 1.922 3.353 1.922l3.354-1.924-3.354-1.9Zm7.266-.028-3.353 1.9 3.353 1.923 3.353-1.924-3.353-1.899Zm7.242-.038-3.353 1.901c0-.002 3.353 1.923 3.353 1.923l3.353-1.924-3.353-1.9Zm7.329-.089-3.353 1.901c0-.002 3.353 1.922 3.353 1.922l3.353-1.923-3.353-1.9Zm-10.964-1.948-3.353 1.9 3.353 1.924 3.354-1.925-3.354-1.899Zm7.328-.093-3.353 1.902c0-.002 3.353 1.922 3.353 1.922l3.353-1.924-3.353-1.9Zm-3.635-2.036-3.353 1.901c0-.002 3.353 1.922 3.353 1.922l3.354-1.924-3.354-1.899Z\"></path><path fill=\"#C9CDD3\" d=\"M8.403 15.762c.15.282.05.632-.227.792l-1.392.74a.584.584 0 0 1-.45.044.593.593 0 0 1-.105-1.09l1.39-.74a.592.592 0 0 1 .784.254ZM14.7 9.09a4.15 4.15 0 1 1-2.427 7.939 4.15 4.15 0 0 1 2.427-7.94Zm-6.333 1.784a.593.593 0 1 1-.347 1.134l-2.269-.693a.602.602 0 0 1-.393-.74c.1-.31.428-.485.74-.394l2.269.693ZM20.99 9.07a.593.593 0 0 1-.245.801l-1.392.74a.587.587 0 0 1-.452.044.564.564 0 0 1-.35-.289.586.586 0 0 1 .245-.801l1.392-.74a.593.593 0 0 1 .802.245ZM9.95 5.497c.153.05.279.16.35.304l.74 1.392a.588.588 0 0 1-.246.802.564.564 0 0 1-.451.044.587.587 0 0 1-.35-.29l-.74-1.392a.595.595 0 0 1 .235-.82.595.595 0 0 1 .462-.04Zm6.023-.566c.313.096.489.428.393.74l-.693 2.269a.593.593 0 1 1-1.134-.347l.693-2.268a.593.593 0 0 1 .74-.394ZM29.571 9.467a.791.791 0 0 0-.4.1.88.88 0 0 0 .067-.35c0-.55-.4-1-.89-1-.2 0-.355.075-.51.175-.222-.975-1-1.675-1.934-1.675-1.11 0-2 1-2 2.25 0 .1 0 .2.022.275-.088-.025-.155-.025-.244-.025-.622 0-1.111.55-1.111 1.25s.489 1.25 1.111 1.25h5.889c.555 0 1-.5 1-1.125s-.445-1.125-1-1.125ZM30.446 14.917c.117 0 .233.02.35.08a.652.652 0 0 1-.058-.28c0-.44.35-.8.777-.8a.85.85 0 0 1 .448.14c.194-.78.875-1.34 1.691-1.34.973 0 1.75.8 1.75 1.8 0 .08 0 .16-.019.22.078-.02.136-.02.214-.02.544 0 .972.44.972 1s-.428 1-.972 1h-5.153a.884.884 0 0 1-.875-.9c0-.462.331-.838.765-.893l.11-.007Z\"></path></g></svg></div><div class=\"dropdown\"></div></div></div></div><div class=\"MapElements\"></div></div><div class=\"btn-toolbar margin-top-10\"><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Change route</button><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Toggle route</button></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import React, { useState } from 'react';\n\n// biome-ignore lint/suspicious/noShadowRestrictedNames: <explanation>\nimport Map from '@rio-cloud/rio-uikit/Map';\nimport Route from '@rio-cloud/rio-uikit/Route';\nimport SingleMapMarker from '@rio-cloud/rio-uikit/SingleMapMarker';\nimport MapSettings from '@rio-cloud/rio-uikit/MapSettings';\nimport MapTypeSettings from '@rio-cloud/rio-uikit/MapTypeSettings';\nimport Button from '@rio-cloud/rio-uikit/Button';\n\nimport { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';\nimport type { Position } from '@rio-cloud/rio-uikit/mapTypes';\n\nconst position = { lat: 48.7497783, lng: 12.8300291 };\n\nconst positions: Position[] = [\n    { lat: 48.6898766, lng: 12.6748714 },\n    { lat: 48.69664, lng: 12.676465 },\n    { lat: 48.7036781, lng: 12.6883364 },\n    { lat: 48.7120438, lng: 12.7029095 },\n    { lat: 48.719677, lng: 12.7183695 },\n    { lat: 48.7297783, lng: 12.7300291 },\n    { lat: 48.7417717, lng: 12.736865 },\n    { lat: 48.7487717, lng: 12.7527666 },\n    { lat: 48.7575531, lng: 12.7673788 },\n    { lat: 48.7681808, lng: 12.7792053 },\n    { lat: 48.7763824, lng: 12.7935705 },\n    { lat: 48.7802505, lng: 12.8117657 },\n    { lat: 48.7864838, lng: 12.8284893 },\n    { lat: 48.7955551, lng: 12.8416948 },\n    { lat: 48.801033, lng: 12.8583927 },\n    { lat: 48.8017998, lng: 12.8773537 },\n    { lat: 48.7978935, lng: 12.8954306 },\n    { lat: 48.7991867, lng: 12.9137754 },\n    { lat: 48.8086166, lng: 12.9266558 },\n];\n\nconst getRandomModifier = () => {\n    const operator = Math.random() < 0.5 ? -1 : 1;\n    return Math.random() * Math.floor(1) * operator;\n};\n\nconst RouteWithChangingGeometryExample = () => {\n    const [currentRoute, setCurrentRoute] = useState(positions);\n    const [center, setCenter] = useState(position);\n    const [showRoute, setShowRoute] = useState(true);\n\n    const handleClick = () => {\n        const modifier = getRandomModifier();\n        const newRoute = currentRoute.map(pos => {\n            return { lat: pos.lat + modifier, lng: pos.lng + modifier };\n        });\n\n        setCurrentRoute(newRoute);\n        setCenter(newRoute[Math.floor(currentRoute.length / 2)]);\n    };\n\n    const handleToggle = () => setShowRoute(!showRoute);\n\n    return (\n        <React.Fragment>\n            <Map\n                credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}\n                center={center}\n                zoom={10}\n                height={300}\n                mapSettings={\n                    <MapSettings\n                        options={[\n                            <MapTypeSettings\n                                key='mapTypeSettings'\n                                tooltip='Change map type'\n                                dropdownHeaderText='Map views'\n                                defaultTypeLabel='Default view'\n                                truckTypeLabel='Truck view'\n                                terrainTypeLabel='Terrain view'\n                                satelliteTypeLabel='Satellite view'\n                                nightTypeLabel='Night view'\n                            />,\n                        ]}\n                    />\n                }\n            >\n                {showRoute && (\n                    <Route\n                        positions={currentRoute}\n                        startIcon={<SingleMapMarker iconNames={['start']} markerColor='bg-map-marker-route' />}\n                        middleIcon={\n                            <SingleMapMarker\n                                anchorIconName='route'\n                                markerColor='bg-map-marker-route'\n                                clickable={false}\n                                anchorSize='lg'\n                            />\n                        }\n                        endIcon={<SingleMapMarker iconNames={['finish']} markerColor='bg-map-marker-route' />}\n                    />\n                )}\n            </Map>\n            <div className='btn-toolbar margin-top-10'>\n                <Button onClick={handleClick}>Change route</Button>\n                <Button onClick={handleToggle}>Toggle route</Button>\n            </div>\n        </React.Fragment>\n    );\n};\n\nexport default RouteWithChangingGeometryExample;"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "positions",
+                      "type": "Array of Objects",
+                      "default": "",
+                      "description": "Array of points {lat, lng} the route is connecting."
+                    },
+                    {
+                      "name": "hasArrows",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Defines whether to show arrows or not."
+                    },
+                    {
+                      "name": "arrowStyle",
+                      "type": "ArrowStyle",
+                      "default": "",
+                      "description": "Defines the style of the arrows on the route."
+                    },
+                    {
+                      "name": "isReduced",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether to render the route as reduced (transparent)."
+                    },
+                    {
+                      "name": "isRouteAlternative",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether to render the route with alternative route style."
+                    },
+                    {
+                      "name": "style",
+                      "type": "RouteStyle",
+                      "default": "",
+                      "description": "Custom style for the route."
+                    },
+                    {
+                      "name": "eventListenerMap",
+                      "type": "EventListenerMap",
+                      "default": "",
+                      "description": "Map of event listeners for the route."
+                    },
+                    {
+                      "name": "startIcon",
+                      "type": "JSX.Element",
+                      "default": "",
+                      "description": "Icon to be displayed at the start of the route."
+                    },
+                    {
+                      "name": "middleIcon",
+                      "type": "JSX.Element",
+                      "default": "",
+                      "description": "Icon to be displayed at the middle of the route."
+                    },
+                    {
+                      "name": "endIcon",
+                      "type": "JSX.Element",
+                      "default": "",
+                      "description": "Icon to be displayed at the end of the route."
+                    },
+                    {
+                      "name": "markers",
+                      "type": "JSX.Element[]",
+                      "default": "",
+                      "description": "Array of markers to be displayed on the route."
+                    },
+                    {
+                      "name": "customData",
+                      "type": "object",
+                      "default": "",
+                      "description": "Custom data to be passed to the route."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "Route with changing styles",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 3",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"Map position-relative map-type-default \" style=\"height: 300px;\"><div style=\"position: relative; width: 100%; height: 100%; overflow: hidden; -webkit-tap-highlight-color: transparent;\"><div style=\"z-index: 0; width: 100%; height: 100%; direction: ltr; position: absolute; touch-action: none;\"><canvas width=\"908\" height=\"300\" data-engine=\"three.js r152\" style=\"position: absolute; left: 0px; top: 0px; width: 908px; height: 300px;\"></canvas><canvas width=\"908\" height=\"300\" style=\"position: absolute; left: 0px; top: 0px; width: 908px; height: 300px; display: none;\"></canvas><div style=\"position: absolute; height: 100%; width: 100%; z-index: 1;\"><div style=\"position: absolute; pointer-events: none; width: 908px; height: 300px; z-index: 1;\"></div></div></div><div class=\"H_imprint\" style=\"position: absolute; bottom: 0px; right: 0px; left: 0px; z-index: 1; direction: ltr; pointer-events: none; user-select: none; font: 11px &quot;Lucida Grande&quot;, Arial, Helvetica, sans-serif;\"><div class=\"H_logo\" style=\"margin: 0px 0px 16px 16px; display: inline-block;\"><svg height=\"40\" viewBox=\"0 0 47 40\" width=\"47\" xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" fill-rule=\"evenodd\"><path d=\"m45.2054149 8.82876345.6003191.40637037-.2240425.6914074-.4490426 1.38570368c-.1024468.3148889-.6998936 1.9596297-2.43 3.5918519l-.017234.0163704c-.188617.1887407-.3801064.3659259-.5467021.5084444l-.4605319.4285185-.486383.4516296-.1407447-.0702963c-.7257447.4583704-1.4926596.7886667-2.2796809.9831852l.5840426.5864445-.6769149.6817778-2.052766 2.0636296-.169468.1704444-.019149.0192593-2.3821276 2.3958518c-.4902128.8493334-1.1202128 1.6331852-1.8497873 2.3111112-.6031915.6047407-1.2504255 1.1054814-1.935 1.4954814l-.4777659.4805186-4.3247873 4.3506666-.0296808.0298519-.0315958.0269629-2.1532978 1.8171111-.2661702.2253334h-.3485107-3.8948936l-3.968617 3.9914815-1.3547873 1.3616296-.6769148.6808148-.6769149-.6808148-1.3538298-1.3616296-4.80925535-4.837926-3.2687234-3.2875555-1.63436171-1.6437778h2.3112766 4.62255319 2.67223407l-4.71063832-4.7368148-.6769149-.6808148.6769149-.6808148 4.93851062-4.9650371.6769149-.6798518.6769149.6808148 2.7296809 2.7454074c.9363829-.8820741 2.1485106-1.4685185 3.4037234-1.6562963.278617-1.4694815 1.0187234-2.834963 2.168617-3.9885926.5696808-.572 1.1843617-1.0438519 1.8335106-1.4107407l.2901064-.2917778 4.3094681-4.31985187c.5830851-1.0582963 1.4256383-1.78918519 2.0364893-2.12718519l.4471277-.24748148c.3829787-.7617037.9047872-1.47622222 1.5539362-2.12622222 1.510851-1.51666667 3.3165957-2.31881482 5.22-2.31881482.0871276 0 .1752127.00192593.2594681.00577778 1.9484042.06933334 3.8441489.97933334 5.4775532 2.62792593.1512765.15022222.3303191.34859259.5361702.5797037l.0526595.05874074c.1120213.12518519.2345745.26192593.370532.40733334l1.2657446 1.36066666.6328724.67985185-.6548936.65866667-.2508511.25325926zm-27.9288192 22.17414815h-9.57446804l4.78723404 4.8148148zm23.1864894-21.70422223c-.9220213 1.38666663-2.5180851 3.63037033-4.1984042 1.94133333l4.2510638-4.27651851c-.3810638-.41022222-.6711702-.754-.8923404-.97740741-2.2921277-2.31207407-4.8743617-2.34192593-6.8984043-.312-1.3528723 1.35681481-1.7071277 2.91007407-1.313617 4.38533332l-1.332766-1.52629628c-.385851.21474074-2.0182979 1.65918518-.7937234 3.84703708l-1.5252127-1.274963-2.0240426 2.0299259 2.7344681 2.7502222c-2.1121277-1.6861481-4.3889362-1.5205185-6.2157447.312-1.9560638 1.9615556-1.8181915 4.3381482-.3532979 6.293926l-.295851-.2946667c-1.9321277-1.9432593-4.0318085-1.2576296-5.0706383-.2128148-.8023405.8079259-1.2944681 1.9191852-1.0924468 2.6905185l-4.195532-4.2187407-2.22893613 2.2408148 8.25893613 8.3065185h4.4339362l-2.9767021-2.9938519c-.5893908-.6029568-.9604155-1.0987731-1.1531529-1.5232627-.3182349-.7008886-.1504161-1.2073234.3230465-1.680515.7334043-.7318519 1.583617-.2763704 3.0829787 1.2277777l2.9412766 2.9562963 2.2164894-2.2292592-2.7909575-2.8060741c2.0125532 1.5291852 4.4224468 1.612 6.5728724-.545037 1.3567021-1.2653334 1.7425532-2.4565185 1.7425532-2.4565185l-1.6755319-1.1314815c-.9229788 1.3866666-2.5152128 3.6361481-4.195532 1.9461481l4.2606383-4.2851852 2.655 2.6712593 2.3160639-2.3294074-3.3223405-3.3424445c-1.5520212-1.5609629-.6328723-3.0275555.0124469-3.5793333.3025531.6442222.7448936 1.2624445 1.3078723 1.8296296 2.1485106 2.1676297 4.9260638 2.6038519 7.3685106.1550371 1.3567022-1.2643704 1.7425532-2.4565185 1.7425532-2.4565185zm-3.6564894-1.35537321-2.0211702 2.03377777c-.9890425-1.18251851-.9392553-1.81422222-.3245744-2.43051851.7439361-.7462963 1.4993617-.43044445 2.3457446.39674074zm-12.4879787 12.56088884c-.9890425-1.1825185-.9411702-1.819037-.3284042-2.4353333.7448936-.7462963 1.5003191-.4304444 2.3467021.3967408z\" fill=\"#0f1621\" fill-opacity=\".7\" style=\"fill: rgb(255, 255, 255); fill-opacity: 0.6;\"></path><path d=\"m17.2765957 31.0029116-4.787234 4.8148148-4.78723404-4.8148148zm23.1864894-21.70422223 1.6755319 1.13148153s-.385851 1.1921481-1.7425532 2.4565185c-2.4424468 2.4488148-5.22 2.0125926-7.3685106-.1550371-.5629787-.5671851-1.0053192-1.1854074-1.3078723-1.8296296-.6453192.5517778-1.5644681 2.0183704-.0124469 3.5793333l3.3223405 3.3424445-2.3160639 2.3294074-2.655-2.6712593-4.2606383 4.2851852c1.6803192 1.69 3.2725532-.5594815 4.195532-1.9461481l1.6755319 1.1314815s-.3858511 1.1911851-1.7425532 2.4565185c-2.1504256 2.157037-4.5603192 2.0742222-6.5728724.545037l2.7909575 2.8060741-2.2164894 2.2292592-2.9412766-2.9562963c-1.4993617-1.5041481-2.3495744-1.9596296-3.0829787-1.2277777-.4734626.4731916-.6412814.9796264-.3230465 1.680515.1927374.4244896.5637621.9203059 1.1531529 1.5232627l2.9767021 2.9938519h-4.4339362l-8.25893613-8.3065185 2.22893613-2.2408148 4.195532 4.2187407c-.2020213-.7713333.2901063-1.8825926 1.0924468-2.6905185 1.0388298-1.0448148 3.1385106-1.7304445 5.0706383.2128148l.295851.2946667c-1.4648936-1.9557778-1.6027659-4.3323704.3532979-6.293926 1.8268085-1.8325185 4.103617-1.9981481 6.2157447-.312l-2.7344681-2.7502222 2.0240426-2.0299259 1.5252127 1.274963c-1.2245745-2.1878519.4078724-3.63229634.7937234-3.84703708l1.332766 1.52629628c-.3935107-1.47525925-.0392553-3.02851851 1.313617-4.38533332 2.0240426-2.02992593 4.6062766-2.00007407 6.8984043.312.2211702.22340741.5112766.56718519.8923404.97740741l-4.2510638 4.27651851c1.6803191 1.689037 3.2763829-.5546667 4.1984042-1.94133333zm-16.1444681 11.20551563 2.0182979-2.0385925c-.846383-.8271852-1.6018085-1.1430371-2.3467021-.3967408-.612766.6162963-.6606383 1.2528148.3284042 2.4353333zm12.4879787-12.56088884c-.8463829-.82718519-1.6018085-1.14303704-2.3457446-.39674074-.6146809.61629629-.6644681 1.248.3245744 2.43051851z\" fill=\"#fff\" fill-opacity=\".3\" style=\"fill: rgb(15, 22, 33); fill-opacity: 0.3;\"></path></g></svg></div><div class=\"H_copyright\" style=\"right: 0px; bottom: 0px; position: absolute; background-color: rgba(255, 255, 255, 0.8); color: rgb(15, 22, 33); padding: 2px 16px;\"><a target=\"_blank\" tabindex=\"1\" href=\"https://legal.here.com/us-en/terms/here-end-user-terms\" style=\"color: inherit; margin: 0px 8px; text-decoration: none; pointer-events: all;\">Terms of use</a><span style=\"margin: 0px 8px;\">© 1987–2025 HERE</span><span style=\"margin: 0px;\"></span></div></div><div class=\"H_ui\" dir=\"ltr\"><div class=\"H_l_top H_l_left\"><div class=\"H_l_anchor H_l_horizontal\"></div><div class=\"H_l_anchor H_l_vertical\"></div></div><div class=\"H_l_top H_l_right\"><div class=\"H_l_anchor H_l_horizontal\"></div><div class=\"H_l_anchor H_l_vertical\"></div></div><div class=\"H_l_bottom H_l_left\"><div class=\"H_l_anchor H_l_vertical\"></div><div class=\"H_l_anchor H_l_horizontal\"><div class=\"H_ctl H_el H_scalebar\" title=\"Change to miles\" aria-label=\"Change to miles\" tabindex=\"0\" style=\"direction: ltr; display: none;\"><svg height=\"12\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"99\"><polyline style=\"fill:none; stroke:white; stroke-width:4\" points=\"2 2 2 10 97 10 97 2\"></polyline><polyline style=\"fill:none; stroke:black; stroke-width:2\" points=\"2 2 2 10 97 10 97 2\"></polyline></svg><div style=\"padding: 0 0 0 10px\">10 km</div></div></div></div><div class=\"H_l_bottom H_l_right\"><div class=\"H_l_anchor H_l_vertical\"></div><div class=\"H_l_anchor H_l_horizontal\"><div class=\"H_ctl H_el\" tabindex=\"-1\" style=\"display: none;\"><div class=\"H_btn H_el\" title=\"Choose view\" aria-label=\"Choose view\" tabindex=\"0\"><svg xmlns=\"http://www.w3.org/2000/svg\" class=\"H_icon\" viewBox=\"0 0 24 24\"><path fill-rule=\"evenodd\" d=\"M6.7,14.6 L4.5,16 L12,20.6 L19.5,16 L17.3,14.6 L19.1,13.5 L23,16 L12,23 L1,16 L4.9,13.5 L6.7,14.6 Z M12,2 L23,9 L12,16 L1,9 L12,2 Z\"></path></svg></div><div class=\"H_overlay H_el\" tabindex=\"-1\"><div class=\"H_rdo H_el\" tabindex=\"-1\"><div class=\"H_rdo_title H_el\" tabindex=\"-1\">Choose view</div><div class=\"H_rdo_buttons H_el\" tabindex=\"-1\"><div class=\"H_btn H_el H_active\" tabindex=\"-1\">Map view</div><div class=\"H_btn H_el\" tabindex=\"-1\">Satellite</div></div></div><div class=\"H_separator H_el\" tabindex=\"-1\"></div><div class=\"H_grp H_el\" tabindex=\"-1\"><div class=\"H_btn H_el\" tabindex=\"-1\">Traffic conditions</div><div class=\"H_btn H_el\" tabindex=\"-1\">Show traffic incidents</div></div></div></div></div></div><div class=\"H_l_anchor H_l_top H_l_center H_l_horizontal\" style=\"margin-left: 0px;\"></div><div class=\"H_l_anchor H_l_left H_l_middle H_l_vertical\" style=\"margin-top: 0px;\"></div><div class=\"H_l_anchor H_l_right H_l_middle H_l_vertical\" style=\"margin-top: 0px;\"></div><div class=\"H_l_anchor H_l_bottom H_l_center H_l_horizontal\" style=\"margin-left: 0px;\"></div></div></div><div class=\"ZoomButtons\"><div class=\"MapSettingsTile\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" class=\"display-block hover-scale-110\"><path fill=\"#A7AFBB\" d=\"M9.5 1v5.5H15v3H9.5V15h-3V9.5H1v-3h5.5V1z\"></path></svg></div><div class=\"MapSettingsTileSpacer\"></div><div class=\"MapSettingsTile\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" class=\"display-block hover-scale-110\"><path fill=\"#A7AFBB\" d=\"M7.177 9.5H1v-3h14v3H8.823z\"></path></svg></div></div><div class=\"MapSettingsWrapper\"><div class=\"MapSettingsTile MapTypeSettings\"><div class=\"MapSettingsTile-inner position-relative\"><div class=\"MapSettingsButton\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" class=\"MapSettingsTileIcon hover-scale-110 display-block\"><g fill=\"none\" fill-rule=\"evenodd\"><path fill=\"#939BA8\" d=\"m20 12.451 19.98 11.322L20 35.095.02 23.773l11.052-6.262a4.85 4.85 0 0 0 1.13.484l-2.775 1.572c0-.002 3.353 1.922 3.353 1.922l3.353-1.924-2.446-1.384c.16-.005.32-.019.478-.04l2.222 1.274 3.354-1.924-2.296-1.3c.07-.097.138-.197.202-.3l2.235 1.28.147.085.052.03 3.352-1.924-3.353-1.9-1.854 1.052c.095-.38.142-.762.144-1.139l1.63-.924Zm-.093 17.57-3.353 1.9 3.353 1.922 3.354-1.924-3.354-1.899Zm3.746-2.05-3.353 1.9 3.354 1.922 3.353-1.924-3.354-1.899Zm-7.383-.026-3.353 1.9 3.353 1.923 3.353-1.924-3.353-1.899Zm-3.636-2.04-3.353 1.9c0-.002 3.353 1.923 3.353 1.923l3.353-1.925-3.353-1.898Zm7.383-.01-3.353 1.901c0-.002 3.353 1.922 3.353 1.922l3.353-1.924-3.353-1.9Zm7.287-.015-3.353 1.9 3.353 1.923 3.353-1.924-3.353-1.899ZM9 23.868l-3.354 1.9L9 27.691l3.353-1.924L9 23.868Zm7.381-.013-3.353 1.9 3.353 1.923 3.353-1.924-3.353-1.899Zm14.53-.049-3.353 1.9c0-.002 3.353 1.923 3.353 1.923l3.353-1.925-3.353-1.898Zm-7.244 0-3.353 1.9 3.353 1.922 3.353-1.924-3.353-1.899Zm-10.92-1.988-3.354 1.9 3.354 1.923 3.353-1.924-3.353-1.899Zm-7.364-.013L2.03 23.707c0-.002 3.353 1.922 3.353 1.922l3.354-1.924-3.354-1.9Zm14.648-.04-3.353 1.9c0-.002 3.353 1.923 3.353 1.923l3.353-1.924-3.353-1.9Zm7.243-.034-3.353 1.9 3.353 1.923 3.353-1.924-3.353-1.899Zm7.33-.055-3.353 1.901c0-.002 3.353 1.922 3.353 1.922l3.353-1.924-3.353-1.899ZM9.13 19.756l-3.353 1.901c0-.002 3.353 1.922 3.353 1.922l3.354-1.924-3.354-1.9Zm7.266-.028-3.353 1.9 3.353 1.923 3.353-1.924-3.353-1.899Zm7.242-.038-3.353 1.901c0-.002 3.353 1.923 3.353 1.923l3.353-1.924-3.353-1.9Zm7.329-.089-3.353 1.901c0-.002 3.353 1.922 3.353 1.922l3.353-1.923-3.353-1.9Zm-10.964-1.948-3.353 1.9 3.353 1.924 3.354-1.925-3.354-1.899Zm7.328-.093-3.353 1.902c0-.002 3.353 1.922 3.353 1.922l3.353-1.924-3.353-1.9Zm-3.635-2.036-3.353 1.901c0-.002 3.353 1.922 3.353 1.922l3.354-1.924-3.354-1.899Z\"></path><path fill=\"#C9CDD3\" d=\"M8.403 15.762c.15.282.05.632-.227.792l-1.392.74a.584.584 0 0 1-.45.044.593.593 0 0 1-.105-1.09l1.39-.74a.592.592 0 0 1 .784.254ZM14.7 9.09a4.15 4.15 0 1 1-2.427 7.939 4.15 4.15 0 0 1 2.427-7.94Zm-6.333 1.784a.593.593 0 1 1-.347 1.134l-2.269-.693a.602.602 0 0 1-.393-.74c.1-.31.428-.485.74-.394l2.269.693ZM20.99 9.07a.593.593 0 0 1-.245.801l-1.392.74a.587.587 0 0 1-.452.044.564.564 0 0 1-.35-.289.586.586 0 0 1 .245-.801l1.392-.74a.593.593 0 0 1 .802.245ZM9.95 5.497c.153.05.279.16.35.304l.74 1.392a.588.588 0 0 1-.246.802.564.564 0 0 1-.451.044.587.587 0 0 1-.35-.29l-.74-1.392a.595.595 0 0 1 .235-.82.595.595 0 0 1 .462-.04Zm6.023-.566c.313.096.489.428.393.74l-.693 2.269a.593.593 0 1 1-1.134-.347l.693-2.268a.593.593 0 0 1 .74-.394ZM29.571 9.467a.791.791 0 0 0-.4.1.88.88 0 0 0 .067-.35c0-.55-.4-1-.89-1-.2 0-.355.075-.51.175-.222-.975-1-1.675-1.934-1.675-1.11 0-2 1-2 2.25 0 .1 0 .2.022.275-.088-.025-.155-.025-.244-.025-.622 0-1.111.55-1.111 1.25s.489 1.25 1.111 1.25h5.889c.555 0 1-.5 1-1.125s-.445-1.125-1-1.125ZM30.446 14.917c.117 0 .233.02.35.08a.652.652 0 0 1-.058-.28c0-.44.35-.8.777-.8a.85.85 0 0 1 .448.14c.194-.78.875-1.34 1.691-1.34.973 0 1.75.8 1.75 1.8 0 .08 0 .16-.019.22.078-.02.136-.02.214-.02.544 0 .972.44.972 1s-.428 1-.972 1h-5.153a.884.884 0 0 1-.875-.9c0-.462.331-.838.765-.893l.11-.007Z\"></path></g></svg></div><div class=\"dropdown\"></div></div></div></div><div class=\"MapElements\"></div></div><div class=\"btn-toolbar margin-top-10\"><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Toggle reduced style</button><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Toggle arrows</button></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import React, { useState } from 'react';\n\n// biome-ignore lint/suspicious/noShadowRestrictedNames: <explanation>\nimport Map from '@rio-cloud/rio-uikit/Map';\nimport Route from '@rio-cloud/rio-uikit/Route';\nimport SingleMapMarker from '@rio-cloud/rio-uikit/SingleMapMarker';\nimport MapSettings from '@rio-cloud/rio-uikit/MapSettings';\nimport MapTypeSettings from '@rio-cloud/rio-uikit/MapTypeSettings';\nimport Button from '@rio-cloud/rio-uikit/Button';\n\nimport { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';\nimport type { Position } from '@rio-cloud/rio-uikit/mapTypes';\n\nconst position = { lat: 48.7497783, lng: 12.8300291 };\n\nconst positions: Position[] = [\n    { lat: 48.6898766, lng: 12.6748714 },\n    { lat: 48.69664, lng: 12.676465 },\n    { lat: 48.7036781, lng: 12.6883364 },\n    { lat: 48.7120438, lng: 12.7029095 },\n    { lat: 48.719677, lng: 12.7183695 },\n    { lat: 48.7297783, lng: 12.7300291 },\n    { lat: 48.7417717, lng: 12.736865 },\n    { lat: 48.7487717, lng: 12.7527666 },\n    { lat: 48.7575531, lng: 12.7673788 },\n    { lat: 48.7681808, lng: 12.7792053 },\n    { lat: 48.7763824, lng: 12.7935705 },\n    { lat: 48.7802505, lng: 12.8117657 },\n    { lat: 48.7864838, lng: 12.8284893 },\n    { lat: 48.7955551, lng: 12.8416948 },\n    { lat: 48.801033, lng: 12.8583927 },\n    { lat: 48.8017998, lng: 12.8773537 },\n    { lat: 48.7978935, lng: 12.8954306 },\n    { lat: 48.7991867, lng: 12.9137754 },\n    { lat: 48.8086166, lng: 12.9266558 },\n];\n\nconst RouteWithChangingStylesExample = () => {\n    const [reduced, setReduced] = useState(false);\n    const [arrows, setArrows] = useState(false);\n\n    const handleReducedButtonClick = () => setReduced(!reduced);\n    const handleArrowsButtonClick = () => setArrows(!arrows);\n\n    return (\n        <React.Fragment>\n            <Map\n                credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}\n                center={position}\n                zoom={10}\n                height={300}\n                mapSettings={\n                    <MapSettings\n                        options={[\n                            <MapTypeSettings\n                                key='mapTypeSettings'\n                                tooltip='Change map type'\n                                dropdownHeaderText='Map views'\n                                defaultTypeLabel='Default view'\n                                truckTypeLabel='Truck view'\n                                terrainTypeLabel='Terrain view'\n                                satelliteTypeLabel='Satellite view'\n                                nightTypeLabel='Night view'\n                            />,\n                        ]}\n                    />\n                }\n            >\n                <Route\n                    isReduced={reduced}\n                    hasArrows={arrows}\n                    positions={positions}\n                    startIcon={<SingleMapMarker iconNames={['start']} markerColor='bg-map-marker-route' />}\n                    endIcon={<SingleMapMarker iconNames={['finish']} markerColor='bg-map-marker-route' />}\n                />\n            </Map>\n            <div className='btn-toolbar margin-top-10'>\n                <Button onClick={handleReducedButtonClick}>Toggle reduced style</Button>\n                <Button onClick={handleArrowsButtonClick}>Toggle arrows</Button>\n            </div>\n        </React.Fragment>\n    );\n};\n\nexport default RouteWithChangingStylesExample;"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "positions",
+                      "type": "Array of Objects",
+                      "default": "",
+                      "description": "Array of points {lat, lng} the route is connecting."
+                    },
+                    {
+                      "name": "hasArrows",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Defines whether to show arrows or not."
+                    },
+                    {
+                      "name": "arrowStyle",
+                      "type": "ArrowStyle",
+                      "default": "",
+                      "description": "Defines the style of the arrows on the route."
+                    },
+                    {
+                      "name": "isReduced",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether to render the route as reduced (transparent)."
+                    },
+                    {
+                      "name": "isRouteAlternative",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether to render the route with alternative route style."
+                    },
+                    {
+                      "name": "style",
+                      "type": "RouteStyle",
+                      "default": "",
+                      "description": "Custom style for the route."
+                    },
+                    {
+                      "name": "eventListenerMap",
+                      "type": "EventListenerMap",
+                      "default": "",
+                      "description": "Map of event listeners for the route."
+                    },
+                    {
+                      "name": "startIcon",
+                      "type": "JSX.Element",
+                      "default": "",
+                      "description": "Icon to be displayed at the start of the route."
+                    },
+                    {
+                      "name": "middleIcon",
+                      "type": "JSX.Element",
+                      "default": "",
+                      "description": "Icon to be displayed at the middle of the route."
+                    },
+                    {
+                      "name": "endIcon",
+                      "type": "JSX.Element",
+                      "default": "",
+                      "description": "Icon to be displayed at the end of the route."
+                    },
+                    {
+                      "name": "markers",
+                      "type": "JSX.Element[]",
+                      "default": "",
+                      "description": "Array of markers to be displayed on the route."
+                    },
+                    {
+                      "name": "customData",
+                      "type": "object",
+                      "default": "",
+                      "description": "Custom data to be passed to the route."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "Route with different colors",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 4",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"Map position-relative map-type-default \" style=\"height: 300px;\"><div style=\"position: relative; width: 100%; height: 100%; overflow: hidden; -webkit-tap-highlight-color: transparent;\"><div style=\"z-index: 0; width: 100%; height: 100%; direction: ltr; position: absolute; touch-action: none;\"><canvas width=\"908\" height=\"300\" data-engine=\"three.js r152\" style=\"position: absolute; left: 0px; top: 0px; width: 908px; height: 300px;\"></canvas><canvas width=\"908\" height=\"300\" style=\"position: absolute; left: 0px; top: 0px; width: 908px; height: 300px; display: none;\"></canvas><div style=\"position: absolute; height: 100%; width: 100%; z-index: 1;\"><div style=\"position: absolute; pointer-events: none; width: 908px; height: 300px; z-index: 1;\"></div></div></div><div class=\"H_imprint\" style=\"position: absolute; bottom: 0px; right: 0px; left: 0px; z-index: 1; direction: ltr; pointer-events: none; user-select: none; font: 11px &quot;Lucida Grande&quot;, Arial, Helvetica, sans-serif;\"><div class=\"H_logo\" style=\"margin: 0px 0px 16px 16px; display: inline-block;\"><svg height=\"40\" viewBox=\"0 0 47 40\" width=\"47\" xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" fill-rule=\"evenodd\"><path d=\"m45.2054149 8.82876345.6003191.40637037-.2240425.6914074-.4490426 1.38570368c-.1024468.3148889-.6998936 1.9596297-2.43 3.5918519l-.017234.0163704c-.188617.1887407-.3801064.3659259-.5467021.5084444l-.4605319.4285185-.486383.4516296-.1407447-.0702963c-.7257447.4583704-1.4926596.7886667-2.2796809.9831852l.5840426.5864445-.6769149.6817778-2.052766 2.0636296-.169468.1704444-.019149.0192593-2.3821276 2.3958518c-.4902128.8493334-1.1202128 1.6331852-1.8497873 2.3111112-.6031915.6047407-1.2504255 1.1054814-1.935 1.4954814l-.4777659.4805186-4.3247873 4.3506666-.0296808.0298519-.0315958.0269629-2.1532978 1.8171111-.2661702.2253334h-.3485107-3.8948936l-3.968617 3.9914815-1.3547873 1.3616296-.6769148.6808148-.6769149-.6808148-1.3538298-1.3616296-4.80925535-4.837926-3.2687234-3.2875555-1.63436171-1.6437778h2.3112766 4.62255319 2.67223407l-4.71063832-4.7368148-.6769149-.6808148.6769149-.6808148 4.93851062-4.9650371.6769149-.6798518.6769149.6808148 2.7296809 2.7454074c.9363829-.8820741 2.1485106-1.4685185 3.4037234-1.6562963.278617-1.4694815 1.0187234-2.834963 2.168617-3.9885926.5696808-.572 1.1843617-1.0438519 1.8335106-1.4107407l.2901064-.2917778 4.3094681-4.31985187c.5830851-1.0582963 1.4256383-1.78918519 2.0364893-2.12718519l.4471277-.24748148c.3829787-.7617037.9047872-1.47622222 1.5539362-2.12622222 1.510851-1.51666667 3.3165957-2.31881482 5.22-2.31881482.0871276 0 .1752127.00192593.2594681.00577778 1.9484042.06933334 3.8441489.97933334 5.4775532 2.62792593.1512765.15022222.3303191.34859259.5361702.5797037l.0526595.05874074c.1120213.12518519.2345745.26192593.370532.40733334l1.2657446 1.36066666.6328724.67985185-.6548936.65866667-.2508511.25325926zm-27.9288192 22.17414815h-9.57446804l4.78723404 4.8148148zm23.1864894-21.70422223c-.9220213 1.38666663-2.5180851 3.63037033-4.1984042 1.94133333l4.2510638-4.27651851c-.3810638-.41022222-.6711702-.754-.8923404-.97740741-2.2921277-2.31207407-4.8743617-2.34192593-6.8984043-.312-1.3528723 1.35681481-1.7071277 2.91007407-1.313617 4.38533332l-1.332766-1.52629628c-.385851.21474074-2.0182979 1.65918518-.7937234 3.84703708l-1.5252127-1.274963-2.0240426 2.0299259 2.7344681 2.7502222c-2.1121277-1.6861481-4.3889362-1.5205185-6.2157447.312-1.9560638 1.9615556-1.8181915 4.3381482-.3532979 6.293926l-.295851-.2946667c-1.9321277-1.9432593-4.0318085-1.2576296-5.0706383-.2128148-.8023405.8079259-1.2944681 1.9191852-1.0924468 2.6905185l-4.195532-4.2187407-2.22893613 2.2408148 8.25893613 8.3065185h4.4339362l-2.9767021-2.9938519c-.5893908-.6029568-.9604155-1.0987731-1.1531529-1.5232627-.3182349-.7008886-.1504161-1.2073234.3230465-1.680515.7334043-.7318519 1.583617-.2763704 3.0829787 1.2277777l2.9412766 2.9562963 2.2164894-2.2292592-2.7909575-2.8060741c2.0125532 1.5291852 4.4224468 1.612 6.5728724-.545037 1.3567021-1.2653334 1.7425532-2.4565185 1.7425532-2.4565185l-1.6755319-1.1314815c-.9229788 1.3866666-2.5152128 3.6361481-4.195532 1.9461481l4.2606383-4.2851852 2.655 2.6712593 2.3160639-2.3294074-3.3223405-3.3424445c-1.5520212-1.5609629-.6328723-3.0275555.0124469-3.5793333.3025531.6442222.7448936 1.2624445 1.3078723 1.8296296 2.1485106 2.1676297 4.9260638 2.6038519 7.3685106.1550371 1.3567022-1.2643704 1.7425532-2.4565185 1.7425532-2.4565185zm-3.6564894-1.35537321-2.0211702 2.03377777c-.9890425-1.18251851-.9392553-1.81422222-.3245744-2.43051851.7439361-.7462963 1.4993617-.43044445 2.3457446.39674074zm-12.4879787 12.56088884c-.9890425-1.1825185-.9411702-1.819037-.3284042-2.4353333.7448936-.7462963 1.5003191-.4304444 2.3467021.3967408z\" fill=\"#0f1621\" fill-opacity=\".7\" style=\"fill: rgb(255, 255, 255); fill-opacity: 0.6;\"></path><path d=\"m17.2765957 31.0029116-4.787234 4.8148148-4.78723404-4.8148148zm23.1864894-21.70422223 1.6755319 1.13148153s-.385851 1.1921481-1.7425532 2.4565185c-2.4424468 2.4488148-5.22 2.0125926-7.3685106-.1550371-.5629787-.5671851-1.0053192-1.1854074-1.3078723-1.8296296-.6453192.5517778-1.5644681 2.0183704-.0124469 3.5793333l3.3223405 3.3424445-2.3160639 2.3294074-2.655-2.6712593-4.2606383 4.2851852c1.6803192 1.69 3.2725532-.5594815 4.195532-1.9461481l1.6755319 1.1314815s-.3858511 1.1911851-1.7425532 2.4565185c-2.1504256 2.157037-4.5603192 2.0742222-6.5728724.545037l2.7909575 2.8060741-2.2164894 2.2292592-2.9412766-2.9562963c-1.4993617-1.5041481-2.3495744-1.9596296-3.0829787-1.2277777-.4734626.4731916-.6412814.9796264-.3230465 1.680515.1927374.4244896.5637621.9203059 1.1531529 1.5232627l2.9767021 2.9938519h-4.4339362l-8.25893613-8.3065185 2.22893613-2.2408148 4.195532 4.2187407c-.2020213-.7713333.2901063-1.8825926 1.0924468-2.6905185 1.0388298-1.0448148 3.1385106-1.7304445 5.0706383.2128148l.295851.2946667c-1.4648936-1.9557778-1.6027659-4.3323704.3532979-6.293926 1.8268085-1.8325185 4.103617-1.9981481 6.2157447-.312l-2.7344681-2.7502222 2.0240426-2.0299259 1.5252127 1.274963c-1.2245745-2.1878519.4078724-3.63229634.7937234-3.84703708l1.332766 1.52629628c-.3935107-1.47525925-.0392553-3.02851851 1.313617-4.38533332 2.0240426-2.02992593 4.6062766-2.00007407 6.8984043.312.2211702.22340741.5112766.56718519.8923404.97740741l-4.2510638 4.27651851c1.6803191 1.689037 3.2763829-.5546667 4.1984042-1.94133333zm-16.1444681 11.20551563 2.0182979-2.0385925c-.846383-.8271852-1.6018085-1.1430371-2.3467021-.3967408-.612766.6162963-.6606383 1.2528148.3284042 2.4353333zm12.4879787-12.56088884c-.8463829-.82718519-1.6018085-1.14303704-2.3457446-.39674074-.6146809.61629629-.6644681 1.248.3245744 2.43051851z\" fill=\"#fff\" fill-opacity=\".3\" style=\"fill: rgb(15, 22, 33); fill-opacity: 0.3;\"></path></g></svg></div><div class=\"H_copyright\" style=\"right: 0px; bottom: 0px; position: absolute; background-color: rgba(255, 255, 255, 0.8); color: rgb(15, 22, 33); padding: 2px 16px;\"><a target=\"_blank\" tabindex=\"1\" href=\"https://legal.here.com/us-en/terms/here-end-user-terms\" style=\"color: inherit; margin: 0px 8px; text-decoration: none; pointer-events: all;\">Terms of use</a><span style=\"margin: 0px 8px;\">© 1987–2025 HERE</span><span style=\"margin: 0px;\"></span></div></div><div class=\"H_ui\" dir=\"ltr\"><div class=\"H_l_top H_l_left\"><div class=\"H_l_anchor H_l_horizontal\"></div><div class=\"H_l_anchor H_l_vertical\"></div></div><div class=\"H_l_top H_l_right\"><div class=\"H_l_anchor H_l_horizontal\"></div><div class=\"H_l_anchor H_l_vertical\"></div></div><div class=\"H_l_bottom H_l_left\"><div class=\"H_l_anchor H_l_vertical\"></div><div class=\"H_l_anchor H_l_horizontal\"><div class=\"H_ctl H_el H_scalebar\" title=\"Change to miles\" aria-label=\"Change to miles\" tabindex=\"0\" style=\"direction: ltr; display: none;\"><svg height=\"12\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"99\"><polyline style=\"fill:none; stroke:white; stroke-width:4\" points=\"2 2 2 10 97 10 97 2\"></polyline><polyline style=\"fill:none; stroke:black; stroke-width:2\" points=\"2 2 2 10 97 10 97 2\"></polyline></svg><div style=\"padding: 0 0 0 10px\">10 km</div></div></div></div><div class=\"H_l_bottom H_l_right\"><div class=\"H_l_anchor H_l_vertical\"></div><div class=\"H_l_anchor H_l_horizontal\"><div class=\"H_ctl H_el\" tabindex=\"-1\" style=\"display: none;\"><div class=\"H_btn H_el\" title=\"Choose view\" aria-label=\"Choose view\" tabindex=\"0\"><svg xmlns=\"http://www.w3.org/2000/svg\" class=\"H_icon\" viewBox=\"0 0 24 24\"><path fill-rule=\"evenodd\" d=\"M6.7,14.6 L4.5,16 L12,20.6 L19.5,16 L17.3,14.6 L19.1,13.5 L23,16 L12,23 L1,16 L4.9,13.5 L6.7,14.6 Z M12,2 L23,9 L12,16 L1,9 L12,2 Z\"></path></svg></div><div class=\"H_overlay H_el\" tabindex=\"-1\"><div class=\"H_rdo H_el\" tabindex=\"-1\"><div class=\"H_rdo_title H_el\" tabindex=\"-1\">Choose view</div><div class=\"H_rdo_buttons H_el\" tabindex=\"-1\"><div class=\"H_btn H_el H_active\" tabindex=\"-1\">Map view</div><div class=\"H_btn H_el\" tabindex=\"-1\">Satellite</div></div></div><div class=\"H_separator H_el\" tabindex=\"-1\"></div><div class=\"H_grp H_el\" tabindex=\"-1\"><div class=\"H_btn H_el\" tabindex=\"-1\">Traffic conditions</div><div class=\"H_btn H_el\" tabindex=\"-1\">Show traffic incidents</div></div></div></div></div></div><div class=\"H_l_anchor H_l_top H_l_center H_l_horizontal\" style=\"margin-left: 0px;\"></div><div class=\"H_l_anchor H_l_left H_l_middle H_l_vertical\" style=\"margin-top: 0px;\"></div><div class=\"H_l_anchor H_l_right H_l_middle H_l_vertical\" style=\"margin-top: 0px;\"></div><div class=\"H_l_anchor H_l_bottom H_l_center H_l_horizontal\" style=\"margin-left: 0px;\"></div></div></div><div class=\"ZoomButtons\"><div class=\"MapSettingsTile\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" class=\"display-block hover-scale-110\"><path fill=\"#A7AFBB\" d=\"M9.5 1v5.5H15v3H9.5V15h-3V9.5H1v-3h5.5V1z\"></path></svg></div><div class=\"MapSettingsTileSpacer\"></div><div class=\"MapSettingsTile\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" class=\"display-block hover-scale-110\"><path fill=\"#A7AFBB\" d=\"M7.177 9.5H1v-3h14v3H8.823z\"></path></svg></div></div><div class=\"MapSettingsWrapper\"><div class=\"MapSettingsTile MapTypeSettings\"><div class=\"MapSettingsTile-inner position-relative\"><div class=\"MapSettingsButton\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" class=\"MapSettingsTileIcon hover-scale-110 display-block\"><g fill=\"none\" fill-rule=\"evenodd\"><path fill=\"#939BA8\" d=\"m20 12.451 19.98 11.322L20 35.095.02 23.773l11.052-6.262a4.85 4.85 0 0 0 1.13.484l-2.775 1.572c0-.002 3.353 1.922 3.353 1.922l3.353-1.924-2.446-1.384c.16-.005.32-.019.478-.04l2.222 1.274 3.354-1.924-2.296-1.3c.07-.097.138-.197.202-.3l2.235 1.28.147.085.052.03 3.352-1.924-3.353-1.9-1.854 1.052c.095-.38.142-.762.144-1.139l1.63-.924Zm-.093 17.57-3.353 1.9 3.353 1.922 3.354-1.924-3.354-1.899Zm3.746-2.05-3.353 1.9 3.354 1.922 3.353-1.924-3.354-1.899Zm-7.383-.026-3.353 1.9 3.353 1.923 3.353-1.924-3.353-1.899Zm-3.636-2.04-3.353 1.9c0-.002 3.353 1.923 3.353 1.923l3.353-1.925-3.353-1.898Zm7.383-.01-3.353 1.901c0-.002 3.353 1.922 3.353 1.922l3.353-1.924-3.353-1.9Zm7.287-.015-3.353 1.9 3.353 1.923 3.353-1.924-3.353-1.899ZM9 23.868l-3.354 1.9L9 27.691l3.353-1.924L9 23.868Zm7.381-.013-3.353 1.9 3.353 1.923 3.353-1.924-3.353-1.899Zm14.53-.049-3.353 1.9c0-.002 3.353 1.923 3.353 1.923l3.353-1.925-3.353-1.898Zm-7.244 0-3.353 1.9 3.353 1.922 3.353-1.924-3.353-1.899Zm-10.92-1.988-3.354 1.9 3.354 1.923 3.353-1.924-3.353-1.899Zm-7.364-.013L2.03 23.707c0-.002 3.353 1.922 3.353 1.922l3.354-1.924-3.354-1.9Zm14.648-.04-3.353 1.9c0-.002 3.353 1.923 3.353 1.923l3.353-1.924-3.353-1.9Zm7.243-.034-3.353 1.9 3.353 1.923 3.353-1.924-3.353-1.899Zm7.33-.055-3.353 1.901c0-.002 3.353 1.922 3.353 1.922l3.353-1.924-3.353-1.899ZM9.13 19.756l-3.353 1.901c0-.002 3.353 1.922 3.353 1.922l3.354-1.924-3.354-1.9Zm7.266-.028-3.353 1.9 3.353 1.923 3.353-1.924-3.353-1.899Zm7.242-.038-3.353 1.901c0-.002 3.353 1.923 3.353 1.923l3.353-1.924-3.353-1.9Zm7.329-.089-3.353 1.901c0-.002 3.353 1.922 3.353 1.922l3.353-1.923-3.353-1.9Zm-10.964-1.948-3.353 1.9 3.353 1.924 3.354-1.925-3.354-1.899Zm7.328-.093-3.353 1.902c0-.002 3.353 1.922 3.353 1.922l3.353-1.924-3.353-1.9Zm-3.635-2.036-3.353 1.901c0-.002 3.353 1.922 3.353 1.922l3.354-1.924-3.354-1.899Z\"></path><path fill=\"#C9CDD3\" d=\"M8.403 15.762c.15.282.05.632-.227.792l-1.392.74a.584.584 0 0 1-.45.044.593.593 0 0 1-.105-1.09l1.39-.74a.592.592 0 0 1 .784.254ZM14.7 9.09a4.15 4.15 0 1 1-2.427 7.939 4.15 4.15 0 0 1 2.427-7.94Zm-6.333 1.784a.593.593 0 1 1-.347 1.134l-2.269-.693a.602.602 0 0 1-.393-.74c.1-.31.428-.485.74-.394l2.269.693ZM20.99 9.07a.593.593 0 0 1-.245.801l-1.392.74a.587.587 0 0 1-.452.044.564.564 0 0 1-.35-.289.586.586 0 0 1 .245-.801l1.392-.74a.593.593 0 0 1 .802.245ZM9.95 5.497c.153.05.279.16.35.304l.74 1.392a.588.588 0 0 1-.246.802.564.564 0 0 1-.451.044.587.587 0 0 1-.35-.29l-.74-1.392a.595.595 0 0 1 .235-.82.595.595 0 0 1 .462-.04Zm6.023-.566c.313.096.489.428.393.74l-.693 2.269a.593.593 0 1 1-1.134-.347l.693-2.268a.593.593 0 0 1 .74-.394ZM29.571 9.467a.791.791 0 0 0-.4.1.88.88 0 0 0 .067-.35c0-.55-.4-1-.89-1-.2 0-.355.075-.51.175-.222-.975-1-1.675-1.934-1.675-1.11 0-2 1-2 2.25 0 .1 0 .2.022.275-.088-.025-.155-.025-.244-.025-.622 0-1.111.55-1.111 1.25s.489 1.25 1.111 1.25h5.889c.555 0 1-.5 1-1.125s-.445-1.125-1-1.125ZM30.446 14.917c.117 0 .233.02.35.08a.652.652 0 0 1-.058-.28c0-.44.35-.8.777-.8a.85.85 0 0 1 .448.14c.194-.78.875-1.34 1.691-1.34.973 0 1.75.8 1.75 1.8 0 .08 0 .16-.019.22.078-.02.136-.02.214-.02.544 0 .972.44.972 1s-.428 1-.972 1h-5.153a.884.884 0 0 1-.875-.9c0-.462.331-.838.765-.893l.11-.007Z\"></path></g></svg></div><div class=\"dropdown\"></div></div></div></div><div class=\"MapElements\"></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "// biome-ignore lint/suspicious/noShadowRestrictedNames: <explanation>\nimport Map from '@rio-cloud/rio-uikit/Map';\nimport Route, {\n    ROUTE_COLOR_DANGER,\n    ROUTE_COLOR_SUCCESS,\n    ROUTE_COLOR_WARNING,\n    ROUTE_COLOR_WHITE,\n} from '@rio-cloud/rio-uikit/Route';\nimport SingleMapMarker from '@rio-cloud/rio-uikit/SingleMapMarker';\nimport MapSettings from '@rio-cloud/rio-uikit/MapSettings';\nimport MapTypeSettings from '@rio-cloud/rio-uikit/MapTypeSettings';\n\nimport { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';\nimport type { Position } from '@rio-cloud/rio-uikit/mapTypes';\n\nconst center = { lat: 48.7497783, lng: 12.8300291 };\n\nconst goodRouteStart: Position[] = [\n    { lat: 48.6898766, lng: 12.6748714 },\n    { lat: 48.69664, lng: 12.676465 },\n    { lat: 48.7036781, lng: 12.6883364 },\n    { lat: 48.7120438, lng: 12.7029095 },\n    { lat: 48.719677, lng: 12.7183695 },\n    { lat: 48.7297783, lng: 12.7300291 },\n];\n\nconst dangerRoute: Position[] = [\n    { lat: 48.7297783, lng: 12.7300291 },\n    { lat: 48.7417717, lng: 12.736865 },\n    { lat: 48.7487717, lng: 12.7527666 },\n    { lat: 48.7575531, lng: 12.7673788 },\n    { lat: 48.7681808, lng: 12.7792053 },\n    { lat: 48.7763824, lng: 12.7935705 },\n    { lat: 48.7802505, lng: 12.8117657 },\n    { lat: 48.7864838, lng: 12.8284893 },\n    { lat: 48.7955551, lng: 12.8416948 },\n];\n\nconst goodRouteEnd: Position[] = [\n    { lat: 48.7955551, lng: 12.8416948 },\n    { lat: 48.801033, lng: 12.8583927 },\n    { lat: 48.8017998, lng: 12.8773537 },\n    { lat: 48.7978935, lng: 12.8954306 },\n    { lat: 48.7991867, lng: 12.9137754 },\n    { lat: 48.8086166, lng: 12.9266558 },\n];\n\nconst getRandomModifier = () => {\n    const operator = Math.random() < 0.5 ? -1 : 1;\n    return Math.random() * Math.floor(1) * operator;\n};\n\nexport default () => {\n    return (\n        <Map\n            credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}\n            center={center}\n            zoom={10}\n            height={300}\n            mapSettings={\n                <MapSettings\n                    options={[\n                        <MapTypeSettings\n                            key='mapTypeSettings'\n                            tooltip='Change map type'\n                            dropdownHeaderText='Map views'\n                            defaultTypeLabel='Default view'\n                            truckTypeLabel='Truck view'\n                            terrainTypeLabel='Terrain view'\n                            satelliteTypeLabel='Satellite view'\n                            nightTypeLabel='Night view'\n                        />,\n                    ]}\n                />\n            }\n        >\n            <Route\n                positions={goodRouteStart}\n                startIcon={<SingleMapMarker iconNames={['start']} markerColor='bg-map-marker-route' />}\n                style={{ color: ROUTE_COLOR_WARNING }}\n            />\n            <Route\n                positions={dangerRoute}\n                middleIcon={\n                    <SingleMapMarker\n                        anchorIconName='road-restrictions'\n                        anchorSize='lg'\n                        markerColor='bg-map-marker-danger'\n                        clickable={false}\n                    />\n                }\n                style={{ color: ROUTE_COLOR_DANGER, borderColor: '#b91624' }}\n                arrowStyle={{\n                    fillColor: ROUTE_COLOR_WHITE,\n                    strokeColor: ROUTE_COLOR_WHITE,\n                }}\n            />\n            <Route\n                positions={goodRouteEnd}\n                middleIcon={\n                    <SingleMapMarker\n                        anchorIconName='ok'\n                        anchorSize='lg'\n                        markerColor='bg-map-marker-success'\n                        clickable={false}\n                    />\n                }\n                endIcon={<SingleMapMarker iconNames={['finish']} markerColor='bg-map-marker-route' />}\n                style={{ color: ROUTE_COLOR_SUCCESS }}\n            />\n        </Map>\n    );\n};"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "positions",
+                      "type": "Array of Objects",
+                      "default": "",
+                      "description": "Array of points {lat, lng} the route is connecting."
+                    },
+                    {
+                      "name": "hasArrows",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Defines whether to show arrows or not."
+                    },
+                    {
+                      "name": "arrowStyle",
+                      "type": "ArrowStyle",
+                      "default": "",
+                      "description": "Defines the style of the arrows on the route."
+                    },
+                    {
+                      "name": "isReduced",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether to render the route as reduced (transparent)."
+                    },
+                    {
+                      "name": "isRouteAlternative",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether to render the route with alternative route style."
+                    },
+                    {
+                      "name": "style",
+                      "type": "RouteStyle",
+                      "default": "",
+                      "description": "Custom style for the route."
+                    },
+                    {
+                      "name": "eventListenerMap",
+                      "type": "EventListenerMap",
+                      "default": "",
+                      "description": "Map of event listeners for the route."
+                    },
+                    {
+                      "name": "startIcon",
+                      "type": "JSX.Element",
+                      "default": "",
+                      "description": "Icon to be displayed at the start of the route."
+                    },
+                    {
+                      "name": "middleIcon",
+                      "type": "JSX.Element",
+                      "default": "",
+                      "description": "Icon to be displayed at the middle of the route."
+                    },
+                    {
+                      "name": "endIcon",
+                      "type": "JSX.Element",
+                      "default": "",
+                      "description": "Icon to be displayed at the end of the route."
+                    },
+                    {
+                      "name": "markers",
+                      "type": "JSX.Element[]",
+                      "default": "",
+                      "description": "Array of markers to be displayed on the route."
+                    },
+                    {
+                      "name": "customData",
+                      "type": "object",
+                      "default": "",
+                      "description": "Custom data to be passed to the route."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "Route indicating a range for electric vehicles",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 5",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"Map position-relative map-type-default \" style=\"height: 300px;\"><div style=\"position: relative; width: 100%; height: 100%; overflow: hidden; -webkit-tap-highlight-color: transparent;\"><div style=\"z-index: 0; width: 100%; height: 100%; direction: ltr; position: absolute; touch-action: none;\"><canvas width=\"908\" height=\"300\" data-engine=\"three.js r152\" style=\"position: absolute; left: 0px; top: 0px; width: 908px; height: 300px;\"></canvas><canvas width=\"908\" height=\"300\" style=\"position: absolute; left: 0px; top: 0px; width: 908px; height: 300px; display: none;\"></canvas><div style=\"position: absolute; height: 100%; width: 100%; z-index: 1;\"><div style=\"position: absolute; pointer-events: none; width: 908px; height: 300px; z-index: 1;\"></div></div></div><div class=\"H_imprint\" style=\"position: absolute; bottom: 0px; right: 0px; left: 0px; z-index: 1; direction: ltr; pointer-events: none; user-select: none; font: 11px &quot;Lucida Grande&quot;, Arial, Helvetica, sans-serif;\"><div class=\"H_logo\" style=\"margin: 0px 0px 16px 16px; display: inline-block;\"><svg height=\"40\" viewBox=\"0 0 47 40\" width=\"47\" xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" fill-rule=\"evenodd\"><path d=\"m45.2054149 8.82876345.6003191.40637037-.2240425.6914074-.4490426 1.38570368c-.1024468.3148889-.6998936 1.9596297-2.43 3.5918519l-.017234.0163704c-.188617.1887407-.3801064.3659259-.5467021.5084444l-.4605319.4285185-.486383.4516296-.1407447-.0702963c-.7257447.4583704-1.4926596.7886667-2.2796809.9831852l.5840426.5864445-.6769149.6817778-2.052766 2.0636296-.169468.1704444-.019149.0192593-2.3821276 2.3958518c-.4902128.8493334-1.1202128 1.6331852-1.8497873 2.3111112-.6031915.6047407-1.2504255 1.1054814-1.935 1.4954814l-.4777659.4805186-4.3247873 4.3506666-.0296808.0298519-.0315958.0269629-2.1532978 1.8171111-.2661702.2253334h-.3485107-3.8948936l-3.968617 3.9914815-1.3547873 1.3616296-.6769148.6808148-.6769149-.6808148-1.3538298-1.3616296-4.80925535-4.837926-3.2687234-3.2875555-1.63436171-1.6437778h2.3112766 4.62255319 2.67223407l-4.71063832-4.7368148-.6769149-.6808148.6769149-.6808148 4.93851062-4.9650371.6769149-.6798518.6769149.6808148 2.7296809 2.7454074c.9363829-.8820741 2.1485106-1.4685185 3.4037234-1.6562963.278617-1.4694815 1.0187234-2.834963 2.168617-3.9885926.5696808-.572 1.1843617-1.0438519 1.8335106-1.4107407l.2901064-.2917778 4.3094681-4.31985187c.5830851-1.0582963 1.4256383-1.78918519 2.0364893-2.12718519l.4471277-.24748148c.3829787-.7617037.9047872-1.47622222 1.5539362-2.12622222 1.510851-1.51666667 3.3165957-2.31881482 5.22-2.31881482.0871276 0 .1752127.00192593.2594681.00577778 1.9484042.06933334 3.8441489.97933334 5.4775532 2.62792593.1512765.15022222.3303191.34859259.5361702.5797037l.0526595.05874074c.1120213.12518519.2345745.26192593.370532.40733334l1.2657446 1.36066666.6328724.67985185-.6548936.65866667-.2508511.25325926zm-27.9288192 22.17414815h-9.57446804l4.78723404 4.8148148zm23.1864894-21.70422223c-.9220213 1.38666663-2.5180851 3.63037033-4.1984042 1.94133333l4.2510638-4.27651851c-.3810638-.41022222-.6711702-.754-.8923404-.97740741-2.2921277-2.31207407-4.8743617-2.34192593-6.8984043-.312-1.3528723 1.35681481-1.7071277 2.91007407-1.313617 4.38533332l-1.332766-1.52629628c-.385851.21474074-2.0182979 1.65918518-.7937234 3.84703708l-1.5252127-1.274963-2.0240426 2.0299259 2.7344681 2.7502222c-2.1121277-1.6861481-4.3889362-1.5205185-6.2157447.312-1.9560638 1.9615556-1.8181915 4.3381482-.3532979 6.293926l-.295851-.2946667c-1.9321277-1.9432593-4.0318085-1.2576296-5.0706383-.2128148-.8023405.8079259-1.2944681 1.9191852-1.0924468 2.6905185l-4.195532-4.2187407-2.22893613 2.2408148 8.25893613 8.3065185h4.4339362l-2.9767021-2.9938519c-.5893908-.6029568-.9604155-1.0987731-1.1531529-1.5232627-.3182349-.7008886-.1504161-1.2073234.3230465-1.680515.7334043-.7318519 1.583617-.2763704 3.0829787 1.2277777l2.9412766 2.9562963 2.2164894-2.2292592-2.7909575-2.8060741c2.0125532 1.5291852 4.4224468 1.612 6.5728724-.545037 1.3567021-1.2653334 1.7425532-2.4565185 1.7425532-2.4565185l-1.6755319-1.1314815c-.9229788 1.3866666-2.5152128 3.6361481-4.195532 1.9461481l4.2606383-4.2851852 2.655 2.6712593 2.3160639-2.3294074-3.3223405-3.3424445c-1.5520212-1.5609629-.6328723-3.0275555.0124469-3.5793333.3025531.6442222.7448936 1.2624445 1.3078723 1.8296296 2.1485106 2.1676297 4.9260638 2.6038519 7.3685106.1550371 1.3567022-1.2643704 1.7425532-2.4565185 1.7425532-2.4565185zm-3.6564894-1.35537321-2.0211702 2.03377777c-.9890425-1.18251851-.9392553-1.81422222-.3245744-2.43051851.7439361-.7462963 1.4993617-.43044445 2.3457446.39674074zm-12.4879787 12.56088884c-.9890425-1.1825185-.9411702-1.819037-.3284042-2.4353333.7448936-.7462963 1.5003191-.4304444 2.3467021.3967408z\" fill=\"#0f1621\" fill-opacity=\".7\" style=\"fill: rgb(255, 255, 255); fill-opacity: 0.6;\"></path><path d=\"m17.2765957 31.0029116-4.787234 4.8148148-4.78723404-4.8148148zm23.1864894-21.70422223 1.6755319 1.13148153s-.385851 1.1921481-1.7425532 2.4565185c-2.4424468 2.4488148-5.22 2.0125926-7.3685106-.1550371-.5629787-.5671851-1.0053192-1.1854074-1.3078723-1.8296296-.6453192.5517778-1.5644681 2.0183704-.0124469 3.5793333l3.3223405 3.3424445-2.3160639 2.3294074-2.655-2.6712593-4.2606383 4.2851852c1.6803192 1.69 3.2725532-.5594815 4.195532-1.9461481l1.6755319 1.1314815s-.3858511 1.1911851-1.7425532 2.4565185c-2.1504256 2.157037-4.5603192 2.0742222-6.5728724.545037l2.7909575 2.8060741-2.2164894 2.2292592-2.9412766-2.9562963c-1.4993617-1.5041481-2.3495744-1.9596296-3.0829787-1.2277777-.4734626.4731916-.6412814.9796264-.3230465 1.680515.1927374.4244896.5637621.9203059 1.1531529 1.5232627l2.9767021 2.9938519h-4.4339362l-8.25893613-8.3065185 2.22893613-2.2408148 4.195532 4.2187407c-.2020213-.7713333.2901063-1.8825926 1.0924468-2.6905185 1.0388298-1.0448148 3.1385106-1.7304445 5.0706383.2128148l.295851.2946667c-1.4648936-1.9557778-1.6027659-4.3323704.3532979-6.293926 1.8268085-1.8325185 4.103617-1.9981481 6.2157447-.312l-2.7344681-2.7502222 2.0240426-2.0299259 1.5252127 1.274963c-1.2245745-2.1878519.4078724-3.63229634.7937234-3.84703708l1.332766 1.52629628c-.3935107-1.47525925-.0392553-3.02851851 1.313617-4.38533332 2.0240426-2.02992593 4.6062766-2.00007407 6.8984043.312.2211702.22340741.5112766.56718519.8923404.97740741l-4.2510638 4.27651851c1.6803191 1.689037 3.2763829-.5546667 4.1984042-1.94133333zm-16.1444681 11.20551563 2.0182979-2.0385925c-.846383-.8271852-1.6018085-1.1430371-2.3467021-.3967408-.612766.6162963-.6606383 1.2528148.3284042 2.4353333zm12.4879787-12.56088884c-.8463829-.82718519-1.6018085-1.14303704-2.3457446-.39674074-.6146809.61629629-.6644681 1.248.3245744 2.43051851z\" fill=\"#fff\" fill-opacity=\".3\" style=\"fill: rgb(15, 22, 33); fill-opacity: 0.3;\"></path></g></svg></div><div class=\"H_copyright\" style=\"right: 0px; bottom: 0px; position: absolute; background-color: rgba(255, 255, 255, 0.8); color: rgb(15, 22, 33); padding: 2px 16px;\"><a target=\"_blank\" tabindex=\"1\" href=\"https://legal.here.com/us-en/terms/here-end-user-terms\" style=\"color: inherit; margin: 0px 8px; text-decoration: none; pointer-events: all;\">Terms of use</a><span style=\"margin: 0px 8px;\">© 1987–2025 HERE</span><span style=\"margin: 0px;\"></span></div></div><div class=\"H_ui\" dir=\"ltr\"><div class=\"H_l_top H_l_left\"><div class=\"H_l_anchor H_l_horizontal\"></div><div class=\"H_l_anchor H_l_vertical\"></div></div><div class=\"H_l_top H_l_right\"><div class=\"H_l_anchor H_l_horizontal\"></div><div class=\"H_l_anchor H_l_vertical\"></div></div><div class=\"H_l_bottom H_l_left\"><div class=\"H_l_anchor H_l_vertical\"></div><div class=\"H_l_anchor H_l_horizontal\"><div class=\"H_ctl H_el H_scalebar\" title=\"Change to miles\" aria-label=\"Change to miles\" tabindex=\"0\" style=\"direction: ltr; display: none;\"><svg height=\"12\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"99\"><polyline style=\"fill:none; stroke:white; stroke-width:4\" points=\"2 2 2 10 97 10 97 2\"></polyline><polyline style=\"fill:none; stroke:black; stroke-width:2\" points=\"2 2 2 10 97 10 97 2\"></polyline></svg><div style=\"padding: 0 0 0 10px\">10 km</div></div></div></div><div class=\"H_l_bottom H_l_right\"><div class=\"H_l_anchor H_l_vertical\"></div><div class=\"H_l_anchor H_l_horizontal\"><div class=\"H_ctl H_el\" tabindex=\"-1\" style=\"display: none;\"><div class=\"H_btn H_el\" title=\"Choose view\" aria-label=\"Choose view\" tabindex=\"0\"><svg xmlns=\"http://www.w3.org/2000/svg\" class=\"H_icon\" viewBox=\"0 0 24 24\"><path fill-rule=\"evenodd\" d=\"M6.7,14.6 L4.5,16 L12,20.6 L19.5,16 L17.3,14.6 L19.1,13.5 L23,16 L12,23 L1,16 L4.9,13.5 L6.7,14.6 Z M12,2 L23,9 L12,16 L1,9 L12,2 Z\"></path></svg></div><div class=\"H_overlay H_el\" tabindex=\"-1\"><div class=\"H_rdo H_el\" tabindex=\"-1\"><div class=\"H_rdo_title H_el\" tabindex=\"-1\">Choose view</div><div class=\"H_rdo_buttons H_el\" tabindex=\"-1\"><div class=\"H_btn H_el H_active\" tabindex=\"-1\">Map view</div><div class=\"H_btn H_el\" tabindex=\"-1\">Satellite</div></div></div><div class=\"H_separator H_el\" tabindex=\"-1\"></div><div class=\"H_grp H_el\" tabindex=\"-1\"><div class=\"H_btn H_el\" tabindex=\"-1\">Traffic conditions</div><div class=\"H_btn H_el\" tabindex=\"-1\">Show traffic incidents</div></div></div></div></div></div><div class=\"H_l_anchor H_l_top H_l_center H_l_horizontal\" style=\"margin-left: 0px;\"></div><div class=\"H_l_anchor H_l_left H_l_middle H_l_vertical\" style=\"margin-top: 0px;\"></div><div class=\"H_l_anchor H_l_right H_l_middle H_l_vertical\" style=\"margin-top: 0px;\"></div><div class=\"H_l_anchor H_l_bottom H_l_center H_l_horizontal\" style=\"margin-left: 0px;\"></div></div></div><div class=\"ZoomButtons\"><div class=\"MapSettingsTile\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" class=\"display-block hover-scale-110\"><path fill=\"#A7AFBB\" d=\"M9.5 1v5.5H15v3H9.5V15h-3V9.5H1v-3h5.5V1z\"></path></svg></div><div class=\"MapSettingsTileSpacer\"></div><div class=\"MapSettingsTile\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" class=\"display-block hover-scale-110\"><path fill=\"#A7AFBB\" d=\"M7.177 9.5H1v-3h14v3H8.823z\"></path></svg></div></div><div class=\"MapSettingsWrapper\"><div class=\"MapSettingsTile MapTypeSettings\"><div class=\"MapSettingsTile-inner position-relative\"><div class=\"MapSettingsButton\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" class=\"MapSettingsTileIcon hover-scale-110 display-block\"><g fill=\"none\" fill-rule=\"evenodd\"><path fill=\"#939BA8\" d=\"m20 12.451 19.98 11.322L20 35.095.02 23.773l11.052-6.262a4.85 4.85 0 0 0 1.13.484l-2.775 1.572c0-.002 3.353 1.922 3.353 1.922l3.353-1.924-2.446-1.384c.16-.005.32-.019.478-.04l2.222 1.274 3.354-1.924-2.296-1.3c.07-.097.138-.197.202-.3l2.235 1.28.147.085.052.03 3.352-1.924-3.353-1.9-1.854 1.052c.095-.38.142-.762.144-1.139l1.63-.924Zm-.093 17.57-3.353 1.9 3.353 1.922 3.354-1.924-3.354-1.899Zm3.746-2.05-3.353 1.9 3.354 1.922 3.353-1.924-3.354-1.899Zm-7.383-.026-3.353 1.9 3.353 1.923 3.353-1.924-3.353-1.899Zm-3.636-2.04-3.353 1.9c0-.002 3.353 1.923 3.353 1.923l3.353-1.925-3.353-1.898Zm7.383-.01-3.353 1.901c0-.002 3.353 1.922 3.353 1.922l3.353-1.924-3.353-1.9Zm7.287-.015-3.353 1.9 3.353 1.923 3.353-1.924-3.353-1.899ZM9 23.868l-3.354 1.9L9 27.691l3.353-1.924L9 23.868Zm7.381-.013-3.353 1.9 3.353 1.923 3.353-1.924-3.353-1.899Zm14.53-.049-3.353 1.9c0-.002 3.353 1.923 3.353 1.923l3.353-1.925-3.353-1.898Zm-7.244 0-3.353 1.9 3.353 1.922 3.353-1.924-3.353-1.899Zm-10.92-1.988-3.354 1.9 3.354 1.923 3.353-1.924-3.353-1.899Zm-7.364-.013L2.03 23.707c0-.002 3.353 1.922 3.353 1.922l3.354-1.924-3.354-1.9Zm14.648-.04-3.353 1.9c0-.002 3.353 1.923 3.353 1.923l3.353-1.924-3.353-1.9Zm7.243-.034-3.353 1.9 3.353 1.923 3.353-1.924-3.353-1.899Zm7.33-.055-3.353 1.901c0-.002 3.353 1.922 3.353 1.922l3.353-1.924-3.353-1.899ZM9.13 19.756l-3.353 1.901c0-.002 3.353 1.922 3.353 1.922l3.354-1.924-3.354-1.9Zm7.266-.028-3.353 1.9 3.353 1.923 3.353-1.924-3.353-1.899Zm7.242-.038-3.353 1.901c0-.002 3.353 1.923 3.353 1.923l3.353-1.924-3.353-1.9Zm7.329-.089-3.353 1.901c0-.002 3.353 1.922 3.353 1.922l3.353-1.923-3.353-1.9Zm-10.964-1.948-3.353 1.9 3.353 1.924 3.354-1.925-3.354-1.899Zm7.328-.093-3.353 1.902c0-.002 3.353 1.922 3.353 1.922l3.353-1.924-3.353-1.9Zm-3.635-2.036-3.353 1.901c0-.002 3.353 1.922 3.353 1.922l3.354-1.924-3.354-1.899Z\"></path><path fill=\"#C9CDD3\" d=\"M8.403 15.762c.15.282.05.632-.227.792l-1.392.74a.584.584 0 0 1-.45.044.593.593 0 0 1-.105-1.09l1.39-.74a.592.592 0 0 1 .784.254ZM14.7 9.09a4.15 4.15 0 1 1-2.427 7.939 4.15 4.15 0 0 1 2.427-7.94Zm-6.333 1.784a.593.593 0 1 1-.347 1.134l-2.269-.693a.602.602 0 0 1-.393-.74c.1-.31.428-.485.74-.394l2.269.693ZM20.99 9.07a.593.593 0 0 1-.245.801l-1.392.74a.587.587 0 0 1-.452.044.564.564 0 0 1-.35-.289.586.586 0 0 1 .245-.801l1.392-.74a.593.593 0 0 1 .802.245ZM9.95 5.497c.153.05.279.16.35.304l.74 1.392a.588.588 0 0 1-.246.802.564.564 0 0 1-.451.044.587.587 0 0 1-.35-.29l-.74-1.392a.595.595 0 0 1 .235-.82.595.595 0 0 1 .462-.04Zm6.023-.566c.313.096.489.428.393.74l-.693 2.269a.593.593 0 1 1-1.134-.347l.693-2.268a.593.593 0 0 1 .74-.394ZM29.571 9.467a.791.791 0 0 0-.4.1.88.88 0 0 0 .067-.35c0-.55-.4-1-.89-1-.2 0-.355.075-.51.175-.222-.975-1-1.675-1.934-1.675-1.11 0-2 1-2 2.25 0 .1 0 .2.022.275-.088-.025-.155-.025-.244-.025-.622 0-1.111.55-1.111 1.25s.489 1.25 1.111 1.25h5.889c.555 0 1-.5 1-1.125s-.445-1.125-1-1.125ZM30.446 14.917c.117 0 .233.02.35.08a.652.652 0 0 1-.058-.28c0-.44.35-.8.777-.8a.85.85 0 0 1 .448.14c.194-.78.875-1.34 1.691-1.34.973 0 1.75.8 1.75 1.8 0 .08 0 .16-.019.22.078-.02.136-.02.214-.02.544 0 .972.44.972 1s-.428 1-.972 1h-5.153a.884.884 0 0 1-.875-.9c0-.462.331-.838.765-.893l.11-.007Z\"></path></g></svg></div><div class=\"dropdown\"></div></div></div></div><div class=\"MapElements\"></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "// biome-ignore lint/suspicious/noShadowRestrictedNames: <explanation>\nimport Map from '@rio-cloud/rio-uikit/Map';\nimport Route, { ROUTE_COLOR_DANGER, ROUTE_COLOR_WARNING, ARROW_COLOR_WARNING } from '@rio-cloud/rio-uikit/Route';\nimport SingleMapMarker from '@rio-cloud/rio-uikit/SingleMapMarker';\nimport MapSettings from '@rio-cloud/rio-uikit/MapSettings';\nimport MapTypeSettings from '@rio-cloud/rio-uikit/MapTypeSettings';\n\nimport { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';\nimport type { Position } from '@rio-cloud/rio-uikit/mapTypes';\n\nconst center = { lat: 48.7497783, lng: 12.8300291 };\n\nconst goodRouteStart: Position[] = [\n    { lat: 48.6898766, lng: 12.6748714 },\n    { lat: 48.69664, lng: 12.676465 },\n    { lat: 48.7036781, lng: 12.6883364 },\n    { lat: 48.7120438, lng: 12.7029095 },\n    { lat: 48.719677, lng: 12.7183695 },\n    { lat: 48.7297783, lng: 12.7300291 },\n];\n\nconst dangerRoute: Position[] = [\n    { lat: 48.7297783, lng: 12.7300291 },\n    { lat: 48.7417717, lng: 12.736865 },\n    { lat: 48.7487717, lng: 12.7527666 },\n    { lat: 48.7575531, lng: 12.7673788 },\n    { lat: 48.7681808, lng: 12.7792053 },\n    { lat: 48.7763824, lng: 12.7935705 },\n    { lat: 48.7802505, lng: 12.8117657 },\n    { lat: 48.7864838, lng: 12.8284893 },\n    { lat: 48.7955551, lng: 12.8416948 },\n];\n\nconst goodRouteEnd: Position[] = [\n    { lat: 48.7955551, lng: 12.8416948 },\n    { lat: 48.801033, lng: 12.8583927 },\n    { lat: 48.8017998, lng: 12.8773537 },\n    { lat: 48.7978935, lng: 12.8954306 },\n    { lat: 48.7991867, lng: 12.9137754 },\n    { lat: 48.8086166, lng: 12.9266558 },\n];\n\nconst getRandomModifier = () => {\n    const operator = Math.random() < 0.5 ? -1 : 1;\n    return Math.random() * Math.floor(1) * operator;\n};\n\nexport default () => {\n    return (\n        <Map\n            credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}\n            center={center}\n            zoom={10}\n            height={300}\n            mapSettings={\n                <MapSettings\n                    options={[\n                        <MapTypeSettings\n                            key='mapTypeSettings'\n                            tooltip='Change map type'\n                            dropdownHeaderText='Map views'\n                            defaultTypeLabel='Default view'\n                            truckTypeLabel='Truck view'\n                            terrainTypeLabel='Terrain view'\n                            satelliteTypeLabel='Satellite view'\n                            nightTypeLabel='Night view'\n                        />,\n                    ]}\n                />\n            }\n        >\n            <Route\n                positions={goodRouteStart}\n                startIcon={<SingleMapMarker iconNames={['start']} markerColor='bg-map-marker-route' />}\n            />\n            <Route\n                positions={dangerRoute}\n                startIcon={\n                    <SingleMapMarker\n                        anchorIconName='battery-level-low'\n                        anchorSize='lg'\n                        markerColor='bg-map-marker-warning'\n                        clickable={false}\n                    />\n                }\n                style={{ color: ROUTE_COLOR_WARNING }}\n                arrowStyle={{\n                    fillColor: ARROW_COLOR_WARNING,\n                    strokeColor: ARROW_COLOR_WARNING,\n                }}\n            />\n            <Route\n                positions={goodRouteEnd}\n                startIcon={\n                    <SingleMapMarker\n                        anchorIconName='battery-level-empty'\n                        anchorSize='lg'\n                        markerColor='bg-map-marker-danger'\n                        clickable={false}\n                    />\n                }\n                endIcon={<SingleMapMarker iconNames={['finish']} markerColor='bg-map-marker-danger' />}\n                style={{ color: ROUTE_COLOR_DANGER, borderColor: '#b91624', borderWidth: 0, lineDash: [1.5, 1] }}\n                hasArrows={false}\n            />\n        </Map>\n    );\n};"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "positions",
+                      "type": "Array of Objects",
+                      "default": "",
+                      "description": "Array of points {lat, lng} the route is connecting."
+                    },
+                    {
+                      "name": "hasArrows",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Defines whether to show arrows or not."
+                    },
+                    {
+                      "name": "arrowStyle",
+                      "type": "ArrowStyle",
+                      "default": "",
+                      "description": "Defines the style of the arrows on the route."
+                    },
+                    {
+                      "name": "isReduced",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether to render the route as reduced (transparent)."
+                    },
+                    {
+                      "name": "isRouteAlternative",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether to render the route with alternative route style."
+                    },
+                    {
+                      "name": "style",
+                      "type": "RouteStyle",
+                      "default": "",
+                      "description": "Custom style for the route."
+                    },
+                    {
+                      "name": "eventListenerMap",
+                      "type": "EventListenerMap",
+                      "default": "",
+                      "description": "Map of event listeners for the route."
+                    },
+                    {
+                      "name": "startIcon",
+                      "type": "JSX.Element",
+                      "default": "",
+                      "description": "Icon to be displayed at the start of the route."
+                    },
+                    {
+                      "name": "middleIcon",
+                      "type": "JSX.Element",
+                      "default": "",
+                      "description": "Icon to be displayed at the middle of the route."
+                    },
+                    {
+                      "name": "endIcon",
+                      "type": "JSX.Element",
+                      "default": "",
+                      "description": "Icon to be displayed at the end of the route."
+                    },
+                    {
+                      "name": "markers",
+                      "type": "JSX.Element[]",
+                      "default": "",
+                      "description": "Array of markers to be displayed on the route."
+                    },
+                    {
+                      "name": "customData",
+                      "type": "object",
+                      "default": "",
+                      "description": "Custom data to be passed to the route."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "Route sandbox",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 6",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"Map position-relative map-type-default \" style=\"height: 300px;\"><div style=\"position: relative; width: 100%; height: 100%; overflow: hidden; -webkit-tap-highlight-color: transparent;\"><div style=\"z-index: 0; width: 100%; height: 100%; direction: ltr; position: absolute; touch-action: none;\"><canvas width=\"908\" height=\"300\" data-engine=\"three.js r152\" style=\"position: absolute; left: 0px; top: 0px; width: 908px; height: 300px;\"></canvas><canvas width=\"908\" height=\"300\" style=\"position: absolute; left: 0px; top: 0px; width: 908px; height: 300px; display: none;\"></canvas><div style=\"position: absolute; height: 100%; width: 100%; z-index: 1;\"><div style=\"position: absolute; pointer-events: none; width: 908px; height: 300px; z-index: 1;\"></div></div></div><div class=\"H_imprint\" style=\"position: absolute; bottom: 0px; right: 0px; left: 0px; z-index: 1; direction: ltr; pointer-events: none; user-select: none; font: 11px &quot;Lucida Grande&quot;, Arial, Helvetica, sans-serif;\"><div class=\"H_logo\" style=\"margin: 0px 0px 16px 16px; display: inline-block;\"><svg height=\"40\" viewBox=\"0 0 47 40\" width=\"47\" xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" fill-rule=\"evenodd\"><path d=\"m45.2054149 8.82876345.6003191.40637037-.2240425.6914074-.4490426 1.38570368c-.1024468.3148889-.6998936 1.9596297-2.43 3.5918519l-.017234.0163704c-.188617.1887407-.3801064.3659259-.5467021.5084444l-.4605319.4285185-.486383.4516296-.1407447-.0702963c-.7257447.4583704-1.4926596.7886667-2.2796809.9831852l.5840426.5864445-.6769149.6817778-2.052766 2.0636296-.169468.1704444-.019149.0192593-2.3821276 2.3958518c-.4902128.8493334-1.1202128 1.6331852-1.8497873 2.3111112-.6031915.6047407-1.2504255 1.1054814-1.935 1.4954814l-.4777659.4805186-4.3247873 4.3506666-.0296808.0298519-.0315958.0269629-2.1532978 1.8171111-.2661702.2253334h-.3485107-3.8948936l-3.968617 3.9914815-1.3547873 1.3616296-.6769148.6808148-.6769149-.6808148-1.3538298-1.3616296-4.80925535-4.837926-3.2687234-3.2875555-1.63436171-1.6437778h2.3112766 4.62255319 2.67223407l-4.71063832-4.7368148-.6769149-.6808148.6769149-.6808148 4.93851062-4.9650371.6769149-.6798518.6769149.6808148 2.7296809 2.7454074c.9363829-.8820741 2.1485106-1.4685185 3.4037234-1.6562963.278617-1.4694815 1.0187234-2.834963 2.168617-3.9885926.5696808-.572 1.1843617-1.0438519 1.8335106-1.4107407l.2901064-.2917778 4.3094681-4.31985187c.5830851-1.0582963 1.4256383-1.78918519 2.0364893-2.12718519l.4471277-.24748148c.3829787-.7617037.9047872-1.47622222 1.5539362-2.12622222 1.510851-1.51666667 3.3165957-2.31881482 5.22-2.31881482.0871276 0 .1752127.00192593.2594681.00577778 1.9484042.06933334 3.8441489.97933334 5.4775532 2.62792593.1512765.15022222.3303191.34859259.5361702.5797037l.0526595.05874074c.1120213.12518519.2345745.26192593.370532.40733334l1.2657446 1.36066666.6328724.67985185-.6548936.65866667-.2508511.25325926zm-27.9288192 22.17414815h-9.57446804l4.78723404 4.8148148zm23.1864894-21.70422223c-.9220213 1.38666663-2.5180851 3.63037033-4.1984042 1.94133333l4.2510638-4.27651851c-.3810638-.41022222-.6711702-.754-.8923404-.97740741-2.2921277-2.31207407-4.8743617-2.34192593-6.8984043-.312-1.3528723 1.35681481-1.7071277 2.91007407-1.313617 4.38533332l-1.332766-1.52629628c-.385851.21474074-2.0182979 1.65918518-.7937234 3.84703708l-1.5252127-1.274963-2.0240426 2.0299259 2.7344681 2.7502222c-2.1121277-1.6861481-4.3889362-1.5205185-6.2157447.312-1.9560638 1.9615556-1.8181915 4.3381482-.3532979 6.293926l-.295851-.2946667c-1.9321277-1.9432593-4.0318085-1.2576296-5.0706383-.2128148-.8023405.8079259-1.2944681 1.9191852-1.0924468 2.6905185l-4.195532-4.2187407-2.22893613 2.2408148 8.25893613 8.3065185h4.4339362l-2.9767021-2.9938519c-.5893908-.6029568-.9604155-1.0987731-1.1531529-1.5232627-.3182349-.7008886-.1504161-1.2073234.3230465-1.680515.7334043-.7318519 1.583617-.2763704 3.0829787 1.2277777l2.9412766 2.9562963 2.2164894-2.2292592-2.7909575-2.8060741c2.0125532 1.5291852 4.4224468 1.612 6.5728724-.545037 1.3567021-1.2653334 1.7425532-2.4565185 1.7425532-2.4565185l-1.6755319-1.1314815c-.9229788 1.3866666-2.5152128 3.6361481-4.195532 1.9461481l4.2606383-4.2851852 2.655 2.6712593 2.3160639-2.3294074-3.3223405-3.3424445c-1.5520212-1.5609629-.6328723-3.0275555.0124469-3.5793333.3025531.6442222.7448936 1.2624445 1.3078723 1.8296296 2.1485106 2.1676297 4.9260638 2.6038519 7.3685106.1550371 1.3567022-1.2643704 1.7425532-2.4565185 1.7425532-2.4565185zm-3.6564894-1.35537321-2.0211702 2.03377777c-.9890425-1.18251851-.9392553-1.81422222-.3245744-2.43051851.7439361-.7462963 1.4993617-.43044445 2.3457446.39674074zm-12.4879787 12.56088884c-.9890425-1.1825185-.9411702-1.819037-.3284042-2.4353333.7448936-.7462963 1.5003191-.4304444 2.3467021.3967408z\" fill=\"#0f1621\" fill-opacity=\".7\" style=\"fill: rgb(255, 255, 255); fill-opacity: 0.6;\"></path><path d=\"m17.2765957 31.0029116-4.787234 4.8148148-4.78723404-4.8148148zm23.1864894-21.70422223 1.6755319 1.13148153s-.385851 1.1921481-1.7425532 2.4565185c-2.4424468 2.4488148-5.22 2.0125926-7.3685106-.1550371-.5629787-.5671851-1.0053192-1.1854074-1.3078723-1.8296296-.6453192.5517778-1.5644681 2.0183704-.0124469 3.5793333l3.3223405 3.3424445-2.3160639 2.3294074-2.655-2.6712593-4.2606383 4.2851852c1.6803192 1.69 3.2725532-.5594815 4.195532-1.9461481l1.6755319 1.1314815s-.3858511 1.1911851-1.7425532 2.4565185c-2.1504256 2.157037-4.5603192 2.0742222-6.5728724.545037l2.7909575 2.8060741-2.2164894 2.2292592-2.9412766-2.9562963c-1.4993617-1.5041481-2.3495744-1.9596296-3.0829787-1.2277777-.4734626.4731916-.6412814.9796264-.3230465 1.680515.1927374.4244896.5637621.9203059 1.1531529 1.5232627l2.9767021 2.9938519h-4.4339362l-8.25893613-8.3065185 2.22893613-2.2408148 4.195532 4.2187407c-.2020213-.7713333.2901063-1.8825926 1.0924468-2.6905185 1.0388298-1.0448148 3.1385106-1.7304445 5.0706383.2128148l.295851.2946667c-1.4648936-1.9557778-1.6027659-4.3323704.3532979-6.293926 1.8268085-1.8325185 4.103617-1.9981481 6.2157447-.312l-2.7344681-2.7502222 2.0240426-2.0299259 1.5252127 1.274963c-1.2245745-2.1878519.4078724-3.63229634.7937234-3.84703708l1.332766 1.52629628c-.3935107-1.47525925-.0392553-3.02851851 1.313617-4.38533332 2.0240426-2.02992593 4.6062766-2.00007407 6.8984043.312.2211702.22340741.5112766.56718519.8923404.97740741l-4.2510638 4.27651851c1.6803191 1.689037 3.2763829-.5546667 4.1984042-1.94133333zm-16.1444681 11.20551563 2.0182979-2.0385925c-.846383-.8271852-1.6018085-1.1430371-2.3467021-.3967408-.612766.6162963-.6606383 1.2528148.3284042 2.4353333zm12.4879787-12.56088884c-.8463829-.82718519-1.6018085-1.14303704-2.3457446-.39674074-.6146809.61629629-.6644681 1.248.3245744 2.43051851z\" fill=\"#fff\" fill-opacity=\".3\" style=\"fill: rgb(15, 22, 33); fill-opacity: 0.3;\"></path></g></svg></div><div class=\"H_copyright\" style=\"right: 0px; bottom: 0px; position: absolute; background-color: rgba(255, 255, 255, 0.8); color: rgb(15, 22, 33); padding: 2px 16px;\"><a target=\"_blank\" tabindex=\"1\" href=\"https://legal.here.com/us-en/terms/here-end-user-terms\" style=\"color: inherit; margin: 0px 8px; text-decoration: none; pointer-events: all;\">Terms of use</a><span style=\"margin: 0px 8px;\">© 1987–2025 HERE</span><span style=\"margin: 0px;\"></span></div></div><div class=\"H_ui\" dir=\"ltr\"><div class=\"H_l_top H_l_left\"><div class=\"H_l_anchor H_l_horizontal\"></div><div class=\"H_l_anchor H_l_vertical\"></div></div><div class=\"H_l_top H_l_right\"><div class=\"H_l_anchor H_l_horizontal\"></div><div class=\"H_l_anchor H_l_vertical\"></div></div><div class=\"H_l_bottom H_l_left\"><div class=\"H_l_anchor H_l_vertical\"></div><div class=\"H_l_anchor H_l_horizontal\"><div class=\"H_ctl H_el H_scalebar\" title=\"Change to miles\" aria-label=\"Change to miles\" tabindex=\"0\" style=\"direction: ltr; display: none;\"><svg height=\"12\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"99\"><polyline style=\"fill:none; stroke:white; stroke-width:4\" points=\"2 2 2 10 97 10 97 2\"></polyline><polyline style=\"fill:none; stroke:black; stroke-width:2\" points=\"2 2 2 10 97 10 97 2\"></polyline></svg><div style=\"padding: 0 0 0 10px\">10 km</div></div></div></div><div class=\"H_l_bottom H_l_right\"><div class=\"H_l_anchor H_l_vertical\"></div><div class=\"H_l_anchor H_l_horizontal\"><div class=\"H_ctl H_el\" tabindex=\"-1\" style=\"display: none;\"><div class=\"H_btn H_el\" title=\"Choose view\" aria-label=\"Choose view\" tabindex=\"0\"><svg xmlns=\"http://www.w3.org/2000/svg\" class=\"H_icon\" viewBox=\"0 0 24 24\"><path fill-rule=\"evenodd\" d=\"M6.7,14.6 L4.5,16 L12,20.6 L19.5,16 L17.3,14.6 L19.1,13.5 L23,16 L12,23 L1,16 L4.9,13.5 L6.7,14.6 Z M12,2 L23,9 L12,16 L1,9 L12,2 Z\"></path></svg></div><div class=\"H_overlay H_el\" tabindex=\"-1\"><div class=\"H_rdo H_el\" tabindex=\"-1\"><div class=\"H_rdo_title H_el\" tabindex=\"-1\">Choose view</div><div class=\"H_rdo_buttons H_el\" tabindex=\"-1\"><div class=\"H_btn H_el H_active\" tabindex=\"-1\">Map view</div><div class=\"H_btn H_el\" tabindex=\"-1\">Satellite</div></div></div><div class=\"H_separator H_el\" tabindex=\"-1\"></div><div class=\"H_grp H_el\" tabindex=\"-1\"><div class=\"H_btn H_el\" tabindex=\"-1\">Traffic conditions</div><div class=\"H_btn H_el\" tabindex=\"-1\">Show traffic incidents</div></div></div></div></div></div><div class=\"H_l_anchor H_l_top H_l_center H_l_horizontal\" style=\"margin-left: 0px;\"></div><div class=\"H_l_anchor H_l_left H_l_middle H_l_vertical\" style=\"margin-top: 0px;\"></div><div class=\"H_l_anchor H_l_right H_l_middle H_l_vertical\" style=\"margin-top: 0px;\"></div><div class=\"H_l_anchor H_l_bottom H_l_center H_l_horizontal\" style=\"margin-left: 0px;\"></div></div></div><div class=\"ZoomButtons\"><div class=\"MapSettingsTile\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" class=\"display-block hover-scale-110\"><path fill=\"#A7AFBB\" d=\"M9.5 1v5.5H15v3H9.5V15h-3V9.5H1v-3h5.5V1z\"></path></svg></div><div class=\"MapSettingsTileSpacer\"></div><div class=\"MapSettingsTile\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" class=\"display-block hover-scale-110\"><path fill=\"#A7AFBB\" d=\"M7.177 9.5H1v-3h14v3H8.823z\"></path></svg></div></div><div class=\"MapSettingsWrapper\"><div class=\"MapSettingsTile MapTypeSettings\"><div class=\"MapSettingsTile-inner position-relative\"><div class=\"MapSettingsButton\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" class=\"MapSettingsTileIcon hover-scale-110 display-block\"><g fill=\"none\" fill-rule=\"evenodd\"><path fill=\"#939BA8\" d=\"m20 12.451 19.98 11.322L20 35.095.02 23.773l11.052-6.262a4.85 4.85 0 0 0 1.13.484l-2.775 1.572c0-.002 3.353 1.922 3.353 1.922l3.353-1.924-2.446-1.384c.16-.005.32-.019.478-.04l2.222 1.274 3.354-1.924-2.296-1.3c.07-.097.138-.197.202-.3l2.235 1.28.147.085.052.03 3.352-1.924-3.353-1.9-1.854 1.052c.095-.38.142-.762.144-1.139l1.63-.924Zm-.093 17.57-3.353 1.9 3.353 1.922 3.354-1.924-3.354-1.899Zm3.746-2.05-3.353 1.9 3.354 1.922 3.353-1.924-3.354-1.899Zm-7.383-.026-3.353 1.9 3.353 1.923 3.353-1.924-3.353-1.899Zm-3.636-2.04-3.353 1.9c0-.002 3.353 1.923 3.353 1.923l3.353-1.925-3.353-1.898Zm7.383-.01-3.353 1.901c0-.002 3.353 1.922 3.353 1.922l3.353-1.924-3.353-1.9Zm7.287-.015-3.353 1.9 3.353 1.923 3.353-1.924-3.353-1.899ZM9 23.868l-3.354 1.9L9 27.691l3.353-1.924L9 23.868Zm7.381-.013-3.353 1.9 3.353 1.923 3.353-1.924-3.353-1.899Zm14.53-.049-3.353 1.9c0-.002 3.353 1.923 3.353 1.923l3.353-1.925-3.353-1.898Zm-7.244 0-3.353 1.9 3.353 1.922 3.353-1.924-3.353-1.899Zm-10.92-1.988-3.354 1.9 3.354 1.923 3.353-1.924-3.353-1.899Zm-7.364-.013L2.03 23.707c0-.002 3.353 1.922 3.353 1.922l3.354-1.924-3.354-1.9Zm14.648-.04-3.353 1.9c0-.002 3.353 1.923 3.353 1.923l3.353-1.924-3.353-1.9Zm7.243-.034-3.353 1.9 3.353 1.923 3.353-1.924-3.353-1.899Zm7.33-.055-3.353 1.901c0-.002 3.353 1.922 3.353 1.922l3.353-1.924-3.353-1.899ZM9.13 19.756l-3.353 1.901c0-.002 3.353 1.922 3.353 1.922l3.354-1.924-3.354-1.9Zm7.266-.028-3.353 1.9 3.353 1.923 3.353-1.924-3.353-1.899Zm7.242-.038-3.353 1.901c0-.002 3.353 1.923 3.353 1.923l3.353-1.924-3.353-1.9Zm7.329-.089-3.353 1.901c0-.002 3.353 1.922 3.353 1.922l3.353-1.923-3.353-1.9Zm-10.964-1.948-3.353 1.9 3.353 1.924 3.354-1.925-3.354-1.899Zm7.328-.093-3.353 1.902c0-.002 3.353 1.922 3.353 1.922l3.353-1.924-3.353-1.9Zm-3.635-2.036-3.353 1.901c0-.002 3.353 1.922 3.353 1.922l3.354-1.924-3.354-1.899Z\"></path><path fill=\"#C9CDD3\" d=\"M8.403 15.762c.15.282.05.632-.227.792l-1.392.74a.584.584 0 0 1-.45.044.593.593 0 0 1-.105-1.09l1.39-.74a.592.592 0 0 1 .784.254ZM14.7 9.09a4.15 4.15 0 1 1-2.427 7.939 4.15 4.15 0 0 1 2.427-7.94Zm-6.333 1.784a.593.593 0 1 1-.347 1.134l-2.269-.693a.602.602 0 0 1-.393-.74c.1-.31.428-.485.74-.394l2.269.693ZM20.99 9.07a.593.593 0 0 1-.245.801l-1.392.74a.587.587 0 0 1-.452.044.564.564 0 0 1-.35-.289.586.586 0 0 1 .245-.801l1.392-.74a.593.593 0 0 1 .802.245ZM9.95 5.497c.153.05.279.16.35.304l.74 1.392a.588.588 0 0 1-.246.802.564.564 0 0 1-.451.044.587.587 0 0 1-.35-.29l-.74-1.392a.595.595 0 0 1 .235-.82.595.595 0 0 1 .462-.04Zm6.023-.566c.313.096.489.428.393.74l-.693 2.269a.593.593 0 1 1-1.134-.347l.693-2.268a.593.593 0 0 1 .74-.394ZM29.571 9.467a.791.791 0 0 0-.4.1.88.88 0 0 0 .067-.35c0-.55-.4-1-.89-1-.2 0-.355.075-.51.175-.222-.975-1-1.675-1.934-1.675-1.11 0-2 1-2 2.25 0 .1 0 .2.022.275-.088-.025-.155-.025-.244-.025-.622 0-1.111.55-1.111 1.25s.489 1.25 1.111 1.25h5.889c.555 0 1-.5 1-1.125s-.445-1.125-1-1.125ZM30.446 14.917c.117 0 .233.02.35.08a.652.652 0 0 1-.058-.28c0-.44.35-.8.777-.8a.85.85 0 0 1 .448.14c.194-.78.875-1.34 1.691-1.34.973 0 1.75.8 1.75 1.8 0 .08 0 .16-.019.22.078-.02.136-.02.214-.02.544 0 .972.44.972 1s-.428 1-.972 1h-5.153a.884.884 0 0 1-.875-.9c0-.462.331-.838.765-.893l.11-.007Z\"></path></g></svg></div><div class=\"dropdown\"></div></div></div></div><div class=\"MapElements\"></div></div><div class=\"padding-top-10\"><div class=\"form-group margin-0 \"><textarea class=\"form-control width-100pct\" rows=\"10\">{\n    \"segments\": [\n        {\n            \"points\": [\n                {\n                    \"lat\": 48.17933,\n                    \"lng\": 11.48731\n                },\n                {\n                    \"lat\": 48.17937,\n                    \"lng\": 11.4875\n                },\n                {\n                    \"lat\": 48.17939,\n                    \"lng\": 11.48767\n                },\n                {\n                    \"lat\": 48.17941,\n                    \"lng\": 11.4879\n                },\n                {\n                    \"lat\": 48.17942,\n                    \"lng\": 11.48826\n                },\n                {\n                    \"lat\": 48.17942,\n                    \"lng\": 11.48867\n                },\n                {\n                    \"lat\": 48.17941,\n                    \"lng\": 11.48924\n                },\n                {\n                    \"lat\": 48.1794,\n                    \"lng\": 11.48959\n                },\n                {\n                    \"lat\": 48.17939,\n                    \"lng\": 11.48999\n                },\n                {\n                    \"lat\": 48.17936,\n                    \"lng\": 11.4904\n                },\n                {\n                    \"lat\": 48.17933,\n                    \"lng\": 11.4906\n                },\n                {\n                    \"lat\": 48.17927,\n                    \"lng\": 11.49095\n                },\n                {\n                    \"lat\": 48.17915,\n                    \"lng\": 11.49154\n                },\n                {\n                    \"lat\": 48.17895,\n                    \"lng\": 11.49235\n                },\n                {\n                    \"lat\": 48.1788,\n                    \"lng\": 11.49283\n                },\n                {\n                    \"lat\": 48.17869,\n                    \"lng\": 11.49314\n                },\n                {\n                    \"lat\": 48.17856,\n                    \"lng\": 11.49346\n                },\n                {\n                    \"lat\": 48.17843,\n                    \"lng\": 11.49376\n                },\n                {\n                    \"lat\": 48.17828,\n                    \"lng\": 11.49413\n                },\n                {\n                    \"lat\": 48.17813,\n                    \"lng\": 11.49445\n                },\n                {\n                    \"lat\": 48.17797,\n                    \"lng\": 11.49479\n                },\n                {\n                    \"lat\": 48.1778,\n                    \"lng\": 11.49521\n                },\n                {\n                    \"lat\": 48.17775,\n                    \"lng\": 11.49538\n                },\n                {\n                    \"lat\": 48.17769,\n                    \"lng\": 11.49551\n                },\n                {\n                    \"lat\": 48.17757,\n                    \"lng\": 11.49576\n                },\n                {\n                    \"lat\": 48.17752,\n                    \"lng\": 11.49586\n                },\n                {\n                    \"lat\": 48.17748,\n                    \"lng\": 11.49595\n                },\n                {\n                    \"lat\": 48.17744,\n                    \"lng\": 11.49604\n                },\n                {\n                    \"lat\": 48.17735,\n                    \"lng\": 11.49622\n                },\n                {\n                    \"lat\": 48.17722,\n                    \"lng\": 11.49649\n                },\n                {\n                    \"lat\": 48.17701,\n                    \"lng\": 11.49692\n                },\n                {\n                    \"lat\": 48.177,\n                    \"lng\": 11.49695\n                },\n                {\n                    \"lat\": 48.17698,\n                    \"lng\": 11.49699\n                },\n                {\n                    \"lat\": 48.1767,\n                    \"lng\": 11.49758\n                },\n                {\n                    \"lat\": 48.1758,\n                    \"lng\": 11.49944\n                },\n                {\n                    \"lat\": 48.17572,\n                    \"lng\": 11.4996\n                },\n                {\n                    \"lat\": 48.17538,\n                    \"lng\": 11.50031\n                },\n                {\n                    \"lat\": 48.17523,\n                    \"lng\": 11.50061\n                },\n                {\n                    \"lat\": 48.17519,\n                    \"lng\": 11.50069\n                },\n                {\n                    \"lat\": 48.17513,\n                    \"lng\": 11.50081\n                },\n                {\n                    \"lat\": 48.17495,\n                    \"lng\": 11.50117\n                },\n                {\n                    \"lat\": 48.17468,\n                    \"lng\": 11.50171\n                },\n                {\n                    \"lat\": 48.17449,\n                    \"lng\": 11.50205\n                },\n                {\n                    \"lat\": 48.17431,\n                    \"lng\": 11.50234\n                },\n                {\n                    \"lat\": 48.17418,\n                    \"lng\": 11.50254\n                },\n                {\n                    \"lat\": 48.17405,\n                    \"lng\": 11.5027\n                },\n                {\n                    \"lat\": 48.17346,\n                    \"lng\": 11.5035\n                },\n                {\n                    \"lat\": 48.173,\n                    \"lng\": 11.50416\n                },\n                {\n                    \"lat\": 48.17276,\n                    \"lng\": 11.50448\n                },\n                {\n                    \"lat\": 48.17253,\n                    \"lng\": 11.50482\n                },\n                {\n                    \"lat\": 48.17237,\n                    \"lng\": 11.50509\n                },\n                {\n                    \"lat\": 48.17223,\n                    \"lng\": 11.50536\n                },\n                {\n                    \"lat\": 48.1721,\n                    \"lng\": 11.50564\n                },\n                {\n                    \"lat\": 48.17188,\n                    \"lng\": 11.50614\n                },\n                {\n                    \"lat\": 48.17169,\n                    \"lng\": 11.50658\n                },\n                {\n                    \"lat\": 48.17128,\n                    \"lng\": 11.50753\n                },\n                {\n                    \"lat\": 48.17117,\n                    \"lng\": 11.50777\n                },\n                {\n                    \"lat\": 48.17095,\n                    \"lng\": 11.50828\n                },\n                {\n                    \"lat\": 48.1709,\n                    \"lng\": 11.50838\n                },\n                {\n                    \"lat\": 48.17076,\n                    \"lng\": 11.50871\n                },\n                {\n                    \"lat\": 48.17057,\n                    \"lng\": 11.50922\n                },\n                {\n                    \"lat\": 48.17051,\n                    \"lng\": 11.50938\n                },\n                {\n                    \"lat\": 48.17042,\n                    \"lng\": 11.50953\n                },\n                {\n                    \"lat\": 48.17032,\n                    \"lng\": 11.50976\n                },\n                {\n                    \"lat\": 48.17022,\n                    \"lng\": 11.50999\n                },\n                {\n                    \"lat\": 48.17014,\n                    \"lng\": 11.51017\n                },\n                {\n                    \"lat\": 48.17007,\n                    \"lng\": 11.51029\n                },\n                {\n                    \"lat\": 48.16999,\n                    \"lng\": 11.51044\n                },\n                {\n                    \"lat\": 48.16993,\n                    \"lng\": 11.51055\n                },\n                {\n                    \"lat\": 48.16985,\n                    \"lng\": 11.51069\n                },\n                {\n                    \"lat\": 48.1698,\n                    \"lng\": 11.51078\n                },\n                {\n                    \"lat\": 48.16976,\n                    \"lng\": 11.51086\n                },\n                {\n                    \"lat\": 48.16984,\n                    \"lng\": 11.5109\n                },\n                {\n                    \"lat\": 48.16991,\n                    \"lng\": 11.51093\n                },\n                {\n                    \"lat\": 48.17003,\n                    \"lng\": 11.51097\n                },\n                {\n                    \"lat\": 48.17015,\n                    \"lng\": 11.51099\n                },\n                {\n                    \"lat\": 48.1703,\n                    \"lng\": 11.511\n                },\n                {\n                    \"lat\": 48.17048,\n                    \"lng\": 11.51104\n                },\n                {\n                    \"lat\": 48.17068,\n                    \"lng\": 11.5111\n                },\n                {\n                    \"lat\": 48.17093,\n                    \"lng\": 11.51118\n                },\n                {\n                    \"lat\": 48.17112,\n                    \"lng\": 11.51124\n                },\n                {\n                    \"lat\": 48.17131,\n                    \"lng\": 11.51131\n                },\n                {\n                    \"lat\": 48.1715,\n                    \"lng\": 11.51139\n                },\n                {\n                    \"lat\": 48.17165,\n                    \"lng\": 11.51147\n                },\n                {\n                    \"lat\": 48.17179,\n                    \"lng\": 11.51156\n                },\n                {\n                    \"lat\": 48.17192,\n                    \"lng\": 11.51166\n                },\n                {\n                    \"lat\": 48.17205,\n                    \"lng\": 11.51178\n                },\n                {\n                    \"lat\": 48.17219,\n                    \"lng\": 11.51192\n                },\n                {\n                    \"lat\": 48.17232,\n                    \"lng\": 11.51206\n                },\n                {\n                    \"lat\": 48.17242,\n                    \"lng\": 11.51219\n                },\n                {\n                    \"lat\": 48.17251,\n                    \"lng\": 11.51234\n                },\n                {\n                    \"lat\": 48.17261,\n                    \"lng\": 11.5125\n                },\n                {\n                    \"lat\": 48.1727,\n                    \"lng\": 11.51268\n                },\n                {\n                    \"lat\": 48.17279,\n                    \"lng\": 11.51287\n                },\n                {\n                    \"lat\": 48.17294,\n                    \"lng\": 11.51328\n                },\n                {\n                    \"lat\": 48.17304,\n                    \"lng\": 11.51362\n                },\n                {\n                    \"lat\": 48.17307,\n                    \"lng\": 11.51373\n                },\n                {\n                    \"lat\": 48.17315,\n                    \"lng\": 11.51402\n                },\n                {\n                    \"lat\": 48.17333,\n                    \"lng\": 11.51476\n                },\n                {\n                    \"lat\": 48.17341,\n                    \"lng\": 11.51511\n                },\n                {\n                    \"lat\": 48.17365,\n                    \"lng\": 11.51612\n                },\n                {\n                    \"lat\": 48.17394,\n                    \"lng\": 11.51727\n                },\n                {\n                    \"lat\": 48.1741,\n                    \"lng\": 11.51791\n                },\n                {\n                    \"lat\": 48.17416,\n                    \"lng\": 11.51819\n                },\n                {\n                    \"lat\": 48.17433,\n                    \"lng\": 11.51893\n                },\n                {\n                    \"lat\": 48.17438,\n                    \"lng\": 11.51911\n                },\n                {\n                    \"lat\": 48.17453,\n                    \"lng\": 11.51968\n                },\n                {\n                    \"lat\": 48.17465,\n                    \"lng\": 11.52003\n                },\n                {\n                    \"lat\": 48.17469,\n                    \"lng\": 11.52013\n                },\n                {\n                    \"lat\": 48.17477,\n                    \"lng\": 11.52031\n                },\n                {\n                    \"lat\": 48.17488,\n                    \"lng\": 11.52056\n                },\n                {\n                    \"lat\": 48.17501,\n                    \"lng\": 11.52084\n                },\n                {\n                    \"lat\": 48.17509,\n                    \"lng\": 11.52099\n                },\n                {\n                    \"lat\": 48.1754,\n                    \"lng\": 11.52154\n                },\n                {\n                    \"lat\": 48.17541,\n                    \"lng\": 11.52171\n                },\n                {\n                    \"lat\": 48.17542,\n                    \"lng\": 11.52198\n                },\n                {\n                    \"lat\": 48.17541,\n                    \"lng\": 11.52245\n                },\n                {\n                    \"lat\": 48.17517,\n                    \"lng\": 11.52292\n                },\n                {\n                    \"lat\": 48.17478,\n                    \"lng\": 11.52371\n                },\n                {\n                    \"lat\": 48.17462,\n                    \"lng\": 11.52403\n                },\n                {\n                    \"lat\": 48.17455,\n                    \"lng\": 11.52416\n                },\n                {\n                    \"lat\": 48.17451,\n                    \"lng\": 11.52425\n                },\n                {\n                    \"lat\": 48.17442,\n                    \"lng\": 11.52442\n                },\n                {\n                    \"lat\": 48.17421,\n                    \"lng\": 11.52483\n                },\n                {\n                    \"lat\": 48.17412,\n                    \"lng\": 11.52499\n                },\n                {\n                    \"lat\": 48.17388,\n                    \"lng\": 11.52544\n                },\n                {\n                    \"lat\": 48.17376,\n                    \"lng\": 11.52567\n                },\n                {\n                    \"lat\": 48.17353,\n                    \"lng\": 11.52614\n                },\n                {\n                    \"lat\": 48.17317,\n                    \"lng\": 11.52684\n                },\n                {\n                    \"lat\": 48.17299,\n                    \"lng\": 11.52719\n                },\n                {\n                    \"lat\": 48.17267,\n                    \"lng\": 11.52782\n                },\n                {\n                    \"lat\": 48.17262,\n                    \"lng\": 11.52792\n                },\n                {\n                    \"lat\": 48.17246,\n                    \"lng\": 11.52824\n                },\n                {\n                    \"lat\": 48.17225,\n                    \"lng\": 11.52861\n                },\n                {\n                    \"lat\": 48.17219,\n                    \"lng\": 11.52872\n                },\n                {\n                    \"lat\": 48.17214,\n                    \"lng\": 11.52882\n                },\n                {\n                    \"lat\": 48.17189,\n                    \"lng\": 11.52926\n                },\n                {\n                    \"lat\": 48.17187,\n                    \"lng\": 11.5293\n                },\n                {\n                    \"lat\": 48.1715,\n                    \"lng\": 11.52995\n                },\n                {\n                    \"lat\": 48.17132,\n                    \"lng\": 11.53026\n                },\n                {\n                    \"lat\": 48.17127,\n                    \"lng\": 11.53034\n                },\n                {\n                    \"lat\": 48.17103,\n                    \"lng\": 11.53075\n                },\n                {\n                    \"lat\": 48.17073,\n                    \"lng\": 11.53125\n                },\n                {\n                    \"lat\": 48.17028,\n                    \"lng\": 11.53194\n                },\n                {\n                    \"lat\": 48.17017,\n                    \"lng\": 11.53211\n                },\n                {\n                    \"lat\": 48.16982,\n                    \"lng\": 11.53266\n                },\n                {\n                    \"lat\": 48.16976,\n                    \"lng\": 11.53277\n                },\n                {\n                    \"lat\": 48.16939,\n                    \"lng\": 11.53331\n                },\n                {\n                    \"lat\": 48.16885,\n                    \"lng\": 11.53418\n                },\n                {\n                    \"lat\": 48.16872,\n                    \"lng\": 11.53437\n                },\n                {\n                    \"lat\": 48.16822,\n                    \"lng\": 11.5351\n                },\n                {\n                    \"lat\": 48.16809,\n                    \"lng\": 11.5353\n                },\n                {\n                    \"lat\": 48.16791,\n                    \"lng\": 11.53554\n                },\n                {\n                    \"lat\": 48.16785,\n                    \"lng\": 11.53562\n                },\n                {\n                    \"lat\": 48.16774,\n                    \"lng\": 11.53577\n                },\n                {\n                    \"lat\": 48.16761,\n                    \"lng\": 11.53593\n                },\n                {\n                    \"lat\": 48.16745,\n                    \"lng\": 11.53612\n                },\n                {\n                    \"lat\": 48.16714,\n                    \"lng\": 11.53644\n                },\n                {\n                    \"lat\": 48.167,\n                    \"lng\": 11.53659\n                },\n                {\n                    \"lat\": 48.16695,\n                    \"lng\": 11.53664\n                },\n                {\n                    \"lat\": 48.16688,\n                    \"lng\": 11.53671\n                },\n                {\n                    \"lat\": 48.16653,\n                    \"lng\": 11.53704\n                },\n                {\n                    \"lat\": 48.1659,\n                    \"lng\": 11.53768\n                },\n                {\n                    \"lat\": 48.16578,\n                    \"lng\": 11.53781\n                },\n                {\n                    \"lat\": 48.16564,\n                    \"lng\": 11.53796\n                },\n                {\n                    \"lat\": 48.1655,\n                    \"lng\": 11.53812\n                },\n                {\n                    \"lat\": 48.16513,\n                    \"lng\": 11.53854\n                },\n                {\n                    \"lat\": 48.16487,\n                    \"lng\": 11.53887\n                },\n                {\n                    \"lat\": 48.16472,\n                    \"lng\": 11.53908\n                },\n                {\n                    \"lat\": 48.1644,\n                    \"lng\": 11.53958\n                },\n                {\n                    \"lat\": 48.16432,\n                    \"lng\": 11.53971\n                },\n                {\n                    \"lat\": 48.16369,\n                    \"lng\": 11.54072\n                },\n                {\n                    \"lat\": 48.16354,\n                    \"lng\": 11.54097\n                },\n                {\n                    \"lat\": 48.16328,\n                    \"lng\": 11.54138\n                },\n                {\n                    \"lat\": 48.16281,\n                    \"lng\": 11.54216\n                },\n                {\n                    \"lat\": 48.16231,\n                    \"lng\": 11.54299\n                },\n                {\n                    \"lat\": 48.16185,\n                    \"lng\": 11.54381\n                },\n                {\n                    \"lat\": 48.16127,\n                    \"lng\": 11.54476\n                },\n                {\n                    \"lat\": 48.16115,\n                    \"lng\": 11.54496\n                },\n                {\n                    \"lat\": 48.16097,\n                    \"lng\": 11.54525\n                },\n                {\n                    \"lat\": 48.16073,\n                    \"lng\": 11.54561\n                },\n                {\n                    \"lat\": 48.16056,\n                    \"lng\": 11.54587\n                },\n                {\n                    \"lat\": 48.16029,\n                    \"lng\": 11.54625\n                },\n                {\n                    \"lat\": 48.16014,\n                    \"lng\": 11.54644\n                },\n                {\n                    \"lat\": 48.15994,\n                    \"lng\": 11.54668\n                },\n                {\n                    \"lat\": 48.15979,\n                    \"lng\": 11.54683\n                },\n                {\n                    \"lat\": 48.15969,\n                    \"lng\": 11.54693\n                },\n                {\n                    \"lat\": 48.15958,\n                    \"lng\": 11.54707\n                },\n                {\n                    \"lat\": 48.15947,\n                    \"lng\": 11.54721\n                },\n                {\n                    \"lat\": 48.15933,\n                    \"lng\": 11.54737\n                },\n                {\n                    \"lat\": 48.15902,\n                    \"lng\": 11.54779\n                },\n                {\n                    \"lat\": 48.15882,\n                    \"lng\": 11.54804\n                },\n                {\n                    \"lat\": 48.15811,\n                    \"lng\": 11.54893\n                },\n                {\n                    \"lat\": 48.15794,\n                    \"lng\": 11.54914\n                },\n                {\n                    \"lat\": 48.15734,\n                    \"lng\": 11.54987\n                },\n                {\n                    \"lat\": 48.15605,\n                    \"lng\": 11.55145\n                },\n                {\n                    \"lat\": 48.15531,\n                    \"lng\": 11.55236\n                },\n                {\n                    \"lat\": 48.15523,\n                    \"lng\": 11.55246\n                },\n                {\n                    \"lat\": 48.15422,\n                    \"lng\": 11.55378\n                },\n                {\n                    \"lat\": 48.15389,\n                    \"lng\": 11.55422\n                },\n                {\n                    \"lat\": 48.15342,\n                    \"lng\": 11.55479\n                },\n                {\n                    \"lat\": 48.15274,\n                    \"lng\": 11.55563\n                },\n                {\n                    \"lat\": 48.1521,\n                    \"lng\": 11.55639\n                },\n                {\n                    \"lat\": 48.15167,\n                    \"lng\": 11.5569\n                },\n                {\n                    \"lat\": 48.15153,\n                    \"lng\": 11.55707\n                },\n                {\n                    \"lat\": 48.15131,\n                    \"lng\": 11.55733\n                },\n                {\n                    \"lat\": 48.15102,\n                    \"lng\": 11.55766\n                },\n                {\n                    \"lat\": 48.1509,\n                    \"lng\": 11.55778\n                },\n                {\n                    \"lat\": 48.15085,\n                    \"lng\": 11.55771\n                },\n                {\n                    \"lat\": 48.15077,\n                    \"lng\": 11.55763\n                },\n                {\n                    \"lat\": 48.15061,\n                    \"lng\": 11.55751\n                },\n                {\n                    \"lat\": 48.15043,\n                    \"lng\": 11.55736\n                },\n                {\n                    \"lat\": 48.15036,\n                    \"lng\": 11.55733\n                },\n                {\n                    \"lat\": 48.15033,\n                    \"lng\": 11.55733\n                },\n                {\n                    \"lat\": 48.15029,\n                    \"lng\": 11.55735\n                },\n                {\n                    \"lat\": 48.15026,\n                    \"lng\": 11.55737\n                },\n                {\n                    \"lat\": 48.15023,\n                    \"lng\": 11.55742\n                },\n                {\n                    \"lat\": 48.15021,\n                    \"lng\": 11.55746\n                },\n                {\n                    \"lat\": 48.15021,\n                    \"lng\": 11.55753\n                },\n                {\n                    \"lat\": 48.15024,\n                    \"lng\": 11.55783\n                },\n                {\n                    \"lat\": 48.15027,\n                    \"lng\": 11.55813\n                },\n                {\n                    \"lat\": 48.15028,\n                    \"lng\": 11.55824\n                },\n                {\n                    \"lat\": 48.15028,\n                    \"lng\": 11.55836\n                },\n                {\n                    \"lat\": 48.15027,\n                    \"lng\": 11.55848\n                },\n                {\n                    \"lat\": 48.15023,\n                    \"lng\": 11.55868\n                },\n                {\n                    \"lat\": 48.1502,\n                    \"lng\": 11.55881\n                },\n                {\n                    \"lat\": 48.15017,\n                    \"lng\": 11.55891\n                },\n                {\n                    \"lat\": 48.14997,\n                    \"lng\": 11.55967\n                },\n                {\n                    \"lat\": 48.14985,\n                    \"lng\": 11.5601\n                },\n                {\n                    \"lat\": 48.14919,\n                    \"lng\": 11.56242\n                },\n                {\n                    \"lat\": 48.14908,\n                    \"lng\": 11.56282\n                },\n                {\n                    \"lat\": 48.14906,\n                    \"lng\": 11.56288\n                },\n                {\n                    \"lat\": 48.14873,\n                    \"lng\": 11.56403\n                },\n                {\n                    \"lat\": 48.14858,\n                    \"lng\": 11.56455\n                },\n                {\n                    \"lat\": 48.14845,\n                    \"lng\": 11.56501\n                },\n                {\n                    \"lat\": 48.14833,\n                    \"lng\": 11.56545\n                },\n                {\n                    \"lat\": 48.14821,\n                    \"lng\": 11.56587\n                },\n                {\n                    \"lat\": 48.14804,\n                    \"lng\": 11.5665\n                },\n                {\n                    \"lat\": 48.14793,\n                    \"lng\": 11.56688\n                },\n                {\n                    \"lat\": 48.14791,\n                    \"lng\": 11.56696\n                },\n                {\n                    \"lat\": 48.14782,\n                    \"lng\": 11.56726\n                },\n                {\n                    \"lat\": 48.1476,\n                    \"lng\": 11.56804\n                },\n                {\n                    \"lat\": 48.14755,\n                    \"lng\": 11.56823\n                },\n                {\n                    \"lat\": 48.14752,\n                    \"lng\": 11.56834\n                },\n                {\n                    \"lat\": 48.14725,\n                    \"lng\": 11.56927\n                },\n                {\n                    \"lat\": 48.14702,\n                    \"lng\": 11.5701\n                },\n                {\n                    \"lat\": 48.14695,\n                    \"lng\": 11.57037\n                },\n                {\n                    \"lat\": 48.14689,\n                    \"lng\": 11.57057\n                },\n                {\n                    \"lat\": 48.14631,\n                    \"lng\": 11.57269\n                },\n                {\n                    \"lat\": 48.14623,\n                    \"lng\": 11.57297\n                },\n                {\n                    \"lat\": 48.14607,\n                    \"lng\": 11.5732\n                },\n                {\n                    \"lat\": 48.14596,\n                    \"lng\": 11.57336\n                },\n                {\n                    \"lat\": 48.14587,\n                    \"lng\": 11.57355\n                },\n                {\n                    \"lat\": 48.14585,\n                    \"lng\": 11.57359\n                },\n                {\n                    \"lat\": 48.14577,\n                    \"lng\": 11.57378\n                },\n                {\n                    \"lat\": 48.14566,\n                    \"lng\": 11.57413\n                },\n                {\n                    \"lat\": 48.14562,\n                    \"lng\": 11.57426\n                },\n                {\n                    \"lat\": 48.14555,\n                    \"lng\": 11.57433\n                },\n                {\n                    \"lat\": 48.14552,\n                    \"lng\": 11.57439\n                },\n                {\n                    \"lat\": 48.14549,\n                    \"lng\": 11.57447\n                },\n                {\n                    \"lat\": 48.14546,\n                    \"lng\": 11.5746\n                },\n                {\n                    \"lat\": 48.14541,\n                    \"lng\": 11.57482\n                },\n                {\n                    \"lat\": 48.14538,\n                    \"lng\": 11.57501\n                },\n                {\n                    \"lat\": 48.14537,\n                    \"lng\": 11.57518\n                },\n                {\n                    \"lat\": 48.14539,\n                    \"lng\": 11.57552\n                },\n                {\n                    \"lat\": 48.14544,\n                    \"lng\": 11.57592\n                },\n                {\n                    \"lat\": 48.14546,\n                    \"lng\": 11.57626\n                },\n                {\n                    \"lat\": 48.14549,\n                    \"lng\": 11.57667\n                },\n                {\n                    \"lat\": 48.14551,\n                    \"lng\": 11.57702\n                },\n                {\n                    \"lat\": 48.14551,\n                    \"lng\": 11.57722\n                },\n                {\n                    \"lat\": 48.14551,\n                    \"lng\": 11.57737\n                },\n                {\n                    \"lat\": 48.14551,\n                    \"lng\": 11.57746\n                },\n                {\n                    \"lat\": 48.1455,\n                    \"lng\": 11.57762\n                },\n                {\n                    \"lat\": 48.14549,\n                    \"lng\": 11.57768\n                },\n                {\n                    \"lat\": 48.14547,\n                    \"lng\": 11.5778\n                },\n                {\n                    \"lat\": 48.14537,\n                    \"lng\": 11.57825\n                },\n                {\n                    \"lat\": 48.14525,\n                    \"lng\": 11.57878\n                },\n                {\n                    \"lat\": 48.14486,\n                    \"lng\": 11.57861\n                },\n                {\n                    \"lat\": 48.14467,\n                    \"lng\": 11.57852\n                },\n                {\n                    \"lat\": 48.14428,\n                    \"lng\": 11.57833\n                },\n                {\n                    \"lat\": 48.14411,\n                    \"lng\": 11.57825\n                },\n                {\n                    \"lat\": 48.14389,\n                    \"lng\": 11.57814\n                },\n                {\n                    \"lat\": 48.14357,\n                    \"lng\": 11.57799\n                },\n                {\n                    \"lat\": 48.1433,\n                    \"lng\": 11.57787\n                },\n                {\n                    \"lat\": 48.14318,\n                    \"lng\": 11.57782\n                },\n                {\n                    \"lat\": 48.14304,\n                    \"lng\": 11.57776\n                },\n                {\n                    \"lat\": 48.14263,\n                    \"lng\": 11.57752\n                },\n                {\n                    \"lat\": 48.14258,\n                    \"lng\": 11.57772\n                },\n                {\n                    \"lat\": 48.14244,\n                    \"lng\": 11.57771\n                },\n                {\n                    \"lat\": 48.14237,\n                    \"lng\": 11.57791\n                },\n                {\n                    \"lat\": 48.14244,\n                    \"lng\": 11.57771\n                },\n                {\n                    \"lat\": 48.14258,\n                    \"lng\": 11.57772\n                },\n                {\n                    \"lat\": 48.14251,\n                    \"lng\": 11.57804\n                },\n                {\n                    \"lat\": 48.14249,\n                    \"lng\": 11.57811\n                },\n                {\n                    \"lat\": 48.14241,\n                    \"lng\": 11.57837\n                },\n                {\n                    \"lat\": 48.14234,\n                    \"lng\": 11.57869\n                },\n                {\n                    \"lat\": 48.14222,\n                    \"lng\": 11.57923\n                },\n                {\n                    \"lat\": 48.14208,\n                    \"lng\": 11.57917\n                },\n                {\n                    \"lat\": 48.14193,\n                    \"lng\": 11.57996\n                },\n                {\n                    \"lat\": 48.14182,\n                    \"lng\": 11.58051\n                },\n                {\n                    \"lat\": 48.14166,\n                    \"lng\": 11.58118\n                },\n                {\n                    \"lat\": 48.14151,\n                    \"lng\": 11.58122\n                },\n                {\n                    \"lat\": 48.14122,\n                    \"lng\": 11.58107\n                },\n                {\n                    \"lat\": 48.1408,\n                    \"lng\": 11.58089\n                },\n                {\n                    \"lat\": 48.14029,\n                    \"lng\": 11.58068\n                },\n                {\n                    \"lat\": 48.1401,\n                    \"lng\": 11.58061\n                },\n                {\n                    \"lat\": 48.13995,\n                    \"lng\": 11.58055\n                },\n                {\n                    \"lat\": 48.13937,\n                    \"lng\": 11.58033\n                },\n                {\n                    \"lat\": 48.1391,\n                    \"lng\": 11.58025\n                },\n                {\n                    \"lat\": 48.13916,\n                    \"lng\": 11.57996\n                },\n                {\n                    \"lat\": 48.13878,\n                    \"lng\": 11.57965\n                },\n                {\n                    \"lat\": 48.13871,\n                    \"lng\": 11.57983\n                },\n                {\n                    \"lat\": 48.13859,\n                    \"lng\": 11.58013\n                }\n            ],\n            \"alternative\": false\n        }\n    ],\n    \"markers\": [\n        {\n            \"id\": \"100\",\n            \"position\": {\n                \"lat\": 48.17933,\n                \"lng\": 11.48731\n            },\n            \"markerProps\": {\n                \"active\": false,\n                \"iconNames\": [\n                    \"start\"\n                ],\n                \"markerColor\": \"bg-map-marker-route\",\n                \"clickable\": false\n            }\n        },\n        {\n            \"id\": \"200\",\n            \"position\": {\n                \"lat\": 48.13859,\n                \"lng\": 11.58013\n            },\n            \"markerProps\": {\n                \"active\": false,\n                \"iconNames\": [\n                    \"finish\"\n                ],\n                \"markerColor\": \"bg-map-marker-route\",\n                \"clickable\": false\n            }\n        },\n        {\n            \"id\": \"59.70357\",\n            \"position\": {\n                \"lat\": 48.16745,\n                \"lng\": 11.53612\n            },\n            \"markerProps\": {\n                \"active\": true,\n                \"iconNames\": [\n                    \"route\"\n                ],\n                \"markerColor\": \"bg-map-marker-route\",\n                \"name\": \"10 km / 36 min\",\n                \"clickable\": false,\n                \"fixed\": true\n            }\n        }\n    ]\n}\n</textarea></div></div><div class=\"display-flex flex-col gap-15 align-items-center padding-top-10\"><div><div class=\"FilePicker\"><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Select file...</button><div role=\"presentation\" tabindex=\"0\"><input accept=\"application/json,.json\" type=\"file\" tabindex=\"-1\" style=\"border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;\"></div></div></div><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Create demo route</button><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Create demo marker</button><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Toggle route events</button></div><div class=\"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></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useEffect, useState } from 'react';\n\nimport FilePicker from '@rio-cloud/rio-uikit/FilePicker';\n\n// biome-ignore lint/suspicious/noShadowRestrictedNames: <explanation>\nimport Map from '@rio-cloud/rio-uikit/Map';\nimport Route, { type RouteStyle } from '@rio-cloud/rio-uikit/Route';\nimport Marker from '@rio-cloud/rio-uikit/Marker';\nimport MapSettings from '@rio-cloud/rio-uikit/MapSettings';\nimport MapTypeSettings from '@rio-cloud/rio-uikit/MapTypeSettings';\nimport SingleMapMarker, { type SingleMapMarkerProps } from '@rio-cloud/rio-uikit/SingleMapMarker';\nimport Button from '@rio-cloud/rio-uikit/Button';\n\nimport { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';\nimport { defaultRoute } from './routes';\nimport type { Position } from '@rio-cloud/rio-uikit/mapTypes';\n\nexport type MarkerData = {\n    markerType?: 'custommarker';\n    enableContextMenu?: boolean;\n    contextMenuMarkerName?: string;\n    lat?: number;\n    lng?: number;\n};\n\nexport type RoutePoint = Position & {\n    pointIndex: number;\n};\n\nexport type RouteSegment = {\n    points: RoutePoint[];\n    data?: object;\n    showArrows?: boolean;\n    reduced?: boolean;\n    style?: RouteStyle;\n    alternative?: boolean;\n};\n\nexport type SandboxMarker = {\n    id: string;\n    data?: MarkerData;\n    type?: 'addressType' | 'customerPoiType' | 'workshopPoiType';\n    markerProps: SingleMapMarkerProps;\n    position: Position;\n};\n\nconst defaultPosition: Position = { lat: 48.7497783, lng: 13.1000291 };\n\nconst getRandomValueToForceRerender = () => Math.random();\n\nconst getBoundingBox = (positions: Position[]) => {\n    const lats = positions.map(position => position.lat);\n    const lngs = positions.map(position => position.lng);\n    const bbox = {\n        top: Math.max(...lats),\n        left: Math.min(...lngs),\n        right: Math.max(...lngs),\n        bottom: Math.min(...lats),\n    };\n    return bbox;\n};\n\nconst Markers = ({ markers }: { markers: SandboxMarker[] }) => {\n    const mapMarkers = markers.map(marker => {\n        const customData = { id: marker.id, data: marker.data };\n        return (\n            <Marker\n                key={marker.id}\n                customData={customData}\n                position={marker.position}\n                icon={<SingleMapMarker {...marker.markerProps} />}\n            />\n        );\n    });\n    return mapMarkers;\n};\n\nconst Segments = ({ segments }: { segments: RouteSegment[] }) => {\n    const mapSegments = segments.map(segment => {\n        return (\n            <Route\n                key={getRandomValueToForceRerender()}\n                positions={segment.points}\n                isRouteAlternative={segment.alternative}\n                isReduced={segment.reduced}\n                style={segment.style}\n                hasArrows={segment.showArrows}\n            />\n        );\n    });\n    return mapSegments;\n};\n\nconst RouteSandboxExample = () => {\n    const [text, setText] = useState(defaultRoute);\n    const [markers, setMarkers] = useState<SandboxMarker[]>([]);\n    const [segments, setSegments] = useState([]);\n    const [hasError, setHasError] = useState(false);\n    const [showRouteEvents, setShowRouteEvents] = useState(false);\n\n    useEffect(() => {\n        try {\n            const data = JSON.parse(text);\n\n            let routePoints = [];\n\n            if (showRouteEvents) {\n                // add segments as route marker points to simulate historic events on the route\n                routePoints = data.segments[0].points.map((item: RoutePoint, index: number) => ({\n                    id: `${item.lat}-${item.lng}+${index}`,\n                    position: { ...item },\n                    markerProps: {\n                        key: `${item.lat}-${item.lng}+${index}`,\n                        visibleOnHover: true,\n                        markerColor: 'bg-map-marker-route',\n                        size: 'lg',\n                        name: (\n                            <div className='display-flex align-item-start gap-5 padding-3 margin-x--3'>\n                                <span\n                                    className={`text-size-16 rioglyph ${\n                                        index % 2 ? 'rioglyph-status-driving' : 'rioglyph-stopover'\n                                    }`}\n                                />\n                                <div className='line-height-16'>\n                                    <div className='text-medium'>{index % 2 ? 'Angefahren' : 'Angehalten'}</div>\n                                    <div className='text-size-12'>14.07.2023, 08:26</div>\n                                </div>\n                            </div>\n                        ),\n                        clickable: false,\n                    },\n                }));\n            }\n\n            setMarkers([...data.markers, ...routePoints]);\n            setSegments(data.segments);\n            setHasError(false);\n        } catch (error) {\n            setHasError(true);\n        }\n    }, [text, showRouteEvents]);\n\n    const handlePick = async (acceptedFiles: FileList | null) => {\n        if (acceptedFiles) {\n            const newText = await acceptedFiles[0].text();\n            setText(newText);\n        }\n    };\n\n    const handleTextChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        const newText = event.target.value;\n        setText(newText);\n    };\n\n    const handleCreateRoute = () => setText(defaultRoute);\n    const handleCreateMarker = () => setText(JSON.stringify(defaultMarker, null, 4));\n\n    const handleShowRouteEvents = () => setShowRouteEvents(!showRouteEvents);\n\n    let center: Position | undefined = defaultPosition;\n    let boundingBox;\n\n    if (segments?.length > 0) {\n        center = undefined;\n        boundingBox = getBoundingBox((segments as RouteSegment[]).flatMap(segment => segment.points));\n    } else if (markers?.length > 0) {\n        center = markers[0].position;\n    }\n\n    return (\n        <>\n            <Map\n                credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}\n                center={center}\n                boundingBox={boundingBox}\n                zoom={10}\n                height={300}\n                mapSettings={\n                    <MapSettings\n                        options={[\n                            <MapTypeSettings\n                                key='mapTypeSettings'\n                                tooltip='Change map type'\n                                dropdownHeaderText='Map views'\n                                defaultTypeLabel='Default view'\n                                truckTypeLabel='Truck view'\n                                terrainTypeLabel='Terrain view'\n                                satelliteTypeLabel='Satellite view'\n                                nightTypeLabel='Night view'\n                            />,\n                        ]}\n                    />\n                }\n            >\n                {segments && <Segments segments={segments} />}\n                {markers && <Markers markers={markers} />}\n            </Map>\n            <div className='padding-top-10'>\n                <div className={`form-group margin-0 ${hasError ? 'has-feedback has-error' : ''}`}>\n                    <textarea\n                        className='form-control width-100pct'\n                        rows={10}\n                        value={text}\n                        onChange={handleTextChange}\n                    />\n                    {hasError && <div className='help-block'>Invalid JSON</div>}\n                </div>\n            </div>\n            <div className='display-flex flex-col gap-15 align-items-center padding-top-10'>\n                <div>\n                    <FilePicker\n                        displayMode={FilePicker.DISPLAY_MODE_BUTTON}\n                        label='Select file...'\n                        onPick={handlePick}\n                        multiple={false}\n                        accept={{\n                            'application/json': ['.json'],\n                        }}\n                    />\n                </div>\n                <Button onClick={handleCreateRoute}>Create demo route</Button>\n                <Button onClick={handleCreateMarker}>Create demo marker</Button>\n                <Button onClick={handleShowRouteEvents}>Toggle route events</Button>\n            </div>\n            <div className='margin-top-20'>\n                <p>\n                    Enter your route data into the input or select a JSON file to render a route with multiple{' '}\n                    <code>segments</code> and <code>markers</code>. Please note that this will replace all previously\n                    existing markers and route segments.\n                </p>{' '}\n                <p>\n                    Segments are separate parts of the route, each containing a list of <code>points</code>, which can\n                    be rendered as reduced route (semi-transparent) and with or without arrows (showArrows). A Marker\n                    should provide a<code>position</code> and <code>markerProps</code> to define its shape.\n                </p>\n            </div>\n        </>\n    );\n};\n\nexport default RouteSandboxExample;\n\nconst defaultMarker = {\n    markers: [\n        {\n            id: '066aa89e-ffc0-4326-bc95-ea45d5601ce4',\n            markerProps: {\n                active: false,\n                iconNames: ['start'],\n                markerColor: 'bg-map-marker-route',\n            },\n            position: {\n                lat: 48.178,\n                lng: 11.487,\n            },\n        },\n    ],\n};"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "positions",
+                      "type": "Array of Objects",
+                      "default": "",
+                      "description": "Array of points {lat, lng} the route is connecting."
+                    },
+                    {
+                      "name": "hasArrows",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Defines whether to show arrows or not."
+                    },
+                    {
+                      "name": "arrowStyle",
+                      "type": "ArrowStyle",
+                      "default": "",
+                      "description": "Defines the style of the arrows on the route."
+                    },
+                    {
+                      "name": "isReduced",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether to render the route as reduced (transparent)."
+                    },
+                    {
+                      "name": "isRouteAlternative",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether to render the route with alternative route style."
+                    },
+                    {
+                      "name": "style",
+                      "type": "RouteStyle",
+                      "default": "",
+                      "description": "Custom style for the route."
+                    },
+                    {
+                      "name": "eventListenerMap",
+                      "type": "EventListenerMap",
+                      "default": "",
+                      "description": "Map of event listeners for the route."
+                    },
+                    {
+                      "name": "startIcon",
+                      "type": "JSX.Element",
+                      "default": "",
+                      "description": "Icon to be displayed at the start of the route."
+                    },
+                    {
+                      "name": "middleIcon",
+                      "type": "JSX.Element",
+                      "default": "",
+                      "description": "Icon to be displayed at the middle of the route."
+                    },
+                    {
+                      "name": "endIcon",
+                      "type": "JSX.Element",
+                      "default": "",
+                      "description": "Icon to be displayed at the end of the route."
+                    },
+                    {
+                      "name": "markers",
+                      "type": "JSX.Element[]",
+                      "default": "",
+                      "description": "Array of markers to be displayed on the route."
+                    },
+                    {
+                      "name": "customData",
+                      "type": "object",
+                      "default": "",
+                      "description": "Custom data to be passed to the route."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}