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/maproutegenerator.json ADDED Viewed

@@ -0,0 +1,16 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:15.724Z",
+    "source": "https://uikit.developers.rio.cloud/#components/mapRouteGenerator",
+    "category": "Components",
+    "section": "Map",
+    "slug": "components/maproutegenerator",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "8bc139c3415518f7304c7447a3b38e4d7e078e2674ba219d43989a304816af65"
+  },
+  "title": null,
+  "lead": null,
+  "content": [],
+  "see_also": []
+}

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

@@ -0,0 +1,51 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:11.394Z",
+    "source": "https://uikit.developers.rio.cloud/#components/mapSettings",
+    "category": "Components",
+    "section": "Map",
+    "slug": "components/mapsettings",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "afa9b94b0eac87bf1bd3ad9129a1801f016df9e1084b267cb254ab4b47fca124"
+  },
+  "title": "Map settings",
+  "lead": null,
+  "content": [
+    {
+      "heading": "Map settings",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"display-flex-lg gap-15\"><div class=\"flex-1-1\"><div class=\"Map position-relative map-type-default \" style=\"height: 500px;\"><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=\"500\" data-engine=\"three.js r152\" style=\"position: absolute; left: 0px; top: 0px; width: 908px; height: 500px;\"></canvas><canvas width=\"908\" height=\"500\" style=\"position: absolute; left: 0px; top: 0px; width: 908px; height: 500px; display: none;\"></canvas><div style=\"position: absolute; height: 100%; width: 100%; z-index: 1;\"><div style=\"position: absolute; pointer-events: none; width: 908px; height: 500px; z-index: 2;\"></div><div style=\"position: absolute; pointer-events: none; width: 908px; height: 500px; 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;\"><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\">20 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 class=\"MapSettingsTile MapClusterSettings\"><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\"><g transform=\"translate(2 2)\"><circle cx=\"9.6\" cy=\"9.6\" r=\"9.6\" fill=\"#A7AFBB\"></circle><path fill=\"#FFF\" d=\"M9.431 15.129c1.205 0 2.11-.37 2.714-1.111a3.88 3.88 0 0 0 .907-2.524c0-1.083-.314-1.908-.942-2.475a3.19 3.19 0 0 0-2.208-.851c-.417 0-.77.054-1.061.162-.174.065-.415.199-.725.4l.366-2.228h4.17V4.8H7.034l-.718 5.632 1.8.084c.16-.304.396-.513.71-.625.179-.061.39-.092.633-.092.516 0 .896.18 1.14.538.243.359.365.798.365 1.318 0 .53-.13.97-.39 1.319s-.639.524-1.136.524c-.431 0-.76-.119-.984-.355-.225-.237-.377-.573-.457-1.01H6c.07.957.417 1.695 1.04 2.215.624.52 1.42.78 2.391.78z\"></path></g><g transform=\"translate(18 18)\"><circle cx=\"9.6\" cy=\"9.6\" r=\"9.6\" fill=\"#A7AFBB\"></circle><path fill=\"#FFF\" d=\"M9.502 14.938c1.171 0 2.056-.327 2.654-.981.598-.654.896-1.412.896-2.275 0-.82-.255-1.467-.766-1.94-.342-.315-.605-.472-.788-.472.244-.093.479-.27.704-.527.356-.412.534-.919.534-1.519 0-.848-.299-1.524-.897-2.028-.597-.504-1.384-.756-2.359-.756-.525 0-.968.063-1.328.19a2.71 2.71 0 0 0-.936.548 3.26 3.26 0 0 0-.773 1.104 5.029 5.029 0 0 0-.26 1.442h1.87c-.01-.502.097-.903.32-1.203.223-.3.57-.45 1.044-.45.413 0 .733.122.96.366.227.244.341.56.341.95 0 .6-.223.998-.668 1.194-.258.118-.713.18-1.364.19v1.435c.666 0 1.153.063 1.462.19.544.224.816.672.816 1.342 0 .507-.146.895-.44 1.164-.292.27-.636.404-1.03.404-.642 0-1.085-.246-1.328-.738-.132-.267-.197-.605-.197-1.012H6c.033.81.197 1.467.492 1.968.563.943 1.566 1.414 3.01 1.414z\"></path></g></g></svg><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" class=\"MapSettingsTileIcon hover-scale-110 display-none\"><g fill=\"none\" transform=\"translate(3 3)\"><circle cx=\"8\" cy=\"8\" r=\"8\" fill=\"#A7AFBB\"></circle><path fill=\"#FFF\" d=\"M11.333 4.943H12v1.534h-.667V12H9.778v-.818H6.222V12H4.667V6.477H4V4.943h.667v-.511L5.5 3h5l.833 1.432v.511zm-6-.511v2.659h5.334V4.43H5.333v.002zm0 4.09v.614h5.334v-.613H5.333v-.001zm.122 1.055v.692h.727v-.692h-.727zm4.363 0v.692h.727v-.692h-.727z\"></path><circle cx=\"26\" cy=\"15\" r=\"8\" fill=\"#A7AFBB\"></circle><path fill=\"#FFF\" d=\"M29.333 11.943H30v1.534h-.667V19h-1.555v-.818h-3.556V19h-1.555v-5.523H22v-1.534h.667v-.511L23.5 10h5l.833 1.432v.511zm-6-.511v2.659h5.334v-2.66h-5.334v.001zm0 4.09v.614h5.334v-.613h-5.334v-.001zm.122 1.055v.692h.727v-.692h-.727zm4.363 0v.692h.727v-.692h-.727z\"></path><circle cx=\"10\" cy=\"27\" r=\"8\" fill=\"#A7AFBB\"></circle><path fill=\"#FFF\" d=\"M13.333 23.943H14v1.534h-.667V31h-1.555v-.818H8.222V31H6.667v-5.523H6v-1.534h.667v-.511L7.5 22h5l.833 1.432v.511zm-6-.511v2.659h5.334v-2.66H7.333v.001zm0 4.09v.614h5.334v-.613H7.333v-.001zm.122 1.055v.692h.727v-.692h-.727zm4.363 0v.692h.727v-.692h-.727z\"></path></g></svg></div><div class=\"dropdown\"></div></div></div><div class=\"MapSettingsTile MapLayerSettings\"><div class=\"MapSettingsTile-inner position-relative\"><div class=\"MapSettingsButton\"><div class=\"height-40 width-40 text-size-16 display-grid place-items-center hover-scale-110\"><span class=\"rioglyph rioglyph-construction text-color-gray text-size-200pct\"></span></div></div><div class=\"dropdown\"></div></div></div><div class=\"MapSettingsTile MapAdditionalLayerSettings\"><div class=\"MapSettingsTile-inner position-relative\"><div class=\"MapSettingsButton\"><div class=\"height-40 width-40 text-size-16 display-grid place-items-center hover-scale-110\"><span class=\"rioglyph rioglyph-layer-pois text-color-gray text-size-200pct\"></span></div></div><div class=\"dropdown\"></div></div></div><div class=\"MapSettingsTile MapBoundingBoxButton\"><div class=\"MapSettingsButton\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" class=\"MapSettingsTileIcon hover-scale-110 display-none MapBoundingBoxButtonIcon\"><path fill=\"#30B4C0\" d=\"M31.978 14.928a13.695 13.695 0 0 0-.546-1.137 13.17 13.17 0 0 0-4.12-4.554l-.045-.029a7.494 7.494 0 0 0-.526-.325c-.36-.217-.728-.417-1.106-.6C23.99 7.472 22.052 7 20.004 7 12.822 7 7 12.82 7 20s5.822 13 13.004 13c2.048 0 3.985-.473 5.708-1.316l-.077.034c.38-.182.748-.383 1.106-.601a56 56 0 0 0 .526-.325 13.165 13.165 0 0 0 4.13-4.516l.035-.067c.2-.368.381-.747.546-1.137.646-1.494 1.022-3.233 1.022-5.06a13.01 13.01 0 0 0-1.054-5.146l.032.085v-.023zm-11.983-4.69a9.751 9.751 0 0 1 8.554 5.069l.025.05c-.03.363-.038.728-.025 1.092v-.016c.038.702-.625 1.326-1.561 1.833-.937.507-.898.65-.39 2.106.507 1.456-1.951 5.268-2.852 5.85-.9.582-.936-1.872-.936-1.872v-1.24c0-.117-.195-1.482-.195-1.482l-.325-1.21-.995-1.134a24.88 24.88 0 0 0-2.729-.964l-.197-.05c-.897-.195-.65-1.833.325-2.3.976-.469 1.3.584 1.132-1.21-.17-1.794-1.704-1.212-2.432-1.212s-.813.569-1.245 2.574c-.234 1.092-.858.325-1.014.04-.157-.287-.274-2.185-.274-2.185l-.78 1.365s-.117.546-1.443 1.014c-1.21.426-.933-.975-.621-1.95 1.783-2.528 4.689-4.16 7.977-4.166l.001-.002zM10.53 22.313c.107-.848.377-2.49.845-2.119.625.494.898.494 1.444 1.04.546.546 2.887.858 2.107 1.56-.78.702-.898.77-1.249 1.486-.325.65-.813 2.057-.887 2.275a9.72 9.72 0 0 1-2.261-4.158l-.015-.067.016-.017zM3 31l6 6H3v-6zm34 0v6h-6l6-6zm0-28v6l-6-6h6zM9 3L3 9V3h6z\"></path></svg><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" class=\"MapSettingsTileIcon hover-scale-110 display-block MapBoundingBoxButtonIconInactive\"><path fill=\"#A7AFBB\" d=\"M31.978 14.928a13.695 13.695 0 0 0-.546-1.137 13.17 13.17 0 0 0-4.12-4.554l-.045-.029a7.494 7.494 0 0 0-.526-.325c-.36-.217-.728-.417-1.106-.6C23.99 7.472 22.052 7 20.004 7 12.822 7 7 12.82 7 20s5.822 13 13.004 13c2.048 0 3.985-.473 5.708-1.316l-.077.034c.38-.182.748-.383 1.106-.601a56 56 0 0 0 .526-.325 13.165 13.165 0 0 0 4.13-4.516l.035-.067c.2-.368.381-.747.546-1.137.646-1.494 1.022-3.233 1.022-5.06a13.01 13.01 0 0 0-1.054-5.146l.032.085v-.023zm-11.983-4.69a9.751 9.751 0 0 1 8.554 5.069l.025.05c-.03.363-.038.728-.025 1.092v-.016c.038.702-.625 1.326-1.561 1.833-.937.507-.898.65-.39 2.106.507 1.456-1.951 5.268-2.852 5.85-.9.582-.936-1.872-.936-1.872v-1.24c0-.117-.195-1.482-.195-1.482l-.325-1.21-.995-1.134a24.88 24.88 0 0 0-2.729-.964l-.197-.05c-.897-.195-.65-1.833.325-2.3.976-.469 1.3.584 1.132-1.21-.17-1.794-1.704-1.212-2.432-1.212s-.813.569-1.245 2.574c-.234 1.092-.858.325-1.014.04-.157-.287-.274-2.185-.274-2.185l-.78 1.365s-.117.546-1.443 1.014c-1.21.426-.933-.975-.621-1.95 1.783-2.528 4.689-4.16 7.977-4.166l.001-.002zM10.53 22.313c.107-.848.377-2.49.845-2.119.625.494.898.494 1.444 1.04.546.546 2.887.858 2.107 1.56-.78.702-.898.77-1.249 1.486-.325.65-.813 2.057-.887 2.275a9.72 9.72 0 0 1-2.261-4.158l-.015-.067.016-.017zM3 31l6 6H3v-6zm34 0v6h-6l6-6zm0-28v6l-6-6h6zM9 3L3 9V3h6z\"></path></svg></div><div class=\"overflow-hidden\"></div></div><div class=\"MapSettingsTile MapCenterMarkerButton\"><div class=\"MapSettingsButton\"><div class=\"height-40 width-40 text-size-16 display-grid place-items-center hover-scale-110\"><span class=\"rioglyph rioglyph-position text-color-gray text-size-200pct\"></span></div></div><div class=\"overflow-hidden\"></div></div><div class=\"MapSettingsTile MapLockMarkerButton\"><div class=\"MapSettingsButton\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" class=\"MapSettingsTileIcon hover-scale-110 display-none MapLockMarkerButtonIcon\"><path fill=\"#30B4C0\" d=\"M20.256 7c4.597.023 8.254.681 8.254 5.35v3.441h2.383v17.402H9.107V15.791h2.383v-3.44C11.49 7.595 15.284 7 20 7zm-.1 14.267c-1.266 0-2.293 1.042-2.293 2.327a2.34 2.34 0 0 0 1.044 1.954v.374l-.248 3.27h2.995l-.249-3.27a2.28 2.28 0 0 0 0-.374 2.34 2.34 0 0 0 1.045-1.954c0-1.285-1.027-2.327-2.294-2.327zm-.14-11.354c-3.44-.131-5.16.682-5.16 2.44v3.422h10.32v-3.423c0-1.67-1.72-2.482-5.16-2.439z\"></path></svg><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" class=\"MapSettingsTileIcon hover-scale-110 display-block MapLockMarkerButtonIconInactive\"><path fill=\"#A7AFBB\" d=\"M25.186 13.572v-.905c0-2.275-1.308-2.767-5.162-2.767s-5.163.372-5.163 2.767v3.108h10.325v-.013h3.337v.035h2.384v17.41H9.11v-17.41h2.384v-3.442c0-4.758 3.796-5.353 8.514-5.353s8.515.595 8.515 5.353v1.217h-3.337zm-5.021 7.703c-1.268 0-2.295 1.043-2.295 2.33a2.34 2.34 0 0 0 1.045 1.954v.375l-.249 3.271h2.997l-.249-3.271a2.28 2.28 0 0 0 0-.375 2.342 2.342 0 0 0 1.045-1.955c0-1.286-1.027-2.329-2.294-2.329z\"></path></svg></div><div class=\"overflow-hidden\"></div></div></div><div class=\"MapElements\"></div></div><div class=\"from-group display-flex gap-15 flex-wrap margin-top-15\"><div class=\"min-width-150\"><label class=\"margin-0\">Map Type</label><div class=\"select dropdown dropup\"><button type=\"button\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"selected-option-text\">Day</span><span class=\"clearButton hide pointer-events-none\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span><span class=\"caret\"></span></button><ul class=\"dropdown-menu\" role=\"menu\"><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"DEFAULT\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\">Day</span><input type=\"hidden\" value=\"DEFAULT\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"FLEET_STYLE\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\">Fleet style</span><input type=\"hidden\" value=\"FLEET_STYLE\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"SATELLITE\" data-item-index=\"2\"><span class=\"selected-option-dropdown-item\">Satellite</span><input type=\"hidden\" value=\"SATELLITE\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"TERRAIN\" data-item-index=\"3\"><span class=\"selected-option-dropdown-item\">Terrain</span><input type=\"hidden\" value=\"TERRAIN\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"NIGHT\" data-item-index=\"4\"><span class=\"selected-option-dropdown-item\">Night</span><input type=\"hidden\" value=\"NIGHT\"></a></li></ul></div></div><div class=\"min-width-200\"><label class=\"margin-0\">Map Layer</label><div class=\"select multiselect dropdown dropup\"><button type=\"button\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"placeholder\">Please select...</span><span class=\"caret\"></span></button><ul class=\"dropdown-menu\" role=\"menu\"><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"INCIDENTS\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\">Incidents</span><input type=\"hidden\" value=\"INCIDENTS\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"TRAFFIC\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\">Traffic</span><input type=\"hidden\" value=\"TRAFFIC\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"ROAD_RESTRICTIONS\" data-item-index=\"2\"><span class=\"selected-option-dropdown-item\">Road restrictions</span><input type=\"hidden\" value=\"ROAD_RESTRICTIONS\"></a></li></ul></div></div><div class=\"min-width-150\"><label class=\"margin-0\">Language</label><div class=\"select dropdown dropup\"><button type=\"button\" class=\"dropdown-toggle form-control text-left\" data-toggle=\"dropdown\" tabindex=\"0\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"selected-option-text\">English</span><span class=\"clearButton hide pointer-events-none\"><span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\"></span></span><span class=\"caret\"></span></button><ul class=\"dropdown-menu\" role=\"menu\"><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"en\" data-item-index=\"0\"><span class=\"selected-option-dropdown-item\">English</span><input type=\"hidden\" value=\"en\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"de-DE\" data-item-index=\"1\"><span class=\"selected-option-dropdown-item\">German</span><input type=\"hidden\" value=\"de-DE\"></a></li><li class=\"\" role=\"listitem\"><a role=\"menuitem\" class=\"display-flex align-items-center gap-3\" data-item-id=\"pl\" data-item-index=\"2\"><span class=\"selected-option-dropdown-item\">Polish</span><input type=\"hidden\" value=\"pl\"></a></li></ul></div></div><div class=\"width-100\"><label class=\"margin-0\">Zoom</label><div class=\"NumberControl\"><div class=\"input-group\"><div class=\"form-control-feedback-wrapper\"><input type=\"number\" step=\"1\" min=\"1\" max=\"19\" class=\"form-control no-controls\" aria-label=\"number-input\" value=\"9\"></div><div class=\"input-group-addon \"><div class=\"display-flex padding-left-10\"><div role=\"button\" aria-label=\"decrement-button\" class=\"decrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer\"><div class=\"rioglyph rioglyph-minus scale-90\"></div></div><div role=\"button\" aria-label=\"increment-button\" class=\"incrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer margin-left-5\"><div class=\"rioglyph rioglyph-plus scale-90\"></div></div></div></div></div></div></div><div class=\"width-100\"><label class=\"margin-0\">Min zoom</label><div class=\"NumberControl\"><div class=\"input-group\"><div class=\"form-control-feedback-wrapper\"><input type=\"number\" step=\"1\" min=\"1\" max=\"19\" class=\"form-control no-controls\" aria-label=\"number-input\" value=\"3\"></div><div class=\"input-group-addon \"><div class=\"display-flex padding-left-10\"><div role=\"button\" aria-label=\"decrement-button\" class=\"decrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer\"><div class=\"rioglyph rioglyph-minus scale-90\"></div></div><div role=\"button\" aria-label=\"increment-button\" class=\"incrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer margin-left-5\"><div class=\"rioglyph rioglyph-plus scale-90\"></div></div></div></div></div></div></div><div class=\"width-100\"><label class=\"margin-0\">Max zoom</label><div class=\"NumberControl\"><div class=\"input-group\"><div class=\"form-control-feedback-wrapper\"><input type=\"number\" step=\"1\" min=\"1\" max=\"20\" class=\"form-control no-controls\" aria-label=\"number-input\" value=\"20\"></div><div class=\"input-group-addon \"><div class=\"display-flex padding-left-10\"><div role=\"button\" aria-label=\"decrement-button\" class=\"decrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer\"><div class=\"rioglyph rioglyph-minus scale-90\"></div></div><div role=\"button\" aria-label=\"increment-button\" class=\"incrementButton display-flex align-items-center text-color-gray hover-text-color-dark cursor-pointer margin-left-5\"><div class=\"rioglyph rioglyph-plus scale-90\"></div></div></div></div></div></div></div><div class=\"min-width-100\"><label class=\"margin-0\">Map center</label><div><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Reset position</button></div></div><div class=\"min-width-100\"><label class=\"margin-0\">Cluster</label><label class=\"checkbox checkbox padding-y-5\" tabindex=\"0\"><input type=\"checkbox\" class=\"checkbox padding-y-5\" checked=\"\"><span class=\"checkbox-text\"><span>Show cluster</span></span></label></div><div class=\"min-width-200\"><label class=\"margin-0\">Rendering</label><div class=\"display-flex gap-20\"><label class=\"checkbox checkbox padding-y-5\" tabindex=\"0\"><input type=\"checkbox\" class=\"checkbox padding-y-5\" checked=\"\"><span class=\"checkbox-text\"><span>WebGL vector tiles</span></span></label></div><div class=\"display-flex gap-20\"><label class=\"checkbox checkbox padding-y-5\" tabindex=\"0\"><input type=\"checkbox\" class=\"checkbox padding-y-5\" checked=\"\"><span class=\"checkbox-text\"><span>Use device pixel ratio</span></span></label></div></div><div class=\"min-width-200\"><label class=\"margin-0\">Map center</label><div><span class=\"vehiclePositionInfo\">N48° 30.000′ E12° 6.000′</span></div></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import React, { useState, useRef, useMemo } from 'react';\nimport without from 'lodash/fp/without';\nimport isEqual from 'lodash/fp/isEqual';\n\nimport classNames from 'classnames';\n\nimport Notification from '@rio-cloud/rio-uikit/Notification';\n// biome-ignore lint/suspicious/noShadowRestrictedNames: <explanation>\nimport Map from '@rio-cloud/rio-uikit/Map';\nimport Polygon from '@rio-cloud/rio-uikit/Polygon';\nimport Route from '@rio-cloud/rio-uikit/Route';\nimport Circle from '@rio-cloud/rio-uikit/Circle';\nimport Marker from '@rio-cloud/rio-uikit/Marker';\nimport InfoBubble from '@rio-cloud/rio-uikit/InfoBubble';\nimport SingleMapMarker from '@rio-cloud/rio-uikit/SingleMapMarker';\nimport ClusterMapMarker from '@rio-cloud/rio-uikit/ClusterMapMarker';\nimport MarkerLayer from '@rio-cloud/rio-uikit/MarkerLayer';\nimport EventUtils, { type EventListenerMap } from '@rio-cloud/rio-uikit/EventUtils';\nimport MapSettings from '@rio-cloud/rio-uikit/MapSettings';\nimport MapSettingsItem from '@rio-cloud/rio-uikit/MapSettingsItem';\nimport MapClusterSettings from '@rio-cloud/rio-uikit/MapClusterSettings';\nimport MapLayerSettings from '@rio-cloud/rio-uikit/MapLayerSettings';\nimport MapAdditionalLayerSettings from '@rio-cloud/rio-uikit/MapAdditionalLayerSettings';\nimport MapTypeSettings from '@rio-cloud/rio-uikit/MapTypeSettings';\nimport MapSettingsDropdownHeader from '@rio-cloud/rio-uikit/MapSettingsDropdownHeader';\nimport MapCustomerPoiSettingsItem from '@rio-cloud/rio-uikit/MapCustomerPoiSettingsItem';\nimport MapWorkshopPoiSettingsItem from '@rio-cloud/rio-uikit/MapWorkshopPoiSettingsItem';\nimport MapLayerIncidentsItem from '@rio-cloud/rio-uikit/MapLayerIncidentsItem';\nimport MapLayerRoadRestrictionsItem from '@rio-cloud/rio-uikit/MapLayerRoadRestrictionsItem';\nimport MapLayerTrafficItem from '@rio-cloud/rio-uikit/MapLayerTrafficItem';\nimport MapBoundingBoxButton from '@rio-cloud/rio-uikit/MapBoundingBoxButton';\nimport MapCenterMarkerButton from '@rio-cloud/rio-uikit/MapCenterMarkerButton';\nimport MapLockMarkerButton from '@rio-cloud/rio-uikit/MapLockMarkerButton';\nimport Select, { type SelectOption } from '@rio-cloud/rio-uikit/Select';\nimport Multiselect from '@rio-cloud/rio-uikit/Multiselect';\nimport Checkbox from '@rio-cloud/rio-uikit/Checkbox';\nimport NumberControl from '@rio-cloud/rio-uikit/NumberControl';\nimport Position from '@rio-cloud/rio-uikit/Position';\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport type {\n    MapApi,\n    MapEvent,\n    MapIncidents,\n    MapLayer,\n    MapType,\n    Position as MapPosition,\n    IncidentDataPoint,\n} from '@rio-cloud/rio-uikit/mapTypes';\n\nimport { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';\n\nimport {\n    markerPosition,\n    polygonPoints,\n    STROKE_COLOR,\n    FILL_COLOR,\n    routePoints,\n    circlePosition,\n    generateClusterData,\n    type Asset,\n} from './demoData';\nimport {\n    DEFAULT_MAX_ZOOM,\n    DEFAULT_MIN_ZOOM,\n    MAP_LAYER_INCIDENTS,\n} from '@rio-cloud/rio-uikit/components/map/components/constants';\n\nconst WORKSHOP_POIS = 'WORKSHOP_POIS';\nconst CUSTOMER_POIS = 'CUSTOMER_POIS';\nconst GEOFENCES = 'GEOFENCES';\nconst CHARGING_STATIONS = 'CHARGING_STATIONS';\n\nconst initialPosition = { lat: 48.5, lng: 12.1 };\n\nconst mapTypeOptions: SelectOption[] = [\n    { id: Map.TYPE_DEFAULT, label: 'Day' },\n    { id: Map.TYPE_FLEET_STYLE, label: 'Fleet style' },\n    { id: Map.TYPE_SATELLITE, label: 'Satellite' },\n    { id: Map.TYPE_TERRAIN, label: 'Terrain' },\n    { id: Map.TYPE_NIGHT, label: 'Night' },\n];\n\nconst mapLayerOptions: SelectOption[] = [\n    { id: Map.LAYER_INCIDENTS, label: 'Incidents' },\n    { id: Map.LAYER_TRAFFIC, label: 'Traffic' },\n    { id: Map.LAYER_ROAD_RESTRICTIONS, label: 'Road restrictions' },\n];\n\nconst languageOptions: SelectOption[] = [\n    { id: 'en', label: 'English' },\n    { id: 'de-DE', label: 'German' },\n    { id: 'pl', label: 'Polish' },\n];\n\nconst addOrRemove = (layers: string[], value: string) =>\n    layers.includes(value) ? without([value])(layers) : [...layers, value];\n\nconst FullSettingsExample = () => {\n    const [mapType, setMapType] = useState<MapType | undefined>(Map.TYPE_DEFAULT);\n    const [mapLayer, setMapLayer] = useState<MapLayer[]>([]);\n    const [showCluster, setShowCluster] = useState(true);\n    const [currentZoom, setCurrentZoom] = useState(9);\n    const [center, setCenter] = useState(initialPosition);\n    const [enableWebGL, setEnableWebGL] = useState(true);\n    const [enableDevicePixelRatio, setEnableDevicePixelRatio] = useState(true);\n    const [language, setLanguage] = useState('en');\n\n    const [minZoom, setMinZoom] = useState(DEFAULT_MIN_ZOOM);\n    const [maxZoom, setMaxZoom] = useState(DEFAULT_MAX_ZOOM);\n\n    const [clusterData, setClusterData] = useState(generateClusterData(10));\n    const [activePoiLayers, setActivePoiLayers] = useState<string[]>([]);\n    const [activeTrafficLayers, setActiveTrafficLayers] = useState<string[]>([]);\n    const [showCustomerPois, setShowCustomerPois] = useState(false);\n    const [showWorkshopPois, setShowWorkshopPois] = useState(false);\n    const [showGeofences, setShowGeofences] = useState(false);\n    const [showChargingStations, setShowChargingStations] = useState(false);\n\n    const [mapTypeOptionId, setMapTypeOptionId] = useState<MapType | undefined>(Map.TYPE_DEFAULT);\n    const [mapLayerOptionIds, setMapLayerOptionIds] = useState<string[]>([]);\n    const [showClusterOption, setShowClusterOption] = useState(true);\n\n    const [incidents, setIncidents] = useState<MapIncidents>();\n\n    const mapApiRef = useRef<MapApi>();\n\n    const handleToggleCustomerPois = () => {\n        setShowCustomerPois(!showCustomerPois);\n        setActivePoiLayers(addOrRemove(activePoiLayers, CUSTOMER_POIS));\n    };\n\n    const handleToggleWorkshopPois = () => {\n        setShowWorkshopPois(!showWorkshopPois);\n        setActivePoiLayers(addOrRemove(activePoiLayers, WORKSHOP_POIS));\n    };\n\n    const handleToggleGeofences = () => {\n        setShowGeofences(!showGeofences);\n        setActivePoiLayers(addOrRemove(activePoiLayers, GEOFENCES));\n    };\n\n    const handleToggleChargingStations = () => {\n        setShowChargingStations(!showChargingStations);\n        setActivePoiLayers(addOrRemove(activePoiLayers, CHARGING_STATIONS));\n    };\n\n    const layers = [\n        <MapSettingsDropdownHeader key='dividerPois' label='POIs & Layers' />,\n        <MapSettingsChargingStationsItem\n            key='chargingStations'\n            isActive={showChargingStations}\n            onToggle={handleToggleChargingStations}\n            label='Charging stations'\n        />,\n        <MapSettingsGeofenceItem\n            key='geofences'\n            isActive={showGeofences}\n            onToggle={handleToggleGeofences}\n            label='Geofences'\n        />,\n        <MapWorkshopPoiSettingsItem\n            key='mapWorkshopPoiSettingsItem'\n            isActive={showWorkshopPois}\n            onToggle={handleToggleWorkshopPois}\n            label='Workshop POIs'\n        />,\n        <MapCustomerPoiSettingsItem\n            key='mapCustomerPoiSettingsItem'\n            isActive={showCustomerPois}\n            onToggle={handleToggleCustomerPois}\n            label='Custom POIs'\n        />,\n    ];\n\n    const trafficLayers = [\n        <MapSettingsDropdownHeader key='dividerTraffic' label='Traffic overlays' />,\n        <MapLayerTrafficItem key='mapLayerTrafficItem' label='Traffic' />,\n        <MapLayerIncidentsItem key='mapLayerIncidentsItem' label='Incidents' />,\n        <MapLayerRoadRestrictionsItem key='mapLayerRoadRestrictionsItem' label='Road restrictions' />,\n    ];\n\n    const handleToggleBoundingBox = () => Notification.info('MapBoundingBoxButton clicked');\n    const handleToggleCenterMarker = () => {\n        Notification.info('MapCenterMarkerButton clicked');\n        setCenter(markerPosition);\n    };\n\n    // Update selects to reflect changes made in the map settings\n    const handleMapTypeChanged = (baseLayer: MapType) => setMapTypeOptionId(baseLayer);\n    const handleMapLayerChanged = (activeLayerIds: string[]) => setMapLayerOptionIds(activeLayerIds);\n    const handleClusterChanged = (cluster: boolean) => setShowClusterOption(cluster);\n\n    // Set the select value and update the map with the new setting\n    const handleChangeMapType = (selectedMapType: SelectOption | undefined) => {\n        setMapType(selectedMapType?.id as MapType);\n        setMapTypeOptionId(selectedMapType?.id as MapType);\n    };\n\n    // Set the multiselect value and update the map with the new setting\n    const handleChangeMapLayers = (selectedLayerIds: string[]) => {\n        setMapLayer(selectedLayerIds as MapLayer[]);\n        setMapLayerOptionIds(selectedLayerIds);\n    };\n\n    const handleChangeLanguage = (selectedLanguage: SelectOption | undefined) => {\n        selectedLanguage && setLanguage(selectedLanguage.id);\n    };\n\n    // Set the checkbox value and update the map with the new setting\n    const handleChangeCluster = (event: React.MouseEvent<HTMLInputElement, MouseEvent>) => {\n        const checked = event.currentTarget.checked;\n        setShowCluster(checked);\n        setShowClusterOption(checked);\n    };\n\n    const handleToggleWebGL = (event: React.MouseEvent<HTMLInputElement, MouseEvent>) =>\n        setEnableWebGL(event.currentTarget.checked);\n\n    const handleToggleDevicePixelRatio = (event: React.MouseEvent<HTMLInputElement, MouseEvent>) =>\n        setEnableDevicePixelRatio(event.currentTarget.checked);\n\n    const handleZoomButtons = (value: number) => setCurrentZoom(value);\n    const handleChangeMinZoom = (value: number | undefined) => value !== undefined && setMinZoom(value);\n    const handleChangeMaxZoom = (value: number | undefined) => value !== undefined && setMaxZoom(value);\n    const handleChangeZoom = (value: number | undefined) => value !== undefined && setCurrentZoom(value);\n\n    const handleResetMapPosition = () => setCenter(initialPosition);\n\n    const simpleTheme = useMemo(\n        () => ({\n            getNoisePresentation: ({ name, type }: Asset) => <SingleMapMarker iconNames={[type]} name={name} />,\n            getClusterPresentation: (assets: Asset[]) => (\n                <ClusterMapMarker\n                    count={assets.length}\n                    warningCount={Math.floor((assets.length * 10) / 3)}\n                    exceptionCount={Math.floor((assets.length * 10) / 5)}\n                />\n            ),\n        }),\n        []\n    );\n\n    const eventListenerMap: EventListenerMap = {\n        [EventUtils.MAP_VIEW_CHANGE_END]: (event: MapEvent) => {\n            const target = event.currentTarget;\n            const api = mapApiRef.current;\n\n            const lookAtData = target.getViewModel().getLookAtData();\n\n            const updatedCenter = api?.utils?.getCenter();\n            const newZoom = api?.utils?.getZoom();\n\n            if (!updatedCenter || newZoom === undefined) {\n                return;\n            }\n\n            console.log({ center, updatedCenter, currentZoom, newZoom, lookAtData });\n\n            const isEqualPosition = isEqual(center.lat, updatedCenter?.lat) && isEqual(center.lng, updatedCenter?.lng);\n            const isEqualZoom = isEqual(currentZoom, newZoom);\n\n            if (!(isEqualPosition && isEqualZoom)) {\n                const newCenter = { lat: updatedCenter?.lat, lng: updatedCenter?.lng };\n                setCenter(newCenter);\n                setCurrentZoom(newZoom);\n            }\n        },\n    };\n\n    return (\n        <>\n            <div className='display-flex-lg gap-15'>\n                <div className='flex-1-1'>\n                    <Map\n                        mapType={mapType}\n                        mapLayer={mapLayer}\n                        showCluster={showCluster}\n                        credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}\n                        eventListenerMap={eventListenerMap}\n                        center={center}\n                        showScaleBar\n                        zoom={currentZoom}\n                        onZoomIn={handleZoomButtons}\n                        onZoomOut={handleZoomButtons}\n                        minZoom={minZoom}\n                        maxZoom={maxZoom}\n                        height={500}\n                        onMapTypeChange={handleMapTypeChanged}\n                        onMapLayerChange={handleMapLayerChanged}\n                        onShowClusterChange={handleClusterChanged}\n                        onIncidentsChange={setIncidents}\n                        enableWebGL={enableWebGL}\n                        enableDevicePixelRatio={enableDevicePixelRatio}\n                        zoomAnimation={false}\n                        language={language}\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                                    <MapClusterSettings\n                                        key='mapClusterSettings'\n                                        tooltip='Enable or disable marker cluster'\n                                        dropdownHeaderText='Vehicle cluster'\n                                        clusterEnabledLabel='Enable cluster'\n                                        clusterDisabledLabel='Disable cluster'\n                                    />,\n                                    <MapLayerSettings\n                                        key='mapLayerSettingsTraffic'\n                                        layers={trafficLayers}\n                                        activeLayers={activeTrafficLayers}\n                                        tooltip='Toggle various traffic overlays'\n                                    />,\n                                    <MapAdditionalLayerSettings\n                                        key='mapLayerSettingsPoi'\n                                        layers={layers}\n                                        activeLayers={activePoiLayers}\n                                        tooltip='Toggle various POI layers'\n                                    />,\n                                    <MapBoundingBoxButton\n                                        key='mapBoundingBoxButton'\n                                        onToggle={handleToggleBoundingBox}\n                                        tooltip='Zoom to current Element'\n                                    />,\n                                    <MapCenterMarkerButton\n                                        key='mapCenterMarkerButton'\n                                        onToggle={handleToggleCenterMarker}\n                                        tooltip='Center current Marker'\n                                    />,\n                                    <MapLockMarkerButton key='mapLockMarkerButton' />,\n                                ]}\n                            />\n                        }\n                    >\n                        {(api: MapApi) => {\n                            mapApiRef.current = api;\n                            console.log('render example map elements');\n\n                            // if needed, render cluster or marker layer here\n                            return (\n                                <>\n                                    <Marker\n                                        position={markerPosition}\n                                        icon={\n                                            <SingleMapMarker iconNames={['truck']} markerColor='bg-map-marker-asset' />\n                                        }\n                                    />\n                                    <Polygon\n                                        points={polygonPoints}\n                                        style={{ strokeColor: STROKE_COLOR, fillColor: FILL_COLOR }}\n                                    />\n                                    <Route\n                                        hasArrows\n                                        positions={routePoints}\n                                        startIcon={\n                                            <SingleMapMarker iconNames={['start']} markerColor='bg-map-marker-route' />\n                                        }\n                                        endIcon={\n                                            <SingleMapMarker iconNames={['finish']} markerColor='bg-map-marker-route' />\n                                        }\n                                    />\n                                    <Circle\n                                        position={circlePosition}\n                                        radius={5000}\n                                        style={{ strokeColor: STROKE_COLOR, fillColor: FILL_COLOR }}\n                                        precision={30}\n                                    />\n                                    <Marker\n                                        position={{ lat: 48.56, lng: 11.38 }}\n                                        icon={\n                                            <SingleMapMarker\n                                                iconNames={['truck']}\n                                                markerColor='bg-map-marker-asset'\n                                                active\n                                            />\n                                        }\n                                    />\n                                    <Marker\n                                        position={{ lat: 48.56, lng: 11.48 }}\n                                        icon={\n                                            <SingleMapMarker\n                                                iconNames={['factory']}\n                                                markerColor='bg-map-marker-poi'\n                                                active\n                                            />\n                                        }\n                                    />\n                                    <Marker\n                                        position={{ lat: 48.56, lng: 11.58 }}\n                                        icon={\n                                            <SingleMapMarker\n                                                iconNames={['geofence']}\n                                                markerColor='bg-map-marker-geofence'\n                                                active\n                                            />\n                                        }\n                                    />\n                                    <Marker\n                                        position={{ lat: 48.56, lng: 11.68 }}\n                                        icon={\n                                            <SingleMapMarker\n                                                iconNames={['route']}\n                                                markerColor='bg-map-marker-route'\n                                                active\n                                            />\n                                        }\n                                    />\n                                    <Marker\n                                        position={{ lat: 48.45, lng: 11.38 }}\n                                        icon={\n                                            <SingleMapMarker iconNames={['truck']} markerColor='bg-map-marker-asset' />\n                                        }\n                                    />\n                                    <Marker\n                                        position={{ lat: 48.45, lng: 11.48 }}\n                                        icon={\n                                            <SingleMapMarker iconNames={['factory']} markerColor='bg-map-marker-poi' />\n                                        }\n                                    />\n                                    <Marker\n                                        position={{ lat: 48.45, lng: 11.58 }}\n                                        icon={\n                                            <SingleMapMarker\n                                                iconNames={['geofence']}\n                                                markerColor='bg-map-marker-geofence'\n                                            />\n                                        }\n                                    />\n                                    <Marker\n                                        position={{ lat: 48.45, lng: 11.68 }}\n                                        icon={\n                                            <SingleMapMarker iconNames={['route']} markerColor='bg-map-marker-route' />\n                                        }\n                                    />\n                                    <MarkerLayer data={clusterData} simpleTheme={simpleTheme} eps={500} />\n                                </>\n                            );\n                        }}\n                    </Map>\n\n                    <div className='from-group display-flex gap-15 flex-wrap margin-top-15'>\n                        <div className='min-width-150'>\n                            <label className='margin-0'>Map Type</label>\n                            <Select\n                                placeholder='Please select...'\n                                options={mapTypeOptions}\n                                value={mapTypeOptionId ? [mapTypeOptionId] : []}\n                                onChange={handleChangeMapType}\n                            />\n                        </div>\n                        <div className='min-width-200'>\n                            <label className='margin-0'>Map Layer</label>\n                            <Multiselect\n                                placeholder='Please select...'\n                                options={mapLayerOptions}\n                                value={mapLayerOptionIds}\n                                onChange={handleChangeMapLayers}\n                            />\n                        </div>\n                        <div className='min-width-150'>\n                            <label className='margin-0'>Language</label>\n                            <Select options={languageOptions} value={[language]} onChange={handleChangeLanguage} />\n                        </div>\n                        <div className='width-100'>\n                            <label className='margin-0'>Zoom</label>\n                            <NumberControl min={1} max={19} value={currentZoom} step={1} onChange={handleChangeZoom} />\n                        </div>\n                        <div className='width-100'>\n                            <label className='margin-0'>Min zoom</label>\n                            <NumberControl min={1} max={19} value={minZoom} step={1} onChange={handleChangeMinZoom} />\n                        </div>\n                        <div className='width-100'>\n                            <label className='margin-0'>Max zoom</label>\n                            <NumberControl min={1} max={20} value={maxZoom} step={1} onChange={handleChangeMaxZoom} />\n                        </div>\n                        <div className='min-width-100'>\n                            <label className='margin-0'>Map center</label>\n                            <div>\n                                <Button onClick={handleResetMapPosition}>Reset position</Button>\n                            </div>\n                        </div>\n                        <div className='min-width-100'>\n                            <label className='margin-0'>Cluster</label>\n                            <Checkbox\n                                checked={showClusterOption}\n                                onClick={handleChangeCluster}\n                                className='checkbox padding-y-5'\n                            >\n                                Show cluster\n                            </Checkbox>\n                        </div>\n                        <div className='min-width-200'>\n                            <label className='margin-0'>Rendering</label>\n                            <div className='display-flex gap-20'>\n                                <Checkbox\n                                    checked={enableWebGL}\n                                    onClick={handleToggleWebGL}\n                                    className='checkbox padding-y-5'\n                                >\n                                    WebGL vector tiles\n                                </Checkbox>\n                            </div>\n                            <div className='display-flex gap-20'>\n                                <Checkbox\n                                    checked={enableDevicePixelRatio}\n                                    onClick={handleToggleDevicePixelRatio}\n                                    className='checkbox padding-y-5'\n                                >\n                                    Use device pixel ratio\n                                </Checkbox>\n                            </div>\n                        </div>\n                        <div className='min-width-200'>\n                            <label className='margin-0'>Map center</label>\n                            <div>\n                                <Position latitude={center.lat} longitude={center.lng} />\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n                {mapLayerOptionIds.includes(MAP_LAYER_INCIDENTS) && (\n                    <IncidentsList\n                        mapLayer={mapLayerOptionIds}\n                        incidents={incidents}\n                        api={mapApiRef.current}\n                        onIncidentSelect={(pos: MapPosition) => {\n                            // at zoom level 16 the incident cluster is dissolved\n                            setCurrentZoom(16);\n                            setCenter(pos);\n                        }}\n                        onPositionChange={(pos: MapPosition, zoom: number) => {\n                            setCenter(pos);\n                            setCurrentZoom(zoom);\n                        }}\n                    />\n                )}\n            </div>\n        </>\n    );\n};\n\ntype IncidentItemProps = {\n    incident: IncidentDataPoint;\n    api?: MapApi;\n    onClick: (position: MapPosition) => void;\n};\n\nconst IncidentItem = (props: IncidentItemProps) => {\n    const { api, incident, onClick } = props;\n    const { id, description, position, tooltipContent } = incident;\n\n    const [showInfo, setShowInfo] = useState(false);\n\n    const handleGoToDataPoint = () => onClick(position);\n\n    return (\n        <div\n            key={id}\n            className='list-group-item cursor-pointer hover-bg-lightest'\n            onClick={handleGoToDataPoint}\n            onMouseEnter={() => setShowInfo(true)}\n            onMouseLeave={() => setShowInfo(false)}\n        >\n            <div className='line-height-125rel margin-bottom-5'>{description.value}</div>\n            <div className='text-size-12 text-dark text-italic text-color-dark'>{JSON.stringify(position)}</div>\n            {showInfo && (\n                <InfoBubble api={api} position={position} content={tooltipContent} markerOffset={{ x: 0, y: -31 }} />\n            )}\n        </div>\n    );\n};\n\ntype IncidentsListProps = {\n    mapLayer: string[];\n    incidents?: MapIncidents | undefined;\n    api?: MapApi;\n    onIncidentSelect: (position: MapPosition) => void;\n    onPositionChange: (position: MapPosition, zoom: number) => void;\n};\n\nconst IncidentsList = (props: IncidentsListProps) => {\n    const { mapLayer, incidents, api, onIncidentSelect, onPositionChange } = props;\n\n    const [previousPosition, setPreviousPosition] = useState<MapPosition | undefined>();\n    const [previousZoom, setPreviousZoom] = useState<number | undefined>();\n\n    const handleGoBack = () => {\n        if (previousPosition && previousZoom) {\n            onPositionChange(previousPosition, previousZoom);\n            setPreviousPosition(undefined);\n        }\n    };\n\n    const handleGoToDataPoint = (pos: MapPosition) => {\n        // mapApiRef.current?.map.setCenter(pos, true);\n        // mapApiRef.current?.map.setZoom(16, true);\n\n        setPreviousPosition(api?.map.getCenter());\n        setPreviousZoom(api?.map.getZoom());\n\n        onIncidentSelect(pos);\n    };\n\n    return (\n        <div className='max-width-300-lg min-width-300-lg'>\n            <div className='display-flex justify-content-between align-items-end'>\n                <label>Incidents</label>\n                {previousPosition ? (\n                    <div className='btn btn-link btn-link-inline margin-bottom-5' onClick={handleGoBack}>\n                        <span className='rioglyph rioglyph-arrow-left' />\n                        <span>Previous position</span>\n                    </div>\n                ) : (\n                    <div />\n                )}\n            </div>\n            <div className='list-group border rounded max-height-500 overflow-auto'>\n                {mapLayer.includes(MAP_LAYER_INCIDENTS) && !incidents && (\n                    <div className='list-group-item text-color-dark text-italic'>\n                        Too many incidents. Please zoom in.\n                    </div>\n                )}\n                {incidents?.results.length === 0 && (\n                    <div className='list-group-item text-color-dark text-italic'>No incidents found.</div>\n                )}\n                {incidents?.results?.map(incident => (\n                    <IncidentItem key={incident.id} api={api} incident={incident} onClick={handleGoToDataPoint} />\n                ))}\n            </div>\n        </div>\n    );\n};\n\ntype MapSettingsChargingStationsItemProps = {\n    isActive: boolean;\n    label?: string | JSX.Element;\n    onToggle: () => void;\n};\n\nexport const MapSettingsChargingStationsItem = (props: MapSettingsChargingStationsItemProps) => {\n    const { isActive = false, label, onToggle = () => {} } = props;\n\n    const iconClasses = classNames(\n        'display-flex',\n        'justify-content-center',\n        'align-items-center',\n        'rioglyph rioglyph-filling-e-station',\n        'height-40 width-40',\n        'text-size-200pct',\n        isActive ? 'text-color-highlight' : 'text-color-gray'\n    );\n\n    const icon = <span className={iconClasses} />;\n\n    return (\n        <MapSettingsItem\n            className='MapSettingsChargingStations text-size-15'\n            onClick={onToggle}\n            isActive={isActive}\n            activeIcon={icon}\n            inactiveIcon={icon}\n            label={label}\n        />\n    );\n};\n\ntype MapSettingsGeofenceItemProps = {\n    isActive: boolean;\n    label?: string | JSX.Element;\n    onToggle: () => void;\n};\n\nexport const MapSettingsGeofenceItem = (props: MapSettingsGeofenceItemProps) => {\n    const { isActive = false, label, onToggle = () => {} } = props;\n\n    const iconClasses = classNames(\n        'display-flex',\n        'justify-content-center',\n        'align-items-center',\n        'rioglyph rioglyph-geofence',\n        'height-40 width-40',\n        'text-size-200pct',\n        isActive ? 'text-color-highlight' : 'text-color-gray'\n    );\n\n    const icon = <span className={iconClasses} />;\n\n    return (\n        <MapSettingsItem\n            className='MapSettingsGeofences text-size-15'\n            onClick={onToggle}\n            isActive={isActive}\n            activeIcon={icon}\n            inactiveIcon={icon}\n            label={label}\n        />\n    );\n};\n\nexport default FullSettingsExample;"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "Settings examples",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 2",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"display-grid grid-cols-2 gap-15\"><div><label>No settings</label><div class=\"Map position-relative map-type-default \" style=\"height: 200px;\"><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=\"448\" height=\"200\" data-engine=\"three.js r152\" style=\"position: absolute; left: 0px; top: 0px; width: 448px; height: 200px;\"></canvas><canvas width=\"448\" height=\"200\" style=\"position: absolute; left: 0px; top: 0px; width: 448px; height: 200px; display: none;\"></canvas><div style=\"position: absolute; height: 100%; width: 100%; z-index: 1;\"><div style=\"position: absolute; pointer-events: none; width: 448px; height: 200px; 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=\"98\"><polyline style=\"fill:none; stroke:white; stroke-width:4\" points=\"2 2 2 10 96 10 96 2\"></polyline><polyline style=\"fill:none; stroke:black; stroke-width:2\" points=\"2 2 2 10 96 10 96 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></div></div><div><label>Without cluster settings</label><div class=\"Map position-relative map-type-terrain \" style=\"height: 200px;\"><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;\"><div style=\"position: absolute; height: 100%; width: 100%; z-index: 0;\"><canvas width=\"447\" height=\"200\" style=\"position: absolute; left: 0px; top: 0px; width: 447px; height: 200px; z-index: 0;\"></canvas><div style=\"position: absolute; pointer-events: none; width: 447px; height: 200px; 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=\"98\"><polyline style=\"fill:none; stroke:white; stroke-width:4\" points=\"2 2 2 10 96 10 96 2\"></polyline><polyline style=\"fill:none; stroke:black; stroke-width:2\" points=\"2 2 2 10 96 10 96 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\" tabindex=\"-1\">Map view</div><div class=\"H_btn H_el\" tabindex=\"-1\">Satellite</div><div class=\"H_btn H_el\" tabindex=\"-1\">Terrain</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\">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\"><path fill=\"#939BA8\" fill-rule=\"evenodd\" d=\"m0 20.2 20 11.333L40 20.2 20 8.867 0 20.2zm26.737-6.121c-.891.5-1.763.96-2.756 1.25-.073.02-.146.039-.22.057-.397-.188-.793-.374-1.186-.557a81.547 81.547 0 0 1-1.507-.71c-.245-.119-.487-.245-.733-.37a98.714 98.714 0 0 0 2.957-1.623l3.445 1.953zm3.755 2.129c-.924.518-1.918 1.035-2.961 1.298a35.637 35.637 0 0 0-1.605-.996 27.1 27.1 0 0 0-1.752-.925c1.037-.318 1.973-.82 2.873-1.33l3.445 1.953zm3.753 2.126a91.698 91.698 0 0 1-2.974 1.625c-.273-.168-.547-.336-.814-.51-.536-.344-1.065-.7-1.592-1.055-.332-.224-.669-.449-1.007-.672 1.063-.309 2.06-.84 2.943-1.34l3.444 1.952zm3.293 1.866-2.984 1.69a108.786 108.786 0 0 1-2.983-1.743c1.003-.53 1.997-1.076 2.982-1.639l2.985 1.692zm-32.09-1.692a98.34 98.34 0 0 0 2.982 1.639c-1.01.616-2.027 1.199-2.984 1.743L2.463 20.2l2.985-1.692zM9.2 16.383c.882.497 1.88 1.03 2.942 1.34-.339.224-.674.449-1.004.67-.529.356-1.058.713-1.593 1.058-.268.173-.542.342-.815.51-1.008-.523-2-1.075-2.974-1.626L9.2 16.383zm7.508-4.255c.966.547 1.954 1.1 2.956 1.624-.244.124-.487.25-.733.37-.5.242-1.003.476-1.508.71-.391.18-.787.366-1.183.555-.073-.02-.143-.035-.22-.059-.993-.29-1.866-.747-2.758-1.25l3.446-1.95zm9.061 4.642c.454.262.9.543 1.342.827a5.05 5.05 0 0 1-1.106.085c-.444-.014-.832-.047-1.21-.078a15.38 15.38 0 0 0-.956-.062 16.057 16.057 0 0 0-.505-.54c-.488-.494-.956-.893-1.491-1.169.207.018.412.03.623.03a5.37 5.37 0 0 0 1.26-.155c.69.33 1.38.676 2.043 1.062zm-9.494-1.064c.477.113.883.156 1.26.156.218 0 .428-.014.64-.032-.544.279-1.019.677-1.493 1.158-.178.18-.35.365-.52.554-.319.01-.637.03-.955.062-.377.031-.766.066-1.21.078a5.32 5.32 0 0 1-1.105-.085c.44-.284.887-.563 1.34-.826.66-.387 1.352-.733 2.043-1.065zm3.734-.003c1.358.012 2.193.587 3.1 1.509.108.108.212.223.316.335-.888.046-1.728.345-2.806 1.386-.214.208-.42.424-.62.642-.2-.218-.406-.434-.62-.642-1.078-1.041-1.918-1.339-2.808-1.384.11-.117.217-.236.329-.35.907-.919 1.743-1.488 3.109-1.496zm-6.004 2.28c.41-.015.82-.042 1.228-.08.23-.02.447-.038.655-.05-.342.4-.678.806-1.006 1.217-.194.24-.387.479-.582.716-.669.81-1.254 1.432-1.84 1.964-.383-.182-.766-.36-1.144-.536a87.688 87.688 0 0 1-1.509-.71c-.255-.124-.506-.255-.76-.382.223-.139.448-.276.666-.418.537-.347 1.07-.7 1.598-1.06.402-.27.811-.545 1.225-.815.48.108.972.17 1.468.154h.001zm.532 1.992c.197-.237.391-.478.585-.719.382-.472.773-.954 1.185-1.418.952-.003 1.742.232 2.857 1.308.218.21.426.431.631.656-.416.472-.812.957-1.197 1.435-.526.653-1.07 1.33-1.663 1.945-.229.238-.468.46-.712.675-.511-.333-1.03-.66-1.56-.967-.622-.36-1.266-.69-1.91-1a18.968 18.968 0 0 0 1.784-1.915zm2.621 3.415c.603-.625 1.151-1.306 1.68-1.966.374-.464.757-.934 1.161-1.392.402.458.787.928 1.16 1.392.531.66 1.08 1.341 1.68 1.966.217.225.443.436.673.64-.374.246-.744.495-1.108.738-.53.358-1.061.715-1.6 1.063-.265.171-.536.336-.805.503-.27-.167-.54-.332-.805-.503a82.344 82.344 0 0 1-1.6-1.063c-.364-.243-.734-.492-1.108-.738.23-.203.456-.413.672-.64zm5.906-.206c-.593-.615-1.136-1.29-1.662-1.945a39.25 39.25 0 0 0-1.198-1.435c.204-.225.414-.446.632-.657 1.114-1.076 1.905-1.31 2.857-1.307.41.462.802.944 1.182 1.414.197.244.394.488.594.73a19.38 19.38 0 0 0 1.777 1.906c-.645.312-1.29.64-1.911 1.001a35.08 35.08 0 0 0-1.56.968c-.245-.216-.482-.44-.71-.675h-.001zm2.643-3.39c-.2-.24-.396-.484-.594-.728a46.52 46.52 0 0 0-1.005-1.214c.209.013.425.03.658.05.363.032.774.067 1.226.081a5.73 5.73 0 0 0 1.467-.159c.415.272.826.546 1.228.818.53.358 1.06.715 1.598 1.06.22.143.445.28.666.418-.252.129-.505.26-.76.382-.502.244-1.007.477-1.512.712-.377.174-.757.352-1.138.533-.587-.532-1.172-1.153-1.834-1.953zm-4.262-4.304a15.1 15.1 0 0 0-1.268-.09h-.003c-.013 0-.024.005-.035.007-.044-.002-.082-.008-.127-.008h-.003c-.045 0-.087.006-.132.008a.171.171 0 0 0-.057-.007c-.49.01-.903.052-1.269.09-.622.063-1.146.117-1.83.002.278-.13.556-.26.832-.387.505-.235 1.011-.47 1.513-.713.313-.151.622-.31.931-.47a45.06 45.06 0 0 0 2.444 1.181c.276.128.555.257.833.389-.683.113-1.205.061-1.829-.002zm-8.492-1.235c.901.51 1.836 1.012 2.873 1.33-.592.29-1.182.593-1.754.925a37.06 37.06 0 0 0-1.603.996c-1.045-.263-2.04-.779-2.963-1.298l3.447-1.953zm-4.208 6.052c.306.157.614.315.923.466.502.244 1.008.478 1.513.712.342.16.687.318 1.031.482-.878.758-1.787 1.34-3.015 2.05l-3.444-1.95c.965-.55 1.982-1.139 2.992-1.76zm3.766 1.802c.674.324 1.35.664 1.997 1.041.5.29.993.598 1.478.915-.982.83-2.04 1.502-3.035 2.078L9.506 24.19c1.192-.694 2.11-1.294 3.006-2.08l-.001-.001zm3.738 2.129c.395.26.786.522 1.17.78.533.36 1.065.716 1.605 1.066.227.144.457.288.688.43-1.02.622-2.042 1.21-3.006 1.757l-3.452-1.956c.986-.576 2.027-1.246 2.995-2.077zM20 26.693c1.01.62 2.025 1.207 2.985 1.753L20 30.139l-2.985-1.692c.962-.547 1.975-1.134 2.985-1.754zm.286-.178c.229-.143.46-.283.687-.43.54-.347 1.073-.706 1.605-1.065.385-.26.776-.52 1.172-.78.97.83 2.009 1.5 2.995 2.077l-3.452 1.956a112.097 112.097 0 0 1-3.007-1.758zm3.727-2.45c.486-.315.98-.625 1.478-.915.652-.373 1.319-.72 1.998-1.04.894.787 1.812 1.385 3.007 2.08l-3.446 1.954c-.994-.578-2.053-1.247-3.037-2.08v.001zm3.777-2.1c.343-.162.685-.322 1.023-.478.508-.233 1.014-.47 1.517-.713.31-.15.617-.308.923-.465 1.01.621 2.027 1.208 2.992 1.757L30.8 24.02c-1.205-.7-2.122-1.289-3.01-2.053v-.002zM20 13.584a94.01 94.01 0 0 1-2.983-1.63L20 10.26l2.984 1.69A89.36 89.36 0 0 1 20 13.583v.001z\"></path></svg></div><div class=\"dropdown\"></div></div></div><div class=\"MapSettingsTile MapLayerSettings\"><div class=\"MapSettingsTile-inner position-relative\"><div class=\"MapSettingsButton\"><div class=\"height-40 width-40 text-size-16 display-grid place-items-center hover-scale-110\"><span class=\"rioglyph rioglyph-construction text-color-gray text-size-200pct\"></span></div></div><div class=\"dropdown\"></div></div></div></div></div></div><div><label>Without cluster and map layer settings</label><div class=\"Map position-relative map-type-fleet_style \" style=\"height: 200px;\"><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;\"><div style=\"position: absolute; height: 100%; width: 100%; z-index: 0;\"><canvas width=\"447\" height=\"200\" style=\"position: absolute; left: 0px; top: 0px; width: 447px; height: 200px; z-index: 0;\"></canvas><div style=\"position: absolute; pointer-events: none; width: 447px; height: 200px; 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=\"98\"><polyline style=\"fill:none; stroke:white; stroke-width:4\" points=\"2 2 2 10 96 10 96 2\"></polyline><polyline style=\"fill:none; stroke:black; stroke-width:2\" points=\"2 2 2 10 96 10 96 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\" tabindex=\"-1\">Map view</div><div class=\"H_btn H_el\" tabindex=\"-1\">Satellite</div><div class=\"H_btn H_el\" tabindex=\"-1\">Terrain</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\">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\"><path fill=\"#939BA8\" d=\"M.02 20.2L20 31.522 39.98 20.2 20 8.878.02 20.2zm5.363 1.856S2.03 20.132 2.03 20.134l3.353-1.902 3.354 1.9-3.354 1.924zM9 24.118l-3.354-1.923L9 20.295l3.353 1.899L9 24.118zm3.634 2.037s-3.353-1.925-3.353-1.923l3.353-1.9 3.353 1.898-3.353 1.925zm3.636 2.04l-3.353-1.923 3.353-1.9 3.353 1.899-3.353 1.924zm3.637 2.075l-3.353-1.923 3.353-1.9 3.354 1.899-3.354 1.924zM9.13 20.006s-3.353-1.924-3.353-1.922l3.353-1.902 3.354 1.9-3.354 1.924zm3.617 2.062l-3.354-1.923 3.354-1.9 3.353 1.899-3.353 1.924zm3.634 2.037l-3.353-1.923 3.353-1.9 3.353 1.899-3.353 1.924zm3.636 2.04s-3.353-1.924-3.353-1.922l3.353-1.902 3.353 1.9-3.353 1.924zm3.637 2.075L20.3 26.297l3.353-1.9 3.354 1.899-3.354 1.924h.001zM12.78 17.916s-3.353-1.924-3.353-1.922l3.353-1.902 3.353 1.9-3.353 1.924zm3.616 2.062l-3.353-1.923 3.353-1.9 3.353 1.899-3.353 1.924zm3.635 2.037s-3.353-1.925-3.353-1.923l3.353-1.901 3.353 1.9-3.353 1.924zm3.636 2.04l-3.353-1.923 3.353-1.9 3.353 1.899-3.353 1.924zm3.637 2.075l-3.353-1.923 3.353-1.9 3.353 1.899-3.353 1.924zM16.387 15.842l-3.353-1.923 3.353-1.9 3.354 1.899-3.354 1.924zm3.616 2.062L16.65 15.98l3.353-1.9 3.354 1.899-3.354 1.924v.001zm3.635 2.037s-3.353-1.925-3.353-1.923l3.353-1.901 3.353 1.9-3.353 1.924zm3.636 2.04l-3.353-1.923 3.353-1.9 3.353 1.899-3.353 1.924zm3.637 2.075s-3.353-1.925-3.353-1.923l3.353-1.9 3.353 1.898-3.353 1.925zm-10.83-10.343s-3.354-1.925-3.354-1.923l3.353-1.901 3.353 1.9-3.353 1.924h.001zm3.615 2.061s-3.353-1.924-3.353-1.922l3.353-1.901 3.354 1.899-3.354 1.924zm3.635 2.037s-3.353-1.924-3.353-1.922l3.353-1.902 3.353 1.9-3.353 1.924zm3.636 2.04s-3.353-1.924-3.353-1.922l3.353-1.901 3.353 1.9-3.353 1.923zm3.637 2.075s-3.353-1.924-3.353-1.922l3.353-1.901 3.353 1.899-3.353 1.924z\"></path><path fill=\"#FFF\" d=\"M11.385 21.704v-5.7c0-.078.174-1.564.522-4.46l4.418-2.412 5.953 3.492v1.168l4.912 2.864v2.615l-.387.182-9.347 5.58-6.07-3.329h-.001z\"></path><path fill=\"#939BA8\" d=\"M22.495 19.058l4.642-2.433-4.642-2.767z\"></path><path fill=\"#939BA8\" fill-opacity=\".5\" d=\"M11.426 15.832l5.848 3.3.431-3.969-5.824-3.436z\"></path><path fill=\"#939BA8\" d=\"M17.794 15.046l4.423-2.493-5.94-3.41-4.364 2.439 5.881 3.464zm-.505 4.267l-5.88-3.337v5.738l5.88 3.302v-5.703zm9.661.134l.229-.138v-2.528l-4.856 2.537V12.65l-4.454 2.507-.437 4.185v5.728l.402-.24v-.126l-.002-.011c-.002-.005-.005-.01-.005-.015l-.034-.29.001-.01v-.01l.033-.36.002-.008.001-.009.11-.376c0-.003.002-.004.003-.007s0-.005.002-.008l.176-.36.224-.35c.008-.01.009-.014.01-.016l.27-.274.004-.002.28-.227.012-.006c.004-.002.006-.006.011-.007l.277-.111c.004-.002.008-.002.012-.002l.01-.004.269-.034h.017l.021.004.22.077.015.008.015.009.176.154.013.016.01.014.11.25c.003.003.002.007.003.011.002.005.004.009.004.013l.042.317v.023l-.042.351-.002.008-.001.008 4.616-2.71-.035-.08-.002-.01-.005-.013-.041-.308v-.023l.041-.351.003-.007.11-.376.173-.38.234-.347a.019.019 0 0 1 .005-.005l.004-.006.26-.274c.007-.005.008-.007.01-.01l.285-.222.012-.006c.004-.002.006-.005.01-.006l.278-.111c.003-.002.007-.002.01-.002l.011-.004.26-.034h.019l.02.004.228.077c.006.002.01.006.016.009.004.003.01.004.015.009l.176.153c.006.006.01.01.013.016l.01.014.11.25c.003.004.003.009.003.013l.004.013.034.317v.019l-.034.35-.004.01v.008z\"></path><path fill=\"#939BA8\" d=\"M18.098 24.861l.15.138.183.064.234-.022.257-.118.262-.187.259-.279.21-.322.17-.356.04-.138h.001v-.001l.065-.216.04-.33-.039-.293-.096-.218-.148-.129-.184-.064-.237.03-.254.102-.264.21-.258.264-.21.33-.171.348-.105.36-.032.342.031.267.062.142.034.076zm6.849-4.021l.14.136.19.065.229-.03.265-.112.261-.185.25-.28.22-.322.17-.356.04-.138v-.001l.065-.214.031-.332-.03-.293-.096-.217-.148-.13-.19-.064-.23.03-.256.102-.271.212-.25.263-.219.321-.162.355-.105.355-.04.331.04.284.062.143.034.077z\"></path></g></svg></div><div class=\"dropdown\"></div></div></div></div></div></div><div><label>Static map without interaction</label><div class=\"Map position-relative map-type-satellite \" style=\"height: 200px;\"><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;\"><div style=\"position: absolute; height: 100%; width: 100%; z-index: 0;\"><canvas width=\"447\" height=\"200\" style=\"position: absolute; left: 0px; top: 0px; width: 447px; height: 200px; z-index: 0;\"></canvas><div style=\"position: absolute; pointer-events: none; width: 447px; height: 200px; 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=\"98\"><polyline style=\"fill:none; stroke:white; stroke-width:4\" points=\"2 2 2 10 96 10 96 2\"></polyline><polyline style=\"fill:none; stroke:black; stroke-width:2\" points=\"2 2 2 10 96 10 96 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\" tabindex=\"-1\">Map view</div><div class=\"H_btn H_el\" tabindex=\"-1\">Satellite</div><div class=\"H_btn H_el\" tabindex=\"-1\">Terrain</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\">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=\"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=\"m34.855 19.215 5.206 2.95-19.98 11.322L.101 22.165l4.948-2.804-.462.742h1.115l-.336.473-2.805 1.59 2.98 1.688c.778-.443 1.594-.91 2.415-1.4h.156v.259c-.767.46-1.53.9-2.263 1.316l3.44 1.95c1.227-.71 2.136-1.291 3.013-2.049-.344-.163-.688-.322-1.03-.48-.44-.205-.882-.41-1.32-.62v-.336c.482.233.968.459 1.455.684.378.176.76.353 1.143.536.403-.367.806-.776 1.236-1.26h.331l-.157-.198a26.9 26.9 0 0 0 .427-.504c.196-.238.388-.477.582-.716.325-.404.658-.812 1.006-1.215a19.65 19.65 0 0 0-.656.049c-.363.031-.775.066-1.226.08-.286.01-.57-.007-.852-.044l-.196-.33c.341.057.688.086 1.04.074.443-.013.833-.047 1.209-.079.336-.03.65-.055.954-.061.17-.189.342-.374.52-.553.473-.481.948-.88 1.49-1.157-.212.02-.426.03-.639.031a5.36 5.36 0 0 1-1.258-.156c-.69.332-1.381.678-2.04 1.065-.44.254-.872.523-1.299.798l-.156-.263c.425-.275.857-.54 1.294-.796a28.137 28.137 0 0 1 1.752-.925c-.587-.18-1.142-.42-1.676-.685l.711.002c.373.164.756.31 1.159.427.077.024.147.04.22.058.34-.162.68-.322 1.017-.478l.714.002-.42.195-.831.386c.684.115 1.208.062 1.829-.001.087-.01.177-.018.27-.027v.418c-.73.237-1.309.697-1.92 1.316-.112.113-.22.233-.328.35.889.045 1.728.342 2.804 1.383.215.207.42.423.62.641.2-.218.405-.434.62-.641 1.076-1.041 1.915-1.34 2.803-1.385-.104-.112-.208-.227-.316-.335-.614-.625-1.196-1.09-1.93-1.328v-.419l.268.027c.623.063 1.145.115 1.827.001-.425-.201-.851-.4-1.279-.594h.725c.345.16.692.324 1.04.49.072-.02.142-.037.22-.059a9.43 9.43 0 0 0 1.164-.43h.708c-.536.266-1.092.506-1.68.686.59.29 1.18.593 1.75.925a34.77 34.77 0 0 1 1.603.995 7.72 7.72 0 0 0 .822-.26h.775c-.41.185-.834.349-1.27.475.338.223.674.448 1.006.671.527.356 1.055.711 1.59 1.055.268.173.542.341.814.51 1-.523 1.99-1.064 2.97-1.624l-1.915-1.086h2.46-.001Zm-5.981-3.39-.62 1.044-1.133-.643c-.284.16-.572.32-.865.475l-.19-.245c.25-.13.497-.267.745-.406l-1.892-1.073-.827-1.066h1.394l-.005-.008 3.393 1.922Zm-14.142-1.95-.023.036h1.395l-.823 1.045-1.93 1.092c.25.141.498.279.748.41l-.191.243a30.88 30.88 0 0 1-.866-.475l-1.489.844-.62-1.043 3.799-2.153v.001Zm22.87 8.29-2.983-1.69c-.973.552-1.968 1.108-2.979 1.637 1.01.616 2.023 1.198 2.98 1.742l2.982-1.689Zm-11.757-3.427a29.093 29.093 0 0 0-2.04-1.061 5.36 5.36 0 0 1-1.259.156c-.211 0-.416-.013-.623-.03.535.275 1.003.674 1.49 1.168.173.176.34.357.504.539.304.006.62.033.956.061.377.032.764.065 1.208.079.373.014.741-.019 1.105-.085-.44-.286-.887-.562-1.34-.827h-.001Zm-11.22 3.202a18.949 18.949 0 0 1-1.783 1.914c.644.31 1.287.638 1.909.998a35.03 35.03 0 0 1 1.558.967c.244-.216.482-.437.711-.675.593-.614 1.136-1.29 1.661-1.943.385-.478.78-.962 1.197-1.434a14.496 14.496 0 0 0-.631-.655c-1.113-1.075-1.903-1.31-2.854-1.306-.406.462-.8.935-1.184 1.416-.194.24-.388.481-.585.718h.001Zm2.618 3.412a11.06 11.06 0 0 1-.671.64c.373.245.743.493 1.107.737.53.358 1.06.715 1.598 1.061.264.171.535.336.804.503.27-.167.54-.332.804-.503.538-.347 1.068-.704 1.599-1.061.363-.244.733-.492 1.106-.737a12.127 12.127 0 0 1-.67-.64c-.601-.624-1.15-1.305-1.68-1.964a41.762 41.762 0 0 0-1.159-1.391c-.403.457-.786.928-1.16 1.391-.528.659-1.076 1.34-1.678 1.964Zm5.9-.206c.228.237.468.459.71.674.51-.333 1.03-.66 1.558-.967.622-.36 1.266-.688 1.91-1a19.294 19.294 0 0 1-1.775-1.903c-.2-.242-.397-.486-.594-.73-.38-.47-.77-.95-1.18-1.413-.952-.003-1.742.231-2.855 1.307-.218.21-.427.43-.63.655.416.47.811.956 1.196 1.434.525.654 1.068 1.328 1.66 1.943Zm2.64-3.386c.661.798 1.246 1.42 1.832 1.95.381-.18.761-.358 1.137-.532.505-.235 1.01-.467 1.51-.711.255-.123.508-.253.76-.382-.221-.138-.445-.275-.665-.417-.538-.345-1.066-.702-1.597-1.06-.402-.271-.812-.545-1.226-.817a5.73 5.73 0 0 1-1.466.16 21.788 21.788 0 0 1-1.225-.081c-.232-.02-.449-.038-.657-.05.346.4.68.81 1.004 1.212.197.243.394.487.593.728ZM12.6 24.072c-.895.786-1.811 1.385-3.003 2.078l3.444 1.953c.993-.576 2.05-1.247 3.031-2.077a33.171 33.171 0 0 0-1.476-.914 28.18 28.18 0 0 0-1.996-1.04Zm3.735 2.127c-.967.83-2.007 1.5-2.992 2.075l3.449 1.954a112.11 112.11 0 0 0 3.003-1.756 41.95 41.95 0 0 1-.687-.43 96.77 96.77 0 0 1-1.604-1.063c-.384-.258-.775-.52-1.169-.78Zm3.746 2.452c-1.009.62-2.02 1.206-2.982 1.753l2.982 1.69 2.982-1.692a103.44 103.44 0 0 1-2.982-1.75v-.001Zm.285-.177c1.02.622 2.042 1.208 3.005 1.756l3.448-1.955c-.985-.575-2.022-1.245-2.991-2.075-.396.26-.787.52-1.171.78-.532.359-1.064.717-1.604 1.064-.227.147-.458.287-.687.43Zm3.724-2.448c.984.832 2.04 1.5 3.034 2.077l3.443-1.951c-1.195-.695-2.11-1.293-3.005-2.079-.674.324-1.348.664-1.995 1.04-.5.292-.992.596-1.477.913Zm3.774-2.097c.887.764 1.803 1.352 3.006 2.051l3.442-1.95a102.96 102.96 0 0 1-2.989-1.757c-.306.158-.613.315-.922.466-.502.243-1.01.478-1.516.712-.338.156-.679.316-1.021.478Z\"></path><path fill=\"#C9CDD3\" d=\"m5.195 21.77 1.545-2.026h-.858l3.192-5.32 3.158 5.32h-.858l1.58 2.025H9.692v2.78H8.455v-2.78H5.194h.001v.001Zm10.038-5.759 1.93-2.531h-1.072l3.99-6.651 3.948 6.651h-1.072l1.974 2.531h-4.076v3.475h-1.548v-3.475h-4.076.002Zm13.034 2.656 1.158-1.519h-.644l2.395-3.99 2.368 3.99h-.643l1.184 1.519H31.64v2.085h-.929v-2.085h-2.445.001Z\"></path></g></svg></div><div class=\"dropdown\"></div></div></div></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import Map from '@rio-cloud/rio-uikit/Map';\nimport MapSettings from '@rio-cloud/rio-uikit/MapSettings';\nimport MapLayerSettings from '@rio-cloud/rio-uikit/MapLayerSettings';\nimport MapTypeSettings from '@rio-cloud/rio-uikit/MapTypeSettings';\nimport MapLayerIncidentsItem from '@rio-cloud/rio-uikit/MapLayerIncidentsItem';\nimport MapLayerRoadRestrictionsItem from '@rio-cloud/rio-uikit/MapLayerRoadRestrictionsItem';\nimport MapLayerTrafficItem from '@rio-cloud/rio-uikit/MapLayerTrafficItem';\n\nimport { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';\nimport MapSettingsDropdownHeader from '@rio-cloud/rio-uikit/MapSettingsDropdownHeader';\n\nconst SettingsExample = () => {\n    const position = { lat: 48.1351, lng: 11.582 };\n\n    const layers = [\n        <MapSettingsDropdownHeader key='dividerTraffic' label='Traffic overlays' />,\n        <MapLayerTrafficItem key='mapLayerTrafficItem' label='Traffic' />,\n        <MapLayerIncidentsItem key='mapLayerIncidentsItem' label='Incidents' />,\n        <MapLayerRoadRestrictionsItem key='mapLayerRoadRestrictionsItem' label='Road restrictions' />,\n    ];\n\n    return (\n        <div className='display-grid grid-cols-2 gap-15'>\n            <div>\n                <label>No settings</label>\n                <Map\n                    credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}\n                    center={position}\n                    zoom={10}\n                    height={200}\n                    mapSettings={<MapSettings />}\n                />\n            </div>\n            <div>\n                <label>Without cluster settings</label>\n                <Map\n                    credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}\n                    center={position}\n                    zoom={10}\n                    height={200}\n                    mapType={Map.TYPE_TERRAIN}\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                                <MapLayerSettings\n                                    key='mapLayerSettings'\n                                    layers={layers}\n                                    tooltip='Toggle various map overlays'\n                                />,\n                            ]}\n                        />\n                    }\n                />\n            </div>\n            <div>\n                <label>Without cluster and map layer settings</label>\n                <Map\n                    credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}\n                    center={position}\n                    zoom={10}\n                    height={200}\n                    mapType={Map.TYPE_FLEET_STYLE}\n                    mapSettings={\n                        <MapSettings\n                            options={[\n                                <MapTypeSettings\n                                    key='mapTypeSettings'\n                                    tooltip='Change map type'\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            </div>\n            <div>\n                <label>Static map without interaction</label>\n                <Map\n                    credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}\n                    center={position}\n                    zoom={10}\n                    height={200}\n                    disableBehavior\n                    mapType={Map.TYPE_SATELLITE}\n                    enableWebGL={false}\n                    mapSettings={\n                        <MapSettings\n                            options={[\n                                <MapTypeSettings\n                                    key='mapTypeSettings'\n                                    tooltip='Change map type'\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            </div>\n        </div>\n    );\n};\n\nexport default SettingsExample;"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

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

@@ -0,0 +1,34 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:15.523Z",
+    "source": "https://uikit.developers.rio.cloud/#components/mapUtils",
+    "category": "Components",
+    "section": "Map",
+    "slug": "components/maputils",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "01d5357b6189430ce9d66ffdfc68847cc137d00439e78adb9e65d63db79606b6"
+  },
+  "title": "Map utils",
+  "lead": null,
+  "content": [
+    {
+      "heading": "Map utils",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground shadow-default rounded border margin-bottom-20\" data-capture-example-id=\"example-1\"><div class=\"playground-expander\"><ul class=\"expander-list list-group border border-top-only rounded-bottom\" data-capture-code-list-id=\"codelist-1\"><li class=\"list-group-item overflow-hidden expandable open\"><div class=\"expander-list-header expander-list-header-bg\" aria-label=\"expander item header\"><span class=\"expander-list-header-content\"><span class=\"code-sample-header\"></span></span><span class=\"expander-icon rioglyph rioglyph-chevron-down\"></span></div><div class=\"collapse display-block width-100pct\" style=\"opacity: 1; height: auto;\"><div class=\"expander-list-body-wrapper\"><div class=\"expander-list-body\" aria-label=\"expander item body\"><pre class=\"padding-10 margin-bottom-0 language-jsx\" tabindex=\"0\"><code class=\"language-jsx\"><span class=\"token keyword\">import</span> <span class=\"token punctuation\">{</span> useRef<span class=\"token punctuation\">,</span> useState <span class=\"token punctuation\">}</span> <span class=\"token keyword\">from</span> <span class=\"token string\">'react'</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">import</span> isEqual <span class=\"token keyword\">from</span> <span class=\"token string\">'lodash/fp/isEqual'</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// biome-ignore lint/suspicious/noShadowRestrictedNames: &lt;explanation&gt;</span>\n<span class=\"token keyword\">import</span> Map <span class=\"token keyword\">from</span> <span class=\"token string\">'@rio-cloud/rio-uikit/Map'</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">import</span> EventUtils <span class=\"token keyword\">from</span> <span class=\"token string\">'@rio-cloud/rio-uikit/EventUtils'</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">import</span> type <span class=\"token punctuation\">{</span> MapApi<span class=\"token punctuation\">,</span> MapEvent<span class=\"token punctuation\">,</span> Position <span class=\"token punctuation\">}</span> <span class=\"token keyword\">from</span> <span class=\"token string\">'@rio-cloud/rio-uikit/mapTypes'</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">import</span> <span class=\"token punctuation\">{</span> <span class=\"token constant\">UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT</span> <span class=\"token punctuation\">}</span> <span class=\"token keyword\">from</span> <span class=\"token string\">'../uikit_demo_credentials'</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">export</span> <span class=\"token keyword\">default</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">const</span> <span class=\"token punctuation\">[</span>zoom<span class=\"token punctuation\">,</span> setZoom<span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> <span class=\"token function\">useState</span><span class=\"token punctuation\">(</span><span class=\"token number\">10</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token keyword\">const</span> <span class=\"token punctuation\">[</span>center<span class=\"token punctuation\">,</span> setCenter<span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> useState<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">Position</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token plain-text\">(</span><span class=\"token punctuation\">{</span> <span class=\"token literal-property property\">lat</span><span class=\"token operator\">:</span> <span class=\"token number\">48.5</span><span class=\"token punctuation\">,</span> <span class=\"token literal-property property\">lng</span><span class=\"token operator\">:</span> <span class=\"token number\">12.1</span> <span class=\"token punctuation\">}</span><span class=\"token plain-text\">);\n    const mapApiRef = useRef</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">MapApi</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token plain-text\">();\n\n    const eventListenerMap = </span><span class=\"token punctuation\">{</span>\n        <span class=\"token punctuation\">[</span>EventUtils<span class=\"token punctuation\">.</span><span class=\"token constant\">MAP_VIEW_CHANGE_END</span><span class=\"token punctuation\">]</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\"><span class=\"token literal-property property\">event</span><span class=\"token operator\">:</span> MapEvent</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token comment\">// Access the Map ViewModel to retrieve its' LookAtData</span>\n            <span class=\"token comment\">// The View model contains all relevant map data like zoom, position or bounding box.</span>\n            <span class=\"token comment\">// Note: Working with the ViewModel directly requires to round zoom values or to exclude</span>\n            <span class=\"token comment\">// other props from position object. Better, use map utils instead.</span>\n            <span class=\"token keyword\">const</span> target <span class=\"token operator\">=</span> event<span class=\"token punctuation\">.</span>currentTarget<span class=\"token punctuation\">;</span>\n            <span class=\"token keyword\">const</span> lookAtData <span class=\"token operator\">=</span> target<span class=\"token punctuation\">.</span><span class=\"token function\">getViewModel</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">getLookAtData</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n            console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span> lookAtData <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n            <span class=\"token comment\">// Accessing map utils to retrieve map position, zoom and bounding box.</span>\n            <span class=\"token comment\">// This way, you don't have to deal with here map internals or round zoom values etc.</span>\n            <span class=\"token keyword\">const</span> api <span class=\"token operator\">=</span> mapApiRef<span class=\"token punctuation\">.</span>current<span class=\"token punctuation\">;</span>\n            <span class=\"token keyword\">const</span> mapCenter <span class=\"token operator\">=</span> api<span class=\"token operator\">?.</span>utils<span class=\"token operator\">?.</span><span class=\"token function\">getCenter</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n            <span class=\"token keyword\">const</span> mapZoom <span class=\"token operator\">=</span> api<span class=\"token operator\">?.</span>utils<span class=\"token operator\">?.</span><span class=\"token function\">getZoom</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n            <span class=\"token keyword\">const</span> mapBoundingBox <span class=\"token operator\">=</span> api<span class=\"token operator\">?.</span>utils<span class=\"token operator\">?.</span><span class=\"token function\">getBounds</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n            console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span> mapCenter<span class=\"token punctuation\">,</span> mapZoom<span class=\"token punctuation\">,</span> mapBoundingBox <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n            <span class=\"token comment\">// Check for changed values to update local state or to perform other actions</span>\n            <span class=\"token keyword\">const</span> isEqualZoom <span class=\"token operator\">=</span> <span class=\"token function\">isEqual</span><span class=\"token punctuation\">(</span>zoom<span class=\"token punctuation\">,</span> mapZoom<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n            <span class=\"token keyword\">const</span> isEqualPosition <span class=\"token operator\">=</span> <span class=\"token function\">isEqual</span><span class=\"token punctuation\">(</span>center<span class=\"token punctuation\">.</span>lat<span class=\"token punctuation\">,</span> mapCenter<span class=\"token operator\">?.</span>lat<span class=\"token punctuation\">)</span> <span class=\"token operator\">&amp;&amp;</span> <span class=\"token function\">isEqual</span><span class=\"token punctuation\">(</span>center<span class=\"token punctuation\">.</span>lng<span class=\"token punctuation\">,</span> mapCenter<span class=\"token operator\">?.</span>lng<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n            <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token operator\">!</span><span class=\"token punctuation\">(</span>isEqualPosition <span class=\"token operator\">&amp;&amp;</span> isEqualZoom<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n                <span class=\"token comment\">// ... perform some actions</span>\n            <span class=\"token punctuation\">}</span>\n        <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">}</span><span class=\"token plain-text\">;\n\n    return (\n        </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">Map</span></span>\n            <span class=\"token attr-name\">eventListenerMap</span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=</span><span class=\"token punctuation\">{</span>eventListenerMap<span class=\"token punctuation\">}</span></span>\n            <span class=\"token attr-name\">credentials</span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=</span><span class=\"token punctuation\">{</span><span class=\"token constant\">UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT</span><span class=\"token punctuation\">}</span></span>\n            <span class=\"token comment\">// ... other map properties</span>\n        <span class=\"token punctuation\">&gt;</span></span><span class=\"token plain-text\">\n            </span><span class=\"token punctuation\">{</span><span class=\"token parameter\">api</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n                mapApiRef<span class=\"token punctuation\">.</span>current <span class=\"token operator\">=</span> api<span class=\"token punctuation\">;</span>\n\n                <span class=\"token comment\">// if needed, render cluster or marker layer here or return null</span>\n                <span class=\"token keyword\">return</span> <span class=\"token keyword\">null</span><span class=\"token punctuation\">;</span>\n            <span class=\"token punctuation\">}</span><span class=\"token punctuation\">}</span><span class=\"token plain-text\">\n        </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span><span class=\"token class-name\">Map</span></span><span class=\"token punctuation\">&gt;</span></span><span class=\"token plain-text\">\n    );\n};\n</span></code></pre></div></div></div></li></ul></div></div>",
+          "tabs": [
+            {
+              "label": "",
+              "language": "text",
+              "code": "import { useRef, useState } from 'react';\nimport isEqual from 'lodash/fp/isEqual';\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 type { MapApi, MapEvent, Position } from '@rio-cloud/rio-uikit/mapTypes';\nimport { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';\n\nexport default () => {\n    const [zoom, setZoom] = useState(10);\n    const [center, setCenter] = useState<Position>({ lat: 48.5, lng: 12.1 });\n    const mapApiRef = useRef<MapApi>();\n\n    const eventListenerMap = {\n        [EventUtils.MAP_VIEW_CHANGE_END]: (event: MapEvent) => {\n            // Access the Map ViewModel to retrieve its' LookAtData\n            // The View model contains all relevant map data like zoom, position or bounding box.\n            // Note: Working with the ViewModel directly requires to round zoom values or to exclude\n            // other props from position object. Better, use map utils instead.\n            const target = event.currentTarget;\n            const lookAtData = target.getViewModel().getLookAtData();\n\n            console.log({ lookAtData });\n\n            // Accessing map utils to retrieve map position, zoom and bounding box.\n            // This way, you don't have to deal with here map internals or round zoom values etc.\n            const api = mapApiRef.current;\n            const mapCenter = api?.utils?.getCenter();\n            const mapZoom = api?.utils?.getZoom();\n            const mapBoundingBox = api?.utils?.getBounds();\n\n            console.log({ mapCenter, mapZoom, mapBoundingBox });\n\n            // Check for changed values to update local state or to perform other actions\n            const isEqualZoom = isEqual(zoom, mapZoom);\n            const isEqualPosition = isEqual(center.lat, mapCenter?.lat) && isEqual(center.lng, mapCenter?.lng);\n\n            if (!(isEqualPosition && isEqualZoom)) {\n                // ... perform some actions\n            }\n        },\n    };\n\n    return (\n        <Map\n            eventListenerMap={eventListenerMap}\n            credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}\n            // ... other map properties\n        >\n            {api => {\n                mapApiRef.current = api;\n\n                // if needed, render cluster or marker layer here or return null\n                return null;\n            }}\n        </Map>\n    );\n};"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}