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

@@ -0,0 +1,34 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:12.767Z",
+    "source": "https://uikit.developers.rio.cloud/#components/mapCircle",
+    "category": "Components",
+    "section": "Map",
+    "slug": "components/mapcircle",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "08b5a93658e06b57cb96e59c82e2909e256ed0719c308a412e611c618066ab85"
+  },
+  "title": "Circle",
+  "lead": null,
+  "content": [
+    {
+      "heading": "Circle",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"Map position-relative map-type-default \" style=\"height: 300px;\"><div style=\"position: relative; width: 100%; height: 100%; overflow: hidden; -webkit-tap-highlight-color: transparent;\"><div style=\"z-index: 0; width: 100%; height: 100%; direction: ltr; position: absolute; touch-action: none;\"><canvas width=\"908\" height=\"300\" data-engine=\"three.js r152\" style=\"position: absolute; left: 0px; top: 0px; width: 908px; height: 300px;\"></canvas><canvas width=\"908\" height=\"300\" style=\"position: absolute; left: 0px; top: 0px; width: 908px; height: 300px; display: none;\"></canvas><div style=\"position: absolute; height: 100%; width: 100%; z-index: 1;\"><div style=\"position: absolute; pointer-events: none; width: 908px; height: 300px; z-index: 1;\"></div></div></div><div class=\"H_imprint\" style=\"position: absolute; bottom: 0px; right: 0px; left: 0px; z-index: 1; direction: ltr; pointer-events: none; user-select: none; font: 11px &quot;Lucida Grande&quot;, Arial, Helvetica, sans-serif;\"><div class=\"H_logo\" style=\"margin: 0px 0px 16px 16px; display: inline-block;\"><svg height=\"40\" viewBox=\"0 0 47 40\" width=\"47\" xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" fill-rule=\"evenodd\"><path d=\"m45.2054149 8.82876345.6003191.40637037-.2240425.6914074-.4490426 1.38570368c-.1024468.3148889-.6998936 1.9596297-2.43 3.5918519l-.017234.0163704c-.188617.1887407-.3801064.3659259-.5467021.5084444l-.4605319.4285185-.486383.4516296-.1407447-.0702963c-.7257447.4583704-1.4926596.7886667-2.2796809.9831852l.5840426.5864445-.6769149.6817778-2.052766 2.0636296-.169468.1704444-.019149.0192593-2.3821276 2.3958518c-.4902128.8493334-1.1202128 1.6331852-1.8497873 2.3111112-.6031915.6047407-1.2504255 1.1054814-1.935 1.4954814l-.4777659.4805186-4.3247873 4.3506666-.0296808.0298519-.0315958.0269629-2.1532978 1.8171111-.2661702.2253334h-.3485107-3.8948936l-3.968617 3.9914815-1.3547873 1.3616296-.6769148.6808148-.6769149-.6808148-1.3538298-1.3616296-4.80925535-4.837926-3.2687234-3.2875555-1.63436171-1.6437778h2.3112766 4.62255319 2.67223407l-4.71063832-4.7368148-.6769149-.6808148.6769149-.6808148 4.93851062-4.9650371.6769149-.6798518.6769149.6808148 2.7296809 2.7454074c.9363829-.8820741 2.1485106-1.4685185 3.4037234-1.6562963.278617-1.4694815 1.0187234-2.834963 2.168617-3.9885926.5696808-.572 1.1843617-1.0438519 1.8335106-1.4107407l.2901064-.2917778 4.3094681-4.31985187c.5830851-1.0582963 1.4256383-1.78918519 2.0364893-2.12718519l.4471277-.24748148c.3829787-.7617037.9047872-1.47622222 1.5539362-2.12622222 1.510851-1.51666667 3.3165957-2.31881482 5.22-2.31881482.0871276 0 .1752127.00192593.2594681.00577778 1.9484042.06933334 3.8441489.97933334 5.4775532 2.62792593.1512765.15022222.3303191.34859259.5361702.5797037l.0526595.05874074c.1120213.12518519.2345745.26192593.370532.40733334l1.2657446 1.36066666.6328724.67985185-.6548936.65866667-.2508511.25325926zm-27.9288192 22.17414815h-9.57446804l4.78723404 4.8148148zm23.1864894-21.70422223c-.9220213 1.38666663-2.5180851 3.63037033-4.1984042 1.94133333l4.2510638-4.27651851c-.3810638-.41022222-.6711702-.754-.8923404-.97740741-2.2921277-2.31207407-4.8743617-2.34192593-6.8984043-.312-1.3528723 1.35681481-1.7071277 2.91007407-1.313617 4.38533332l-1.332766-1.52629628c-.385851.21474074-2.0182979 1.65918518-.7937234 3.84703708l-1.5252127-1.274963-2.0240426 2.0299259 2.7344681 2.7502222c-2.1121277-1.6861481-4.3889362-1.5205185-6.2157447.312-1.9560638 1.9615556-1.8181915 4.3381482-.3532979 6.293926l-.295851-.2946667c-1.9321277-1.9432593-4.0318085-1.2576296-5.0706383-.2128148-.8023405.8079259-1.2944681 1.9191852-1.0924468 2.6905185l-4.195532-4.2187407-2.22893613 2.2408148 8.25893613 8.3065185h4.4339362l-2.9767021-2.9938519c-.5893908-.6029568-.9604155-1.0987731-1.1531529-1.5232627-.3182349-.7008886-.1504161-1.2073234.3230465-1.680515.7334043-.7318519 1.583617-.2763704 3.0829787 1.2277777l2.9412766 2.9562963 2.2164894-2.2292592-2.7909575-2.8060741c2.0125532 1.5291852 4.4224468 1.612 6.5728724-.545037 1.3567021-1.2653334 1.7425532-2.4565185 1.7425532-2.4565185l-1.6755319-1.1314815c-.9229788 1.3866666-2.5152128 3.6361481-4.195532 1.9461481l4.2606383-4.2851852 2.655 2.6712593 2.3160639-2.3294074-3.3223405-3.3424445c-1.5520212-1.5609629-.6328723-3.0275555.0124469-3.5793333.3025531.6442222.7448936 1.2624445 1.3078723 1.8296296 2.1485106 2.1676297 4.9260638 2.6038519 7.3685106.1550371 1.3567022-1.2643704 1.7425532-2.4565185 1.7425532-2.4565185zm-3.6564894-1.35537321-2.0211702 2.03377777c-.9890425-1.18251851-.9392553-1.81422222-.3245744-2.43051851.7439361-.7462963 1.4993617-.43044445 2.3457446.39674074zm-12.4879787 12.56088884c-.9890425-1.1825185-.9411702-1.819037-.3284042-2.4353333.7448936-.7462963 1.5003191-.4304444 2.3467021.3967408z\" fill=\"#0f1621\" fill-opacity=\".7\" style=\"fill: rgb(255, 255, 255); fill-opacity: 0.6;\"></path><path d=\"m17.2765957 31.0029116-4.787234 4.8148148-4.78723404-4.8148148zm23.1864894-21.70422223 1.6755319 1.13148153s-.385851 1.1921481-1.7425532 2.4565185c-2.4424468 2.4488148-5.22 2.0125926-7.3685106-.1550371-.5629787-.5671851-1.0053192-1.1854074-1.3078723-1.8296296-.6453192.5517778-1.5644681 2.0183704-.0124469 3.5793333l3.3223405 3.3424445-2.3160639 2.3294074-2.655-2.6712593-4.2606383 4.2851852c1.6803192 1.69 3.2725532-.5594815 4.195532-1.9461481l1.6755319 1.1314815s-.3858511 1.1911851-1.7425532 2.4565185c-2.1504256 2.157037-4.5603192 2.0742222-6.5728724.545037l2.7909575 2.8060741-2.2164894 2.2292592-2.9412766-2.9562963c-1.4993617-1.5041481-2.3495744-1.9596296-3.0829787-1.2277777-.4734626.4731916-.6412814.9796264-.3230465 1.680515.1927374.4244896.5637621.9203059 1.1531529 1.5232627l2.9767021 2.9938519h-4.4339362l-8.25893613-8.3065185 2.22893613-2.2408148 4.195532 4.2187407c-.2020213-.7713333.2901063-1.8825926 1.0924468-2.6905185 1.0388298-1.0448148 3.1385106-1.7304445 5.0706383.2128148l.295851.2946667c-1.4648936-1.9557778-1.6027659-4.3323704.3532979-6.293926 1.8268085-1.8325185 4.103617-1.9981481 6.2157447-.312l-2.7344681-2.7502222 2.0240426-2.0299259 1.5252127 1.274963c-1.2245745-2.1878519.4078724-3.63229634.7937234-3.84703708l1.332766 1.52629628c-.3935107-1.47525925-.0392553-3.02851851 1.313617-4.38533332 2.0240426-2.02992593 4.6062766-2.00007407 6.8984043.312.2211702.22340741.5112766.56718519.8923404.97740741l-4.2510638 4.27651851c1.6803191 1.689037 3.2763829-.5546667 4.1984042-1.94133333zm-16.1444681 11.20551563 2.0182979-2.0385925c-.846383-.8271852-1.6018085-1.1430371-2.3467021-.3967408-.612766.6162963-.6606383 1.2528148.3284042 2.4353333zm12.4879787-12.56088884c-.8463829-.82718519-1.6018085-1.14303704-2.3457446-.39674074-.6146809.61629629-.6644681 1.248.3245744 2.43051851z\" fill=\"#fff\" fill-opacity=\".3\" style=\"fill: rgb(15, 22, 33); fill-opacity: 0.3;\"></path></g></svg></div><div class=\"H_copyright\" style=\"right: 0px; bottom: 0px; position: absolute; background-color: rgba(255, 255, 255, 0.8); color: rgb(15, 22, 33); padding: 2px 16px;\"><a target=\"_blank\" tabindex=\"1\" href=\"https://legal.here.com/us-en/terms/here-end-user-terms\" style=\"color: inherit; margin: 0px 8px; text-decoration: none; pointer-events: all;\">Terms of use</a><span style=\"margin: 0px 8px;\">© 1987–2025 HERE</span><span style=\"margin: 0px;\"></span></div></div><div class=\"H_ui\" dir=\"ltr\"><div class=\"H_l_top H_l_left\"><div class=\"H_l_anchor H_l_horizontal\"></div><div class=\"H_l_anchor H_l_vertical\"></div></div><div class=\"H_l_top H_l_right\"><div class=\"H_l_anchor H_l_horizontal\"></div><div class=\"H_l_anchor H_l_vertical\"></div></div><div class=\"H_l_bottom H_l_left\"><div class=\"H_l_anchor H_l_vertical\"></div><div class=\"H_l_anchor H_l_horizontal\"><div class=\"H_ctl H_el H_scalebar\" title=\"Change to miles\" aria-label=\"Change to miles\" tabindex=\"0\" style=\"direction: ltr; display: none;\"><svg height=\"12\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"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 class=\"MapSettingsTile MapTypeSettings\"><div class=\"MapSettingsTile-inner position-relative\"><div class=\"MapSettingsButton\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" class=\"MapSettingsTileIcon hover-scale-110 display-block\"><g fill=\"none\" fill-rule=\"evenodd\"><path fill=\"#939BA8\" d=\"m20 12.451 19.98 11.322L20 35.095.02 23.773l11.052-6.262a4.85 4.85 0 0 0 1.13.484l-2.775 1.572c0-.002 3.353 1.922 3.353 1.922l3.353-1.924-2.446-1.384c.16-.005.32-.019.478-.04l2.222 1.274 3.354-1.924-2.296-1.3c.07-.097.138-.197.202-.3l2.235 1.28.147.085.052.03 3.352-1.924-3.353-1.9-1.854 1.052c.095-.38.142-.762.144-1.139l1.63-.924Zm-.093 17.57-3.353 1.9 3.353 1.922 3.354-1.924-3.354-1.899Zm3.746-2.05-3.353 1.9 3.354 1.922 3.353-1.924-3.354-1.899Zm-7.383-.026-3.353 1.9 3.353 1.923 3.353-1.924-3.353-1.899Zm-3.636-2.04-3.353 1.9c0-.002 3.353 1.923 3.353 1.923l3.353-1.925-3.353-1.898Zm7.383-.01-3.353 1.901c0-.002 3.353 1.922 3.353 1.922l3.353-1.924-3.353-1.9Zm7.287-.015-3.353 1.9 3.353 1.923 3.353-1.924-3.353-1.899ZM9 23.868l-3.354 1.9L9 27.691l3.353-1.924L9 23.868Zm7.381-.013-3.353 1.9 3.353 1.923 3.353-1.924-3.353-1.899Zm14.53-.049-3.353 1.9c0-.002 3.353 1.923 3.353 1.923l3.353-1.925-3.353-1.898Zm-7.244 0-3.353 1.9 3.353 1.922 3.353-1.924-3.353-1.899Zm-10.92-1.988-3.354 1.9 3.354 1.923 3.353-1.924-3.353-1.899Zm-7.364-.013L2.03 23.707c0-.002 3.353 1.922 3.353 1.922l3.354-1.924-3.354-1.9Zm14.648-.04-3.353 1.9c0-.002 3.353 1.923 3.353 1.923l3.353-1.924-3.353-1.9Zm7.243-.034-3.353 1.9 3.353 1.923 3.353-1.924-3.353-1.899Zm7.33-.055-3.353 1.901c0-.002 3.353 1.922 3.353 1.922l3.353-1.924-3.353-1.899ZM9.13 19.756l-3.353 1.901c0-.002 3.353 1.922 3.353 1.922l3.354-1.924-3.354-1.9Zm7.266-.028-3.353 1.9 3.353 1.923 3.353-1.924-3.353-1.899Zm7.242-.038-3.353 1.901c0-.002 3.353 1.923 3.353 1.923l3.353-1.924-3.353-1.9Zm7.329-.089-3.353 1.901c0-.002 3.353 1.922 3.353 1.922l3.353-1.923-3.353-1.9Zm-10.964-1.948-3.353 1.9 3.353 1.924 3.354-1.925-3.354-1.899Zm7.328-.093-3.353 1.902c0-.002 3.353 1.922 3.353 1.922l3.353-1.924-3.353-1.9Zm-3.635-2.036-3.353 1.901c0-.002 3.353 1.922 3.353 1.922l3.354-1.924-3.354-1.899Z\"></path><path fill=\"#C9CDD3\" d=\"M8.403 15.762c.15.282.05.632-.227.792l-1.392.74a.584.584 0 0 1-.45.044.593.593 0 0 1-.105-1.09l1.39-.74a.592.592 0 0 1 .784.254ZM14.7 9.09a4.15 4.15 0 1 1-2.427 7.939 4.15 4.15 0 0 1 2.427-7.94Zm-6.333 1.784a.593.593 0 1 1-.347 1.134l-2.269-.693a.602.602 0 0 1-.393-.74c.1-.31.428-.485.74-.394l2.269.693ZM20.99 9.07a.593.593 0 0 1-.245.801l-1.392.74a.587.587 0 0 1-.452.044.564.564 0 0 1-.35-.289.586.586 0 0 1 .245-.801l1.392-.74a.593.593 0 0 1 .802.245ZM9.95 5.497c.153.05.279.16.35.304l.74 1.392a.588.588 0 0 1-.246.802.564.564 0 0 1-.451.044.587.587 0 0 1-.35-.29l-.74-1.392a.595.595 0 0 1 .235-.82.595.595 0 0 1 .462-.04Zm6.023-.566c.313.096.489.428.393.74l-.693 2.269a.593.593 0 1 1-1.134-.347l.693-2.268a.593.593 0 0 1 .74-.394ZM29.571 9.467a.791.791 0 0 0-.4.1.88.88 0 0 0 .067-.35c0-.55-.4-1-.89-1-.2 0-.355.075-.51.175-.222-.975-1-1.675-1.934-1.675-1.11 0-2 1-2 2.25 0 .1 0 .2.022.275-.088-.025-.155-.025-.244-.025-.622 0-1.111.55-1.111 1.25s.489 1.25 1.111 1.25h5.889c.555 0 1-.5 1-1.125s-.445-1.125-1-1.125ZM30.446 14.917c.117 0 .233.02.35.08a.652.652 0 0 1-.058-.28c0-.44.35-.8.777-.8a.85.85 0 0 1 .448.14c.194-.78.875-1.34 1.691-1.34.973 0 1.75.8 1.75 1.8 0 .08 0 .16-.019.22.078-.02.136-.02.214-.02.544 0 .972.44.972 1s-.428 1-.972 1h-5.153a.884.884 0 0 1-.875-.9c0-.462.331-.838.765-.893l.11-.007Z\"></path></g></svg></div><div class=\"dropdown\"></div></div></div></div><div class=\"MapElements\"></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import Map from '@rio-cloud/rio-uikit/Map';\nimport EventUtils from '@rio-cloud/rio-uikit/EventUtils';\nimport MapSettings from '@rio-cloud/rio-uikit/MapSettings';\nimport MapTypeSettings from '@rio-cloud/rio-uikit/MapTypeSettings';\nimport Circle from '@rio-cloud/rio-uikit/Circle';\nimport type { MapEvent } from '@rio-cloud/rio-uikit/mapTypes';\n\nimport { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';\n\nconst STROKE_COLOR = 'rgba(90, 72, 118, 1)';\nconst FILL_COLOR = 'rgba(90, 72, 118, 0.3)';\n\nconst CircleExample = () => {\n    const position = { lat: 48.1351, lng: 11.582 };\n\n    const eventListenerMap = {\n        [EventUtils.TAP]: (event: MapEvent) => console.log(event),\n    };\n\n    return (\n        <Map\n            credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}\n            center={position}\n            zoom={10}\n            height={300}\n            mapSettings={\n                <MapSettings\n                    options={[\n                        <MapTypeSettings\n                            key='mapTypeSettings'\n                            tooltip='Change map type'\n                            dropdownHeaderText='Map views'\n                            defaultTypeLabel='Default view'\n                            truckTypeLabel='Truck view'\n                            terrainTypeLabel='Terrain view'\n                            satelliteTypeLabel='Satellite view'\n                            nightTypeLabel='Night view'\n                        />,\n                    ]}\n                />\n            }\n        >\n            <Circle\n                position={position}\n                radius={5_000}\n                style={{ strokeColor: STROKE_COLOR, fillColor: FILL_COLOR }}\n                precision={30}\n                eventListenerMap={eventListenerMap}\n            />\n        </Map>\n    );\n};\n\nexport default CircleExample;"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

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

@@ -0,0 +1,51 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:12.602Z",
+    "source": "https://uikit.developers.rio.cloud/#components/mapCluster",
+    "category": "Components",
+    "section": "Map",
+    "slug": "components/mapcluster",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "087b2801bafd3279e471966b87ae6e70c41bef5893d27db6b6964d455d6999bc"
+  },
+  "title": "Clusters",
+  "lead": null,
+  "content": [
+    {
+      "heading": "Clusters",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"Map position-relative map-type-default \" style=\"height: 400px;\"><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=\"400\" data-engine=\"three.js r152\" style=\"position: absolute; left: 0px; top: 0px; width: 908px; height: 400px;\"></canvas><canvas width=\"908\" height=\"400\" style=\"position: absolute; left: 0px; top: 0px; width: 908px; height: 400px; display: none;\"></canvas><div style=\"position: absolute; height: 100%; width: 100%; z-index: 1;\"><div style=\"position: absolute; pointer-events: none; width: 908px; height: 400px; z-index: 2;\"></div><div style=\"position: absolute; pointer-events: none; width: 908px; height: 400px; 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=\"125\"><polyline style=\"fill:none; stroke:white; stroke-width:4\" points=\"2 2 2 10 123 10 123 2\"></polyline><polyline style=\"fill:none; stroke:black; stroke-width:2\" points=\"2 2 2 10 123 10 123 2\"></polyline></svg><div style=\"padding: 0 0 0 10px\">50 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><div class=\"MapElements\"></div></div><div class=\"btn-toolbar margin-top-10\"><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Regenerate data</button><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Toggle cluster</button></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState, useMemo } from 'react';\n\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport Map from '@rio-cloud/rio-uikit/Map';\nimport MarkerLayer from '@rio-cloud/rio-uikit/MarkerLayer';\nimport EventUtils from '@rio-cloud/rio-uikit/EventUtils';\nimport MapSettings from '@rio-cloud/rio-uikit/MapSettings';\nimport MapTypeSettings from '@rio-cloud/rio-uikit/MapTypeSettings';\nimport MapClusterSettings from '@rio-cloud/rio-uikit/MapClusterSettings';\nimport SingleMapMarker from '@rio-cloud/rio-uikit/SingleMapMarker';\nimport ClusterMapMarker from '@rio-cloud/rio-uikit/ClusterMapMarker';\nimport type { MapEvent, Point } from '@rio-cloud/rio-uikit/mapTypes';\n\nimport { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';\nimport type { Asset } from '../settings/demoData';\n\nconst position = { lat: 49.1351, lng: 12.582 };\nconst NUM = 100;\n\nconst regenerateData = () =>\n    Array.from({ length: NUM * 2 }, (_, index) => {\n        const lat = position.lat + Math.random() * 6 - 3;\n        const lng = position.lng + Math.random() * 10 - 5;\n        return { lat, lng, data: `data-${index - NUM}`, name: `Asset ${index - NUM}`, type: 'truck' };\n    });\n\nconst ClustersExample = () => {\n    const [data, setData] = useState(regenerateData());\n    const [showCluster, setShowCluster] = useState(true);\n\n    const simpleTheme = useMemo(\n        () => ({\n            getNoisePresentation: ({ name, numberWarnings, numberExceptions, type }: Asset) => (\n                <SingleMapMarker\n                    iconNames={[type]}\n                    name={name}\n                    warningCount={numberWarnings}\n                    exceptionCount={numberExceptions}\n                />\n            ),\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 handleClusterEvent = (event: MapEvent) => {\n        const target = event.target.getData();\n        event.stopPropagation();\n\n        if (target.isCluster()) {\n            console.log('cluster event:', event.type);\n            target.forEachDataPoint((point: Point) => console.log(point.getData()));\n        } else {\n            console.log('noise point event:', event.type, target.getData());\n        }\n    };\n\n    const handleToggleCluster = () => setShowCluster(!showCluster);\n\n    const handleClusterChange = (newShowCluster: boolean) => setShowCluster(newShowCluster);\n\n    const handleRegenerateDataButtonClick = () => {\n        setData(regenerateData);\n    };\n\n    const eventListenerMap = EventUtils.createTapOnDblTapPreventer({\n        [EventUtils.TAP]: handleClusterEvent,\n        [EventUtils.DBL_TAP]: handleClusterEvent,\n    });\n\n    return (\n        <>\n            <Map\n                credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}\n                center={position}\n                zoom={8}\n                height={400}\n                showCluster={showCluster}\n                onShowClusterChange={handleClusterChange}\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                        ]}\n                    />\n                }\n            >\n                <MarkerLayer data={data} eventListenerMap={eventListenerMap} simpleTheme={simpleTheme} />\n            </Map>\n            <div className='btn-toolbar margin-top-10'>\n                <Button onClick={handleRegenerateDataButtonClick}>Regenerate data</Button>\n                <Button onClick={handleToggleCluster}>Toggle cluster</Button>\n            </div>\n        </>\n    );\n};\n\nexport default ClustersExample;"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "Clusters with POIs",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 2",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"Map position-relative map-type-default \" style=\"height: 400px;\"><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=\"400\" data-engine=\"three.js r152\" style=\"position: absolute; left: 0px; top: 0px; width: 908px; height: 400px;\"></canvas><canvas width=\"908\" height=\"400\" style=\"position: absolute; left: 0px; top: 0px; width: 908px; height: 400px; display: none;\"></canvas><div style=\"position: absolute; height: 100%; width: 100%; z-index: 1;\"><div style=\"position: absolute; pointer-events: none; width: 908px; height: 400px; z-index: 3;\"></div><div style=\"position: absolute; pointer-events: none; width: 908px; height: 400px; z-index: 1;\"></div><div style=\"position: absolute; pointer-events: none; width: 908px; height: 400px; z-index: 2;\"></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=\"125\"><polyline style=\"fill:none; stroke:white; stroke-width:4\" points=\"2 2 2 10 123 10 123 2\"></polyline><polyline style=\"fill:none; stroke:black; stroke-width:2\" points=\"2 2 2 10 123 10 123 2\"></polyline></svg><div style=\"padding: 0 0 0 10px\">50 km</div></div></div></div><div class=\"H_l_bottom H_l_right\"><div class=\"H_l_anchor H_l_vertical\"></div><div class=\"H_l_anchor H_l_horizontal\"><div class=\"H_ctl H_el\" tabindex=\"-1\" style=\"display: none;\"><div class=\"H_btn H_el\" title=\"Choose view\" aria-label=\"Choose view\" tabindex=\"0\"><svg xmlns=\"http://www.w3.org/2000/svg\" class=\"H_icon\" viewBox=\"0 0 24 24\"><path fill-rule=\"evenodd\" d=\"M6.7,14.6 L4.5,16 L12,20.6 L19.5,16 L17.3,14.6 L19.1,13.5 L23,16 L12,23 L1,16 L4.9,13.5 L6.7,14.6 Z M12,2 L23,9 L12,16 L1,9 L12,2 Z\"></path></svg></div><div class=\"H_overlay H_el\" tabindex=\"-1\"><div class=\"H_rdo H_el\" tabindex=\"-1\"><div class=\"H_rdo_title H_el\" tabindex=\"-1\">Choose view</div><div class=\"H_rdo_buttons H_el\" tabindex=\"-1\"><div class=\"H_btn H_el H_active\" tabindex=\"-1\">Map view</div><div class=\"H_btn H_el\" tabindex=\"-1\">Satellite</div></div></div><div class=\"H_separator H_el\" tabindex=\"-1\"></div><div class=\"H_grp H_el\" tabindex=\"-1\"><div class=\"H_btn H_el\" tabindex=\"-1\">Traffic conditions</div><div class=\"H_btn H_el\" tabindex=\"-1\">Show traffic incidents</div></div></div></div></div></div><div class=\"H_l_anchor H_l_top H_l_center H_l_horizontal\" style=\"margin-left: 0px;\"></div><div class=\"H_l_anchor H_l_left H_l_middle H_l_vertical\" style=\"margin-top: 0px;\"></div><div class=\"H_l_anchor H_l_right H_l_middle H_l_vertical\" style=\"margin-top: 0px;\"></div><div class=\"H_l_anchor H_l_bottom H_l_center H_l_horizontal\" style=\"margin-left: 0px;\"></div></div></div><div class=\"ZoomButtons\"><div class=\"MapSettingsTile\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" class=\"display-block hover-scale-110\"><path fill=\"#A7AFBB\" d=\"M9.5 1v5.5H15v3H9.5V15h-3V9.5H1v-3h5.5V1z\"></path></svg></div><div class=\"MapSettingsTileSpacer\"></div><div class=\"MapSettingsTile\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" class=\"display-block hover-scale-110\"><path fill=\"#A7AFBB\" d=\"M7.177 9.5H1v-3h14v3H8.823z\"></path></svg></div></div><div class=\"MapSettingsWrapper\"><div class=\"MapSettingsTile MapTypeSettings\"><div class=\"MapSettingsTile-inner position-relative\"><div class=\"MapSettingsButton\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"40\" class=\"MapSettingsTileIcon hover-scale-110 display-block\"><g fill=\"none\" fill-rule=\"evenodd\"><path fill=\"#939BA8\" d=\"m20 12.451 19.98 11.322L20 35.095.02 23.773l11.052-6.262a4.85 4.85 0 0 0 1.13.484l-2.775 1.572c0-.002 3.353 1.922 3.353 1.922l3.353-1.924-2.446-1.384c.16-.005.32-.019.478-.04l2.222 1.274 3.354-1.924-2.296-1.3c.07-.097.138-.197.202-.3l2.235 1.28.147.085.052.03 3.352-1.924-3.353-1.9-1.854 1.052c.095-.38.142-.762.144-1.139l1.63-.924Zm-.093 17.57-3.353 1.9 3.353 1.922 3.354-1.924-3.354-1.899Zm3.746-2.05-3.353 1.9 3.354 1.922 3.353-1.924-3.354-1.899Zm-7.383-.026-3.353 1.9 3.353 1.923 3.353-1.924-3.353-1.899Zm-3.636-2.04-3.353 1.9c0-.002 3.353 1.923 3.353 1.923l3.353-1.925-3.353-1.898Zm7.383-.01-3.353 1.901c0-.002 3.353 1.922 3.353 1.922l3.353-1.924-3.353-1.9Zm7.287-.015-3.353 1.9 3.353 1.923 3.353-1.924-3.353-1.899ZM9 23.868l-3.354 1.9L9 27.691l3.353-1.924L9 23.868Zm7.381-.013-3.353 1.9 3.353 1.923 3.353-1.924-3.353-1.899Zm14.53-.049-3.353 1.9c0-.002 3.353 1.923 3.353 1.923l3.353-1.925-3.353-1.898Zm-7.244 0-3.353 1.9 3.353 1.922 3.353-1.924-3.353-1.899Zm-10.92-1.988-3.354 1.9 3.354 1.923 3.353-1.924-3.353-1.899Zm-7.364-.013L2.03 23.707c0-.002 3.353 1.922 3.353 1.922l3.354-1.924-3.354-1.9Zm14.648-.04-3.353 1.9c0-.002 3.353 1.923 3.353 1.923l3.353-1.924-3.353-1.9Zm7.243-.034-3.353 1.9 3.353 1.923 3.353-1.924-3.353-1.899Zm7.33-.055-3.353 1.901c0-.002 3.353 1.922 3.353 1.922l3.353-1.924-3.353-1.899ZM9.13 19.756l-3.353 1.901c0-.002 3.353 1.922 3.353 1.922l3.354-1.924-3.354-1.9Zm7.266-.028-3.353 1.9 3.353 1.923 3.353-1.924-3.353-1.899Zm7.242-.038-3.353 1.901c0-.002 3.353 1.923 3.353 1.923l3.353-1.924-3.353-1.9Zm7.329-.089-3.353 1.901c0-.002 3.353 1.922 3.353 1.922l3.353-1.923-3.353-1.9Zm-10.964-1.948-3.353 1.9 3.353 1.924 3.354-1.925-3.354-1.899Zm7.328-.093-3.353 1.902c0-.002 3.353 1.922 3.353 1.922l3.353-1.924-3.353-1.9Zm-3.635-2.036-3.353 1.901c0-.002 3.353 1.922 3.353 1.922l3.354-1.924-3.354-1.899Z\"></path><path fill=\"#C9CDD3\" d=\"M8.403 15.762c.15.282.05.632-.227.792l-1.392.74a.584.584 0 0 1-.45.044.593.593 0 0 1-.105-1.09l1.39-.74a.592.592 0 0 1 .784.254ZM14.7 9.09a4.15 4.15 0 1 1-2.427 7.939 4.15 4.15 0 0 1 2.427-7.94Zm-6.333 1.784a.593.593 0 1 1-.347 1.134l-2.269-.693a.602.602 0 0 1-.393-.74c.1-.31.428-.485.74-.394l2.269.693ZM20.99 9.07a.593.593 0 0 1-.245.801l-1.392.74a.587.587 0 0 1-.452.044.564.564 0 0 1-.35-.289.586.586 0 0 1 .245-.801l1.392-.74a.593.593 0 0 1 .802.245ZM9.95 5.497c.153.05.279.16.35.304l.74 1.392a.588.588 0 0 1-.246.802.564.564 0 0 1-.451.044.587.587 0 0 1-.35-.29l-.74-1.392a.595.595 0 0 1 .235-.82.595.595 0 0 1 .462-.04Zm6.023-.566c.313.096.489.428.393.74l-.693 2.269a.593.593 0 1 1-1.134-.347l.693-2.268a.593.593 0 0 1 .74-.394ZM29.571 9.467a.791.791 0 0 0-.4.1.88.88 0 0 0 .067-.35c0-.55-.4-1-.89-1-.2 0-.355.075-.51.175-.222-.975-1-1.675-1.934-1.675-1.11 0-2 1-2 2.25 0 .1 0 .2.022.275-.088-.025-.155-.025-.244-.025-.622 0-1.111.55-1.111 1.25s.489 1.25 1.111 1.25h5.889c.555 0 1-.5 1-1.125s-.445-1.125-1-1.125ZM30.446 14.917c.117 0 .233.02.35.08a.652.652 0 0 1-.058-.28c0-.44.35-.8.777-.8a.85.85 0 0 1 .448.14c.194-.78.875-1.34 1.691-1.34.973 0 1.75.8 1.75 1.8 0 .08 0 .16-.019.22.078-.02.136-.02.214-.02.544 0 .972.44.972 1s-.428 1-.972 1h-5.153a.884.884 0 0 1-.875-.9c0-.462.331-.838.765-.893l.11-.007Z\"></path></g></svg></div><div class=\"dropdown\"></div></div></div></div><div class=\"MapElements\"></div></div><div class=\"btn-toolbar margin-top-10\"><button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Regenerate data</button></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState, useMemo } from 'react';\n\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport Map from '@rio-cloud/rio-uikit/Map';\nimport MarkerLayer from '@rio-cloud/rio-uikit/MarkerLayer';\nimport EventUtils from '@rio-cloud/rio-uikit/EventUtils';\nimport MapSettings from '@rio-cloud/rio-uikit/MapSettings';\nimport MapTypeSettings from '@rio-cloud/rio-uikit/MapTypeSettings';\nimport SingleMapMarker from '@rio-cloud/rio-uikit/SingleMapMarker';\nimport ClusterMapMarker from '@rio-cloud/rio-uikit/ClusterMapMarker';\nimport type { MapEvent, Point } from '@rio-cloud/rio-uikit/mapTypes';\n\nimport { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';\nimport type { Asset } from '../settings/demoData';\n\nconst position = { lat: 49.1351, lng: 12.582 };\nconst NUM = 500;\n\ntype Poi = {\n    data: string;\n    name: string;\n    type: string;\n};\n\nconst regenerateAssetData = () =>\n    Array.from({ length: NUM * 2 }, (_, index) => {\n        const lat = position.lat + Math.random() * 6 - 3;\n        const lng = position.lng + Math.random() * 10 - 5;\n        return { lat, lng, data: `data-${index - NUM}`, name: `Asset ${index - NUM}`, type: 'truck' };\n    });\n\nconst regeneratePoiData = () =>\n    Array.from({ length: NUM * 2 }, (_, index) => {\n        const lat = position.lat + Math.random() * 6 - 3;\n        const lng = position.lng + Math.random() * 10 - 5;\n        return { lat, lng, data: `data-${index - NUM}`, name: `Poi ${index - NUM}`, type: 'pushpin' };\n    });\n\nconst ClustersExample = () => {\n    const [assets, setAssets] = useState(regenerateAssetData());\n    const [pois, setPois] = useState(regeneratePoiData());\n\n    const assetTheme = useMemo(\n        () => ({\n            getNoisePresentation: ({ name, numberWarnings, numberExceptions, type }: Asset) => (\n                <SingleMapMarker\n                    iconNames={[type]}\n                    name={name}\n                    warningCount={numberWarnings}\n                    exceptionCount={numberExceptions}\n                />\n            ),\n            getClusterPresentation: ({ length }: Asset[]) => (\n                <ClusterMapMarker\n                    count={length}\n                    warningCount={Math.floor((length * 10) / 3)}\n                    exceptionCount={Math.floor((length * 10) / 5)}\n                />\n            ),\n        }),\n        []\n    );\n\n    const poiTheme = useMemo(\n        () => ({\n            getNoisePresentation: ({ name }: Poi) => (\n                <SingleMapMarker iconNames={['pushpin']} name={name} markerColor='bg-map-marker-poi' />\n            ),\n            getClusterPresentation: ({ length }: Poi[]) => (\n                <ClusterMapMarker iconName='pushpin' markerColor='bg-map-marker-poi' count={length} />\n            ),\n        }),\n        []\n    );\n\n    const handleClusterEvent = (event: MapEvent) => {\n        const target = event.target.getData();\n        event.stopPropagation();\n\n        if (target.isCluster()) {\n            console.log('cluster event:', event.type);\n            target.forEachDataPoint((point: Point) => console.log(point.getData()));\n        } else {\n            console.log('noise point event:', event.type, target.getData());\n        }\n    };\n\n    const handleRegenerateDataButtonClick = () => {\n        setAssets(regenerateAssetData);\n        setPois(regeneratePoiData);\n    };\n\n    const eventListenerMap = EventUtils.createTapOnDblTapPreventer({\n        [EventUtils.TAP]: handleClusterEvent,\n        [EventUtils.DBL_TAP]: handleClusterEvent,\n    });\n\n    return (\n        <>\n            <Map\n                credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}\n                center={position}\n                zoom={8}\n                height={400}\n                mapSettings={\n                    <MapSettings\n                        options={[\n                            <MapTypeSettings\n                                key='mapTypeSettings'\n                                tooltip='Change map type'\n                                dropdownHeaderText='Map views'\n                                defaultTypeLabel='Default view'\n                                truckTypeLabel='Truck view'\n                                terrainTypeLabel='Terrain view'\n                                satelliteTypeLabel='Satellite view'\n                                nightTypeLabel='Night view'\n                            />,\n                        ]}\n                    />\n                }\n            >\n                <MarkerLayer\n                    data={pois}\n                    simpleTheme={poiTheme}\n                    clusterDissolvable={false}\n                    eventListenerMap={eventListenerMap}\n                />\n                <MarkerLayer data={assets} simpleTheme={assetTheme} eventListenerMap={eventListenerMap} />\n            </Map>\n            <div className='btn-toolbar margin-top-10'>\n                <Button onClick={handleRegenerateDataButtonClick}>Regenerate data</Button>\n            </div>\n        </>\n    );\n};\n\nexport default ClustersExample;"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

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

@@ -0,0 +1,105 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:14.682Z",
+    "source": "https://uikit.developers.rio.cloud/#components/mapContext",
+    "category": "Components",
+    "section": "Map",
+    "slug": "components/mapcontext",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "dd56ee01ad59a32b7857f00ab7f209b990a3617a5ccfe6570b08f63b287f2dd3"
+  },
+  "title": "Map",
+  "lead": null,
+  "content": [
+    {
+      "heading": "Map",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"height-300\"><div class=\"Map position-relative map-type-default height-100pct\"><div style=\"position: relative; width: 100%; height: 100%; overflow: hidden; -webkit-tap-highlight-color: transparent;\"><div style=\"z-index: 0; width: 100%; height: 100%; direction: ltr; position: absolute; touch-action: none;\"><canvas width=\"908\" height=\"300\" data-engine=\"three.js r152\" style=\"position: absolute; left: 0px; top: 0px; width: 908px; height: 300px;\"></canvas><canvas width=\"908\" height=\"300\" style=\"position: absolute; left: 0px; top: 0px; width: 908px; height: 300px; display: none;\"></canvas><div style=\"position: absolute; height: 100%; width: 100%; z-index: 1;\"><div style=\"position: absolute; pointer-events: none; width: 908px; height: 300px; z-index: 1;\"></div></div></div><div class=\"H_imprint\" style=\"position: absolute; bottom: 0px; right: 0px; left: 0px; z-index: 1; direction: ltr; pointer-events: none; user-select: none; font: 11px &quot;Lucida Grande&quot;, Arial, Helvetica, sans-serif;\"><div class=\"H_logo\" style=\"margin: 0px 0px 16px 16px; display: inline-block;\"><svg height=\"40\" viewBox=\"0 0 47 40\" width=\"47\" xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" fill-rule=\"evenodd\"><path d=\"m45.2054149 8.82876345.6003191.40637037-.2240425.6914074-.4490426 1.38570368c-.1024468.3148889-.6998936 1.9596297-2.43 3.5918519l-.017234.0163704c-.188617.1887407-.3801064.3659259-.5467021.5084444l-.4605319.4285185-.486383.4516296-.1407447-.0702963c-.7257447.4583704-1.4926596.7886667-2.2796809.9831852l.5840426.5864445-.6769149.6817778-2.052766 2.0636296-.169468.1704444-.019149.0192593-2.3821276 2.3958518c-.4902128.8493334-1.1202128 1.6331852-1.8497873 2.3111112-.6031915.6047407-1.2504255 1.1054814-1.935 1.4954814l-.4777659.4805186-4.3247873 4.3506666-.0296808.0298519-.0315958.0269629-2.1532978 1.8171111-.2661702.2253334h-.3485107-3.8948936l-3.968617 3.9914815-1.3547873 1.3616296-.6769148.6808148-.6769149-.6808148-1.3538298-1.3616296-4.80925535-4.837926-3.2687234-3.2875555-1.63436171-1.6437778h2.3112766 4.62255319 2.67223407l-4.71063832-4.7368148-.6769149-.6808148.6769149-.6808148 4.93851062-4.9650371.6769149-.6798518.6769149.6808148 2.7296809 2.7454074c.9363829-.8820741 2.1485106-1.4685185 3.4037234-1.6562963.278617-1.4694815 1.0187234-2.834963 2.168617-3.9885926.5696808-.572 1.1843617-1.0438519 1.8335106-1.4107407l.2901064-.2917778 4.3094681-4.31985187c.5830851-1.0582963 1.4256383-1.78918519 2.0364893-2.12718519l.4471277-.24748148c.3829787-.7617037.9047872-1.47622222 1.5539362-2.12622222 1.510851-1.51666667 3.3165957-2.31881482 5.22-2.31881482.0871276 0 .1752127.00192593.2594681.00577778 1.9484042.06933334 3.8441489.97933334 5.4775532 2.62792593.1512765.15022222.3303191.34859259.5361702.5797037l.0526595.05874074c.1120213.12518519.2345745.26192593.370532.40733334l1.2657446 1.36066666.6328724.67985185-.6548936.65866667-.2508511.25325926zm-27.9288192 22.17414815h-9.57446804l4.78723404 4.8148148zm23.1864894-21.70422223c-.9220213 1.38666663-2.5180851 3.63037033-4.1984042 1.94133333l4.2510638-4.27651851c-.3810638-.41022222-.6711702-.754-.8923404-.97740741-2.2921277-2.31207407-4.8743617-2.34192593-6.8984043-.312-1.3528723 1.35681481-1.7071277 2.91007407-1.313617 4.38533332l-1.332766-1.52629628c-.385851.21474074-2.0182979 1.65918518-.7937234 3.84703708l-1.5252127-1.274963-2.0240426 2.0299259 2.7344681 2.7502222c-2.1121277-1.6861481-4.3889362-1.5205185-6.2157447.312-1.9560638 1.9615556-1.8181915 4.3381482-.3532979 6.293926l-.295851-.2946667c-1.9321277-1.9432593-4.0318085-1.2576296-5.0706383-.2128148-.8023405.8079259-1.2944681 1.9191852-1.0924468 2.6905185l-4.195532-4.2187407-2.22893613 2.2408148 8.25893613 8.3065185h4.4339362l-2.9767021-2.9938519c-.5893908-.6029568-.9604155-1.0987731-1.1531529-1.5232627-.3182349-.7008886-.1504161-1.2073234.3230465-1.680515.7334043-.7318519 1.583617-.2763704 3.0829787 1.2277777l2.9412766 2.9562963 2.2164894-2.2292592-2.7909575-2.8060741c2.0125532 1.5291852 4.4224468 1.612 6.5728724-.545037 1.3567021-1.2653334 1.7425532-2.4565185 1.7425532-2.4565185l-1.6755319-1.1314815c-.9229788 1.3866666-2.5152128 3.6361481-4.195532 1.9461481l4.2606383-4.2851852 2.655 2.6712593 2.3160639-2.3294074-3.3223405-3.3424445c-1.5520212-1.5609629-.6328723-3.0275555.0124469-3.5793333.3025531.6442222.7448936 1.2624445 1.3078723 1.8296296 2.1485106 2.1676297 4.9260638 2.6038519 7.3685106.1550371 1.3567022-1.2643704 1.7425532-2.4565185 1.7425532-2.4565185zm-3.6564894-1.35537321-2.0211702 2.03377777c-.9890425-1.18251851-.9392553-1.81422222-.3245744-2.43051851.7439361-.7462963 1.4993617-.43044445 2.3457446.39674074zm-12.4879787 12.56088884c-.9890425-1.1825185-.9411702-1.819037-.3284042-2.4353333.7448936-.7462963 1.5003191-.4304444 2.3467021.3967408z\" fill=\"#0f1621\" fill-opacity=\".7\" style=\"fill: rgb(255, 255, 255); fill-opacity: 0.6;\"></path><path d=\"m17.2765957 31.0029116-4.787234 4.8148148-4.78723404-4.8148148zm23.1864894-21.70422223 1.6755319 1.13148153s-.385851 1.1921481-1.7425532 2.4565185c-2.4424468 2.4488148-5.22 2.0125926-7.3685106-.1550371-.5629787-.5671851-1.0053192-1.1854074-1.3078723-1.8296296-.6453192.5517778-1.5644681 2.0183704-.0124469 3.5793333l3.3223405 3.3424445-2.3160639 2.3294074-2.655-2.6712593-4.2606383 4.2851852c1.6803192 1.69 3.2725532-.5594815 4.195532-1.9461481l1.6755319 1.1314815s-.3858511 1.1911851-1.7425532 2.4565185c-2.1504256 2.157037-4.5603192 2.0742222-6.5728724.545037l2.7909575 2.8060741-2.2164894 2.2292592-2.9412766-2.9562963c-1.4993617-1.5041481-2.3495744-1.9596296-3.0829787-1.2277777-.4734626.4731916-.6412814.9796264-.3230465 1.680515.1927374.4244896.5637621.9203059 1.1531529 1.5232627l2.9767021 2.9938519h-4.4339362l-8.25893613-8.3065185 2.22893613-2.2408148 4.195532 4.2187407c-.2020213-.7713333.2901063-1.8825926 1.0924468-2.6905185 1.0388298-1.0448148 3.1385106-1.7304445 5.0706383.2128148l.295851.2946667c-1.4648936-1.9557778-1.6027659-4.3323704.3532979-6.293926 1.8268085-1.8325185 4.103617-1.9981481 6.2157447-.312l-2.7344681-2.7502222 2.0240426-2.0299259 1.5252127 1.274963c-1.2245745-2.1878519.4078724-3.63229634.7937234-3.84703708l1.332766 1.52629628c-.3935107-1.47525925-.0392553-3.02851851 1.313617-4.38533332 2.0240426-2.02992593 4.6062766-2.00007407 6.8984043.312.2211702.22340741.5112766.56718519.8923404.97740741l-4.2510638 4.27651851c1.6803191 1.689037 3.2763829-.5546667 4.1984042-1.94133333zm-16.1444681 11.20551563 2.0182979-2.0385925c-.846383-.8271852-1.6018085-1.1430371-2.3467021-.3967408-.612766.6162963-.6606383 1.2528148.3284042 2.4353333zm12.4879787-12.56088884c-.8463829-.82718519-1.6018085-1.14303704-2.3457446-.39674074-.6146809.61629629-.6644681 1.248.3245744 2.43051851z\" fill=\"#fff\" fill-opacity=\".3\" style=\"fill: rgb(15, 22, 33); fill-opacity: 0.3;\"></path></g></svg></div><div class=\"H_copyright\" style=\"right: 0px; bottom: 0px; position: absolute; background-color: rgba(255, 255, 255, 0.8); color: rgb(15, 22, 33); padding: 2px 16px;\"><a target=\"_blank\" tabindex=\"1\" href=\"https://legal.here.com/us-en/terms/here-end-user-terms\" style=\"color: inherit; margin: 0px 8px; text-decoration: none; pointer-events: all;\">Terms of use</a><span style=\"margin: 0px 8px;\">© 1987–2025 HERE</span><span style=\"margin: 0px;\"></span></div></div><div class=\"H_ui\" dir=\"ltr\"><div class=\"H_l_top H_l_left\"><div class=\"H_l_anchor H_l_horizontal\"></div><div class=\"H_l_anchor H_l_vertical\"></div></div><div class=\"H_l_top H_l_right\"><div class=\"H_l_anchor H_l_horizontal\"></div><div class=\"H_l_anchor H_l_vertical\"></div></div><div class=\"H_l_bottom H_l_left\"><div class=\"H_l_anchor H_l_vertical\"></div><div class=\"H_l_anchor H_l_horizontal\"><div class=\"H_ctl H_el H_scalebar\" title=\"Change to miles\" aria-label=\"Change to miles\" tabindex=\"0\" style=\"direction: ltr; display: none;\"><svg height=\"12\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"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 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 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 class=\"MapElements\"></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useRef, useState } from 'react';\n\nimport Notification from '@rio-cloud/rio-uikit/Notification';\nimport Map from '@rio-cloud/rio-uikit/Map';\nimport ContextMenu, { isMapTarget } from '@rio-cloud/rio-uikit/ContextMenu';\nimport ContextMenuItem from '@rio-cloud/rio-uikit/ContextMenuItem';\nimport EventUtils from '@rio-cloud/rio-uikit/EventUtils';\nimport Marker from '@rio-cloud/rio-uikit/Marker';\nimport SingleMapMarker from '@rio-cloud/rio-uikit/SingleMapMarker';\nimport MapSettings from '@rio-cloud/rio-uikit/MapSettings';\nimport MapTypeSettings from '@rio-cloud/rio-uikit/MapTypeSettings';\nimport MapLayerSettings from '@rio-cloud/rio-uikit/MapLayerSettings';\nimport MapLayerTrafficItem from '@rio-cloud/rio-uikit/MapLayerTrafficItem';\nimport MapLayerIncidentsItem from '@rio-cloud/rio-uikit/MapLayerIncidentsItem';\nimport MapLayerRoadRestrictionsItem from '@rio-cloud/rio-uikit/MapLayerRoadRestrictionsItem';\nimport Circle from '@rio-cloud/rio-uikit/Circle';\nimport type { MapApi, MapContextMenuEvent, MapEvent, Position } from '@rio-cloud/rio-uikit/mapTypes';\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 formatCoordinates = (coordinates: Position) => {\n    return [\n        Math.abs(Number(coordinates.lat.toFixed(4))) + (coordinates.lat > 0 ? 'N' : 'S'),\n        Math.abs(Number(coordinates.lng.toFixed(4))) + (coordinates.lng > 0 ? 'E' : 'W'),\n    ].join(' ');\n};\n\nconst notifyCoordinates = (coordinates: Position) => Notification.info(JSON.stringify(coordinates));\n\ntype ContextMenuData = {\n    target?: string;\n    event?: MapContextMenuEvent;\n    targetPosition?: Position;\n};\n\nconst ContextMenuExample = () => {\n    const munichCoord = { lat: 48.1351, lng: 11.582 };\n    const markerPosition = { lat: 48.1351, lng: 11.382 };\n    const circlePosition = { lat: 48.2351, lng: 11.482 };\n\n    const [contextMenuData, setContextMenuData] = useState<ContextMenuData>({});\n\n    const [mapCenter, setMapCenter] = useState<Position>(munichCoord);\n    const [coordLabel, setCoordLabel] = useState<string>('');\n\n    const [showSpinner, setShowSpinner] = useState(true);\n\n    const mapApiRef = useRef<MapApi>();\n\n    // The onOpen callback will receive the coordinates of the context menu unless the \"targetPosition\"\n    // prop is defined whereas in that case the context menu coordinates are ignored and the provided\n    // targetPosition is returned\n    const handleOpenContextMenu = (contextMenuCoordinates: Position) => {\n        setShowSpinner(true);\n\n        // Resolve the coordinates to an address but for demo purpose we show the coordinates\n        console.log(contextMenuCoordinates);\n        setCoordLabel(formatCoordinates(contextMenuCoordinates));\n\n        // remove the spinner after some time to showcase the sinner in the UI and to simulate an async event\n        setTimeout(() => setShowSpinner(false), 1000);\n    };\n\n    const centerMap = (coordinates: Position /* , hereMap*/) => setMapCenter(coordinates);\n\n    const markerEventListenerMap = {\n        [EventUtils.TAP]: (event: MapEvent) => {\n            // Note: if there is a \"TAP\" event defined make sure to block the event for right mouse button otherwise\n            // the right click will also trigger the tap callback and may cause unwanted selection\n            if (EventUtils.isRightClick(event)) {\n                event.stopPropagation();\n                return;\n            }\n            console.log(event);\n        },\n        [EventUtils.CONTEXTMENU]: (event: MapContextMenuEvent) => {\n            // \"target\" is used to decide what context menu items shall be shown\n            // \"event\" is used to add the menu items to it\n            // \"targetPosition\" is used to return a fixed position on context menu open or in the item callback\n            setContextMenuData({ target: 'marker', event, targetPosition: markerPosition });\n        },\n    };\n\n    const circleEventListenerMap = {\n        [EventUtils.CONTEXTMENU]: (event: MapContextMenuEvent) => {\n            setContextMenuData({ target: 'circle', event, targetPosition: circlePosition });\n        },\n    };\n\n    // Register a context menu event listener for the map itself in order to show\n    // only map related context menu entries\n    const mapEventListenerMap = {\n        [EventUtils.CONTEXTMENU]: (event: MapContextMenuEvent) => {\n            if (isMapTarget(event, mapApiRef.current)) {\n                setContextMenuData({ target: 'map', event, targetPosition: circlePosition });\n            }\n        },\n    };\n\n    // Define some context menu entries that are always available when opening\n    const positionItem = (\n        <ContextMenuItem\n            key='1'\n            className='text-color-darker cursor-default'\n            labelClassName='text-medium'\n            label={coordLabel}\n            icon='rioglyph-map-marker'\n            hasSpinner={showSpinner}\n        />\n    );\n\n    const centerMapItem = (\n        <ContextMenuItem key='2' icon='rioglyph-position' label='Center map here' callback={centerMap} />\n    );\n\n    let contextMenuItems = [];\n\n    // Add context related menu items like when clicking on a map object.\n    // This differentiation may vary for your use case. This is just for demo purposes.\n    switch (contextMenuData.target) {\n        case 'circle':\n            contextMenuItems = [\n                positionItem,\n                centerMapItem,\n                <ContextMenuItem key='removeCircle' label='Remove circle' disabled />,\n            ];\n            break;\n        case 'marker':\n            contextMenuItems = [\n                positionItem,\n                centerMapItem,\n                <ContextMenuItem key='startRoute' label='<b>Start here</b>' callback={notifyCoordinates} />,\n            ];\n            break;\n        default:\n            contextMenuItems = [\n                positionItem,\n                centerMapItem,\n                <ContextMenuItem\n                    key='zoomHere'\n                    label='Zoom to this location'\n                    callback={() => {\n                        if (mapApiRef.current?.utils) {\n                            const zoom = mapApiRef.current.utils.getZoom() + 3;\n                            mapApiRef.current.utils.setZoom(zoom >= 19 ? 19 : zoom, false);\n                        }\n                    }}\n                />,\n            ];\n            break;\n    }\n\n    return (\n        <div className='height-300'>\n            <Map\n                credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}\n                center={mapCenter}\n                zoom={10}\n                eventListenerMap={mapEventListenerMap}\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={[\n                                    <MapSettingsDropdownHeader key='dividerTraffic' label='Traffic overlays' />,\n                                    <MapLayerTrafficItem key='mapLayerTrafficItem' label='Traffic' />,\n                                    <MapLayerIncidentsItem key='mapLayerIncidentsItem' label='Incidents' />,\n                                    <MapLayerRoadRestrictionsItem\n                                        key='mapLayerRoadRestrictionsItem'\n                                        label='Road restrictions'\n                                    />,\n                                ]}\n                                tooltip='Toggle various map overlays'\n                            />,\n                        ]}\n                    />\n                }\n            >\n                {(api: MapApi) => {\n                    mapApiRef.current = api;\n\n                    return (\n                        <>\n                            <Marker\n                                position={markerPosition}\n                                icon={<SingleMapMarker iconNames={['truck']} markerColor='bg-map-marker-asset' />}\n                                eventListenerMap={markerEventListenerMap}\n                            />\n                            <Circle\n                                position={circlePosition}\n                                radius={5000}\n                                style={{ strokeColor: '#f0f' }}\n                                precision={30}\n                                eventListenerMap={circleEventListenerMap}\n                            />\n                            <ContextMenu\n                                onOpen={handleOpenContextMenu}\n                                menuItems={contextMenuItems}\n                                contextMenuEvent={contextMenuData.event}\n                                targetPosition={contextMenuData.targetPosition}\n                            />\n                        </>\n                    );\n                }}\n            </Map>\n        </div>\n    );\n};\n\nexport default ContextMenuExample;"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "ContextMenu",
+                  "rows": [
+                    {
+                      "name": "onOpen",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Callback function triggered when the context menu has opened. It returns the coordinates where the map has been clicked: { lat: 48.07182240898762, lng: 11.495482666015647 }"
+                    },
+                    {
+                      "name": "children",
+                      "type": "List of ContextMenuItem",
+                      "default": "",
+                      "description": "The list of ContextMenuItem to render. Note that the order is important and may not be altered after the first render as the component tries to update the labels directly and relieson the order of items. Also do not omit an item which you want to add later on. Rather disable it."
+                    }
+                  ]
+                },
+                {
+                  "heading": "ContextMenuItem",
+                  "rows": [
+                    {
+                      "name": "label",
+                      "type": "String",
+                      "default": "",
+                      "description": "The actual label text."
+                    },
+                    {
+                      "name": "disabled",
+                      "type": "Boolean",
+                      "default": "",
+                      "description": "Defines whether or not the item is disabled."
+                    },
+                    {
+                      "name": "hasSpinner",
+                      "type": "Boolean",
+                      "default": "",
+                      "description": "Defines whether or not a spinner is rendered instead of the label."
+                    },
+                    {
+                      "name": "icon",
+                      "type": "String",
+                      "default": "",
+                      "description": "The name of the icon added to the label."
+                    },
+                    {
+                      "name": "callback",
+                      "type": "Function",
+                      "default": "",
+                      "description": "Callback function that is called when clicking on the item."
+                    },
+                    {
+                      "name": "labelClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes added to the label element."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional classes added to the wrapper element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

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

@@ -0,0 +1,34 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:03.714Z",
+    "source": "https://uikit.developers.rio.cloud/#components/mapDraggableMarker",
+    "category": "Components",
+    "section": "Map",
+    "slug": "components/mapdraggablemarker",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "d1401da7b26fdbce961a8c9c3cea41e2f987442558093994a33d787da979c18a"
+  },
+  "title": "Draggable marker",
+  "lead": null,
+  "content": [
+    {
+      "heading": "Draggable marker",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"Map position-relative map-type-default \" style=\"height: 550px;\"><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=\"550\" data-engine=\"three.js r152\" style=\"position: absolute; left: 0px; top: 0px; width: 908px; height: 550px;\"></canvas><canvas width=\"908\" height=\"550\" style=\"position: absolute; left: 0px; top: 0px; width: 908px; height: 550px; display: none;\"></canvas><div style=\"position: absolute; height: 100%; width: 100%; z-index: 1;\"><div style=\"position: absolute; pointer-events: none; width: 908px; height: 550px; 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=\"MapElements\"></div></div><div class=\"margin-top-15\"><label>Marker position</label><div>{\"lat\":48.16,\"lng\":11.38}</div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "// See https://www.here.com/docs/bundle/draggable-marker/page/README.html\n\nimport { useState, useRef } from 'react';\n\nimport Map from '@rio-cloud/rio-uikit/Map';\nimport EventUtils from '@rio-cloud/rio-uikit/EventUtils';\nimport Marker from '@rio-cloud/rio-uikit/Marker';\nimport SingleMapMarker from '@rio-cloud/rio-uikit/SingleMapMarker';\n\nimport { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';\nimport type { MapApi, MapEvent, Position } from '@rio-cloud/rio-uikit/mapTypes';\n\nconst initialMapPosition = { lat: 48.03, lng: 11.7 };\n\nconst MarkerExample = () => {\n    const mapApiRef = useRef<MapApi>();\n\n    const [markerPosition, setMarkerPosition] = useState<Position>({ lat: 48.16, lng: 11.38 });\n\n    const mapEventListenerMap = {\n        [EventUtils.TAP]: (event: MapEvent) => {\n            const pointer = event.currentPointer;\n            setMarkerPosition(mapApiRef.current?.map.screenToGeo(pointer.viewportX, pointer.viewportY));\n        },\n    };\n\n    const markerEventListenerMap = {\n        [EventUtils.DRAG_START]: (event: MapEvent) => {\n            // disable the default draggability of the underlying map\n            // and calculate the offset between mouse and target's position\n            // when starting to drag a marker object:\n            const target = event.target;\n            const pointer = event.currentPointer;\n\n            if (target.draggable) {\n                const targetPosition = mapApiRef.current?.map.geoToScreen(target.getGeometry());\n                target.offset = new H.math.Point(\n                    pointer.viewportX - targetPosition.x,\n                    pointer.viewportY - targetPosition.y\n                );\n                mapApiRef.current?.behavior.disable();\n            }\n        },\n        [EventUtils.DRAG_END]: (event: MapEvent) => {\n            // re-enable the default draggability of the underlying map\n            // when dragging has completed\n            const target = event.target;\n            if (target.draggable) {\n                mapApiRef.current?.behavior.enable();\n            }\n\n            // Update final map marker position\n            const pointer = event.currentPointer;\n            setMarkerPosition(\n                mapApiRef.current?.map.screenToGeo(\n                    pointer.viewportX - target.offset.x,\n                    pointer.viewportY - target.offset.y\n                )\n            );\n        },\n        [EventUtils.DRAG]: (event: MapEvent) => {\n            // Listen to the drag event and move the position of the marker\n            // as necessary\n            const target = event.target;\n            const pointer = event.currentPointer;\n            if (target.draggable) {\n                target.setGeometry(\n                    mapApiRef.current?.map.screenToGeo(\n                        pointer.viewportX - target.offset.x,\n                        pointer.viewportY - target.offset.y\n                    )\n                );\n            }\n        },\n    };\n\n    return (\n        <>\n            <Map\n                credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}\n                center={initialMapPosition}\n                zoom={10}\n                height={550}\n                eventListenerMap={mapEventListenerMap}\n            >\n                {(api: MapApi) => {\n                    mapApiRef.current = api;\n\n                    return (\n                        <Marker\n                            position={markerPosition}\n                            icon={<SingleMapMarker iconNames={['pushpin']} markerColor='bg-map-marker-poi' />}\n                            eventListenerMap={markerEventListenerMap}\n                            draggable\n                        />\n                    );\n                }}\n            </Map>\n            <div className='margin-top-15'>\n                <label>Marker position</label>\n                <div>{JSON.stringify(markerPosition)}</div>\n            </div>\n        </>\n    );\n};\n\nexport default MarkerExample;"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

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

@@ -0,0 +1,27 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:01.861Z",
+    "source": "https://uikit.developers.rio.cloud/#components/mapGettingStarted",
+    "category": "Components",
+    "section": "Map",
+    "slug": "components/mapgettingstarted",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "44785246f67fc5130a978e81a074bcc34aa7f47ba1191c49562e0c7013595144"
+  },
+  "title": "Prerequisites",
+  "lead": "Please note that the usage of HERE Maps is not free. If you have any questions regarding license costs, please contact us.",
+  "content": [
+    {
+      "heading": "Prerequisites",
+      "body": "> Note: HERE Maps credentials used in the UIKIT demo are not allowed to be used in any production environment! Please make sure you get your own \"dev\" and \"prod\" credentials!",
+      "examples": []
+    },
+    {
+      "heading": "HERE Maps credentials",
+      "body": "In case you want to use HERE Maps in production, please contact finance@rio.cloud.\n\nAdd HERE Maps dependencies\n\nMap Imports\n\nAs the UIKIT Map component relies on the map scripts from Here, we need to add them to the index.html as shown below.\n\n```html\n<script src=\"https://js.api.here.com/v3/3.1/mapsjs-core.js\" type=\"text/javascript\"></script>\n<script src=\"https://js.api.here.com/v3/3.1/mapsjs-core-legacy.js\" type=\"text/javascript\"></script>\n<script src=\"https://js.api.here.com/v3/3.1/mapsjs-service.js\" type=\"text/javascript\"></script>\n<script src=\"https://js.api.here.com/v3/3.1/mapsjs-service-legacy.js\" type=\"text/javascript\"></script>\n<script src=\"https://js.api.here.com/v3/3.1/mapsjs-mapevents.js\" type=\"text/javascript\"></script>\n<script src=\"https://js.api.here.com/v3/3.1/mapsjs-ui.js\" type=\"text/javascript\"></script>\n<script src=\"https://js.api.here.com/v3/3.1/mapsjs-harp.js\" type=\"text/javascript\"></script>\n<script src=\"https://js.api.here.com/v3/3.1/mapsjs-clustering.js\" type=\"text/javascript\"></script>\n\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://js.api.here.com/v3/3.1/mapsjs-ui.css\" />\n```\n\nMap API Version\n\nBy default, the map imports use the map version 3.1. However, this version is not a fixed version as it will be resolved to an internal version by Here. This means version 3.1 is treated as an evergreen version.\n\nIf you encounter any instability or even bugs with the map itself, it is recommended to set the version fixed in the imports and check for a newer version on demand.\n\nMore details can be found on the Here Developer Platform\n\nFor example\n\n```html\n<script src=\"https://js.api.here.com/v3/3.1.11.2/mapsjs-core.js\"></script>\n```",
+      "examples": []
+    }
+  ],
+  "see_also": []
+}