@rio-cloud/uikit-mcp 1.0.0

package/data/pages/Components/components/mapmarker.json

@@ -0,0 +1,700 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:10.128Z",
+    "source": "https://uikit.developers.rio.cloud/#components/mapMarker",
+    "category": "Components",
+    "section": "Map",
+    "slug": "components/mapmarker",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "6b1250b632b25520171635d187f193da8821718e75cc8be6473eb886c8c3f2fc"
+  },
+  "title": "Marker",
+  "lead": "Markers are used to render elements at specific locations on the map. They adapt their position as the user interacts with the map.",
+  "content": [
+    {
+      "heading": "Marker",
+      "body": "> Note: The map zoom level does not affect the size of Markers.\n\nSharing icon between Markers\n\nIt's possible to share icon instances between different markers. This can be used to improve rendering performance of many markers on the map.",
+      "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: 620px;\"><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=\"620\" data-engine=\"three.js r152\" style=\"position: absolute; left: 0px; top: 0px; width: 908px; height: 620px;\"></canvas><canvas width=\"908\" height=\"620\" style=\"position: absolute; left: 0px; top: 0px; width: 908px; height: 620px; display: none;\"></canvas><div style=\"position: absolute; height: 100%; width: 100%; z-index: 1;\"><div style=\"position: absolute; pointer-events: none; width: 908px; height: 620px; 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 Marker from '@rio-cloud/rio-uikit/Marker';\nimport TextMarker from '@rio-cloud/rio-uikit/TextMarker';\nimport MapSettings from '@rio-cloud/rio-uikit/MapSettings';\nimport MapTypeSettings from '@rio-cloud/rio-uikit/MapTypeSettings';\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 { MapEvent } from '@rio-cloud/rio-uikit/mapTypes';\n\nconst MarkerExample = () => {\n    const position = { lat: 47.96, lng: 11.7 };\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={620}\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            <>\n                {/* Default marker - active */}\n                <Marker\n                    position={{ lat: 48.16, lng: 11.38 }}\n                    icon={<SingleMapMarker iconNames={['truck']} markerColor='bg-map-marker-asset' active />}\n                    eventListenerMap={eventListenerMap}\n                />\n                <Marker\n                    position={{ lat: 48.16, lng: 11.48 }}\n                    icon={<SingleMapMarker iconNames={['factory']} markerColor='bg-map-marker-poi' active />}\n                    eventListenerMap={eventListenerMap}\n                />\n                <Marker\n                    position={{ lat: 48.16, lng: 11.58 }}\n                    icon={<SingleMapMarker iconNames={['geofence']} markerColor='bg-map-marker-geofence' active />}\n                    eventListenerMap={eventListenerMap}\n                />\n                <Marker\n                    position={{ lat: 48.16, lng: 11.68 }}\n                    icon={<SingleMapMarker iconNames={['route']} markerColor='bg-map-marker-route' active />}\n                    eventListenerMap={eventListenerMap}\n                />\n                <Marker\n                    position={{ lat: 48.16, lng: 11.78 }}\n                    icon={\n                        <SingleMapMarker\n                            iconNames={['road-restrictions']}\n                            markerColor='bg-map-marker-restrictions'\n                            active\n                        />\n                    }\n                    eventListenerMap={eventListenerMap}\n                />\n\n                {/* Default marker */}\n                <Marker\n                    position={{ lat: 48.06, lng: 11.38 }}\n                    icon={<SingleMapMarker iconNames={['truck']} markerColor='bg-map-marker-asset' />}\n                    eventListenerMap={eventListenerMap}\n                />\n                <Marker\n                    position={{ lat: 48.06, lng: 11.48 }}\n                    icon={<SingleMapMarker iconNames={['factory']} markerColor='bg-map-marker-poi' />}\n                    eventListenerMap={eventListenerMap}\n                />\n                <Marker\n                    position={{ lat: 48.06, lng: 11.58 }}\n                    icon={<SingleMapMarker iconNames={['geofence']} markerColor='bg-map-marker-geofence' />}\n                    eventListenerMap={eventListenerMap}\n                />\n                <Marker\n                    position={{ lat: 48.06, lng: 11.68 }}\n                    icon={<SingleMapMarker iconNames={['route']} markerColor='bg-map-marker-route' />}\n                    eventListenerMap={eventListenerMap}\n                />\n                <Marker\n                    position={{ lat: 48.06, lng: 11.78 }}\n                    icon={\n                        <SingleMapMarker iconNames={['road-restrictions']} markerColor='bg-map-marker-restrictions' />\n                    }\n                    eventListenerMap={eventListenerMap}\n                />\n\n                {/* anchorOnly marker */}\n                <Marker\n                    position={{ lat: 48.0, lng: 11.38 }}\n                    icon={\n                        <SingleMapMarker\n                            iconNames={['truck']}\n                            markerColor='bg-map-marker-asset'\n                            anchorSize='lg'\n                            markerOnHover\n                        />\n                    }\n                    eventListenerMap={eventListenerMap}\n                />\n                <Marker\n                    position={{ lat: 48.0, lng: 11.48 }}\n                    icon={\n                        <SingleMapMarker\n                            iconNames={['factory']}\n                            markerColor='bg-map-marker-poi'\n                            anchorSize='lg'\n                            markerOnHover\n                        />\n                    }\n                    eventListenerMap={eventListenerMap}\n                />\n                <Marker\n                    position={{ lat: 48.0, lng: 11.58 }}\n                    icon={\n                        <SingleMapMarker\n                            iconNames={['geofence']}\n                            markerColor='bg-map-marker-geofence'\n                            anchorSize='lg'\n                            markerOnHover\n                        />\n                    }\n                    eventListenerMap={eventListenerMap}\n                />\n                <Marker\n                    position={{ lat: 48.0, lng: 11.68 }}\n                    icon={\n                        <SingleMapMarker\n                            iconNames={['route']}\n                            markerColor='bg-map-marker-route'\n                            anchorSize='lg'\n                            markerOnHover\n                        />\n                    }\n                    eventListenerMap={eventListenerMap}\n                />\n\n                <Marker\n                    position={{ lat: 48.0, lng: 11.745 }}\n                    icon={\n                        <SingleMapMarker\n                            markerColor='bg-map-marker-route'\n                            anchorSize='lg'\n                            anchorOnly\n                            name='Hidden marker text'\n                            cursor='cursor-grab'\n                        />\n                    }\n                    eventListenerMap={eventListenerMap}\n                />\n\n                <Marker\n                    position={{ lat: 48.0, lng: 11.81 }}\n                    icon={\n                        <SingleMapMarker\n                            name={\n                                <div className='display-flex align-items-center gap-10 padding-x-15 padding-y-5'>\n                                    <span className='text-size-20 rioglyph rioglyph-drivercard-in' />\n                                    <div className='line-height-16'>\n                                        <div className='text-medium'>Fahrerkarte gesteckt</div>\n                                        <div className='text-anchorSize-12'>14.07.2023, 08:26</div>\n                                    </div>\n                                </div>\n                            }\n                            markerColor='bg-map-marker-route'\n                            markerOnHover\n                            anchorSize='lg'\n                        />\n                    }\n                    eventListenerMap={eventListenerMap}\n                />\n\n                <Marker\n                    position={{ lat: 48, lng: 11.88 }}\n                    eventListenerMap={eventListenerMap}\n                    icon={<SingleMapMarker markerColor='bg-map-marker-poi' anchorIconName='heart' anchorSize='lg' />}\n                />\n                <Marker\n                    position={{ lat: 48, lng: 11.92 }}\n                    icon={\n                        <SingleMapMarker\n                            markerColor='bg-map-marker-success'\n                            anchorIconName='flag'\n                            clickable={false}\n                            anchorSize='lg'\n                        />\n                    }\n                />\n\n                <Marker\n                    position={{ lat: 48, lng: 11.98 }}\n                    icon={<SingleMapMarker markerColor='bg-map-marker-poi' anchorSize='lg' clickable={false} />}\n                />\n\n                <Marker\n                    position={{ lat: 48, lng: 12.08 }}\n                    icon={\n                        <SingleMapMarker\n                            markerColor='bg-map-marker-poi'\n                            name={<div className='padding-x-15'>Lorem ipsum dolor sit amet</div>}\n                            markerOnHover\n                        />\n                    }\n                />\n\n                {/* Status colored markers */}\n                <Marker\n                    position={{ lat: 47.92, lng: 11.38 }}\n                    icon={<SingleMapMarker iconNames={['heart']} markerColor='bg-map-marker-success' />}\n                    eventListenerMap={eventListenerMap}\n                />\n                <Marker\n                    position={{ lat: 47.92, lng: 11.48 }}\n                    icon={<SingleMapMarker iconNames={['exclamation-sign']} markerColor='bg-map-marker-warning' />}\n                    eventListenerMap={eventListenerMap}\n                />\n                <Marker\n                    position={{ lat: 47.92, lng: 11.58 }}\n                    icon={<SingleMapMarker iconNames={['error-sign']} markerColor='bg-map-marker-danger' />}\n                    eventListenerMap={eventListenerMap}\n                />\n                <Marker\n                    position={{ lat: 47.92, lng: 11.68 }}\n                    icon={<SingleMapMarker iconNames={['info-sign']} markerColor='bg-map-marker-info' />}\n                    eventListenerMap={eventListenerMap}\n                />\n\n                {/* Status colored markers - active */}\n                <Marker\n                    position={{ lat: 47.85, lng: 11.38 }}\n                    icon={<SingleMapMarker iconNames={['heart']} markerColor='bg-map-marker-success' active />}\n                    eventListenerMap={eventListenerMap}\n                />\n                <Marker\n                    position={{ lat: 47.85, lng: 11.48 }}\n                    icon={\n                        <SingleMapMarker iconNames={['exclamation-sign']} markerColor='bg-map-marker-warning' active />\n                    }\n                    eventListenerMap={eventListenerMap}\n                />\n                <Marker\n                    position={{ lat: 47.85, lng: 11.58 }}\n                    icon={<SingleMapMarker iconNames={['error-sign']} markerColor='bg-map-marker-danger' active />}\n                    eventListenerMap={eventListenerMap}\n                />\n                <Marker\n                    position={{ lat: 47.85, lng: 11.68 }}\n                    icon={<SingleMapMarker iconNames={['info-sign']} markerColor='bg-map-marker-info' active />}\n                    eventListenerMap={eventListenerMap}\n                />\n\n                {/* One number only marker */}\n                <Marker\n                    position={{ lat: 47.92, lng: 11.78 }}\n                    icon={<SingleMapMarker markerColor='bg-map-marker-asset' name='1' />}\n                    eventListenerMap={eventListenerMap}\n                />\n\n                <Marker\n                    position={{ lat: 47.85, lng: 11.78 }}\n                    icon={<SingleMapMarker markerColor='bg-map-marker-asset' active name='1' />}\n                    eventListenerMap={eventListenerMap}\n                />\n\n                {/* Custom text marker */}\n                <TextMarker\n                    position={{ lat: 48.205, lng: 11.88 }}\n                    text='This is a TextMarker'\n                    eventListenerMap={eventListenerMap}\n                />\n                <Marker\n                    position={{ lat: 48.14, lng: 11.88 }}\n                    icon={\n                        <span className='bg-white rounded border max-width-200 shadow-default user-select-none cursor-default'>\n                            <div className='border border-bottom-only padding-10 text-color-info'>\n                                <span className='rioglyph rioglyph-info-sign margin-right-3' />\n                                <span className='text-medium'>This is a custom Marker</span>\n                            </div>\n                            <div className='padding-10'>\n                                This kind of marker is useful when displaying additional information on the map\n                            </div>\n                        </span>\n                    }\n                    eventListenerMap={eventListenerMap}\n                />\n\n                {/* Status color marker with text */}\n                <Marker\n                    position={{ lat: 47.77, lng: 11.38 }}\n                    icon={\n                        <SingleMapMarker\n                            bearing={60}\n                            name='Vehicle'\n                            iconNames={['truck-breakdown']}\n                            markerColor='bg-map-marker-warning'\n                            moving\n                        />\n                    }\n                    eventListenerMap={eventListenerMap}\n                />\n                <Marker\n                    position={{ lat: 47.77, lng: 11.58 }}\n                    icon={\n                        <SingleMapMarker\n                            bearing={60}\n                            name='Vehicle'\n                            iconNames={['truck-breakdown']}\n                            markerColor='bg-map-marker-danger'\n                            moving\n                            pinging\n                        />\n                    }\n                    eventListenerMap={eventListenerMap}\n                />\n                <Marker\n                    position={{ lat: 47.71, lng: 11.38 }}\n                    icon={\n                        <SingleMapMarker\n                            bearing={60}\n                            name='Vehicle'\n                            iconNames={['truck-breakdown']}\n                            markerColor='bg-map-marker-warning'\n                            moving\n                            active\n                        />\n                    }\n                    eventListenerMap={eventListenerMap}\n                />\n                <Marker\n                    position={{ lat: 47.71, lng: 11.58 }}\n                    icon={\n                        <SingleMapMarker\n                            bearing={60}\n                            name='Vehicle'\n                            iconNames={['truck-breakdown']}\n                            markerColor='bg-map-marker-danger'\n                            moving\n                            active\n                        />\n                    }\n                    eventListenerMap={eventListenerMap}\n                />\n\n                {/* Asset marker with text */}\n                <Marker\n                    position={{ lat: 47.77, lng: 11.8 }}\n                    icon={\n                        <SingleMapMarker\n                            bearing={60}\n                            name='Vehicle'\n                            warningCount={1}\n                            exceptionCount={2}\n                            iconNames={['truck']}\n                            moving\n                        />\n                    }\n                    eventListenerMap={eventListenerMap}\n                />\n                <Marker\n                    position={{ lat: 47.71, lng: 11.8 }}\n                    icon={\n                        <SingleMapMarker\n                            bearing={60}\n                            name='Vehicle'\n                            warningCount={1}\n                            exceptionCount={2}\n                            iconNames={['truck']}\n                            moving\n                            active\n                        />\n                    }\n                    eventListenerMap={eventListenerMap}\n                />\n            </>\n        </Map>\n    );\n};\n\nexport default MarkerExample;"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "SingleMapMarker",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 2",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><div class=\"bg-light padding-top-25\"><div class=\"margin-left-25 padding-left-25 margin-right-25 padding-right-25 display-flex-ls\"><div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\"><div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-asset\" style=\"color: var(--color-map-marker-asset);\"><div class=\"rio-map-marker-translate\"><div class=\"rio-map-single cursor-pointer\"><div class=\"rio-map-icon\"><span class=\"rioglyph rioglyph-truck\"></span></div><div class=\"rio-map-name\">Vehicle</div></div><div class=\"rio-map-anchor-arrow\"></div><div class=\"rio-map-anchor cursor-pointer\"></div></div></div></div><div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\"><div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-asset\" style=\"color: var(--color-map-marker-asset);\"><div class=\"rio-map-marker-translate\"><div class=\"rio-map-single cursor-pointer\"><div class=\"rio-map-icon\"><span class=\"rioglyph rioglyph-truck\"></span></div><div class=\"rio-map-name\">Vehicle</div><div class=\"rio-map-bubble exception\">2</div><div class=\"rio-map-bubble warning\">1</div></div><div class=\"rio-map-anchor-arrow\"></div><div class=\"rio-map-anchor cursor-pointer\"></div></div></div></div><div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\"><div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-asset\" style=\"color: var(--color-map-marker-asset);\"><div class=\"rio-map-marker-translate\"><div class=\"rio-map-single moving cursor-pointer\"><div class=\"rio-map-icon rio-map-marker-state rio-map-direction\"><span class=\"rioglyph rioglyph-direction\" style=\"transform: rotate(60deg);\"></span></div><div class=\"rio-map-icon\"><span class=\"rioglyph rioglyph-truck\"></span></div><div class=\"rio-map-name\">Vehicle</div><div class=\"rio-map-bubble exception\">2</div><div class=\"rio-map-bubble warning\">1</div></div><div class=\"rio-map-anchor-arrow\"></div><div class=\"rio-map-anchor cursor-pointer\"></div></div></div></div></div></div><p class=\"margin-bottom-0\">The hover state is triggered on mouse hover or by adding the class <code class=\"code\">hover</code></p></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import SingleMapMarker from '@rio-cloud/rio-uikit/SingleMapMarker';\n\nexport default () => (\n    <div>\n        <div className='bg-light padding-top-25'>\n            <div className='margin-left-25 padding-left-25 margin-right-25 padding-right-25 display-flex-ls'>\n                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>\n                    <SingleMapMarker name='Vehicle' iconNames={['truck']} />\n                </div>\n                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>\n                    <SingleMapMarker\n                        bearing={60}\n                        name='Vehicle'\n                        warningCount={1}\n                        exceptionCount={2}\n                        iconNames={['truck']}\n                    />\n                </div>\n                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>\n                    <SingleMapMarker\n                        bearing={60}\n                        name='Vehicle'\n                        warningCount={1}\n                        exceptionCount={2}\n                        moving\n                        iconNames={['truck']}\n                    />\n                </div>\n            </div>\n        </div>\n        <p className='margin-bottom-0'>\n            The hover state is triggered on mouse hover or by adding the class <code className='code'>hover</code>\n        </p>\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <div class=\"bg-light padding-top-25\">\n        <div class=\"margin-left-25 padding-left-25 margin-right-25 padding-right-25 display-flex-ls\">\n            <div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\">\n                <div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-asset\" style=\"color: var(--color-map-marker-asset);\">\n                    <div class=\"rio-map-marker-translate\">\n                        <div class=\"rio-map-single cursor-pointer\">\n                            <div class=\"rio-map-icon\">\n                                <span class=\"rioglyph rioglyph-truck\">\n                                </span>\n                            </div>\n                            <div class=\"rio-map-name\">Vehicle</div>\n                        </div>\n                        <div class=\"rio-map-anchor-arrow\">\n                        </div>\n                        <div class=\"rio-map-anchor cursor-pointer\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\">\n                <div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-asset\" style=\"color: var(--color-map-marker-asset);\">\n                    <div class=\"rio-map-marker-translate\">\n                        <div class=\"rio-map-single cursor-pointer\">\n                            <div class=\"rio-map-icon\">\n                                <span class=\"rioglyph rioglyph-truck\">\n                                </span>\n                            </div>\n                            <div class=\"rio-map-name\">Vehicle</div>\n                            <div class=\"rio-map-bubble exception\">2</div>\n                            <div class=\"rio-map-bubble warning\">1</div>\n                        </div>\n                        <div class=\"rio-map-anchor-arrow\">\n                        </div>\n                        <div class=\"rio-map-anchor cursor-pointer\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\">\n                <div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-asset\" style=\"color: var(--color-map-marker-asset);\">\n                    <div class=\"rio-map-marker-translate\">\n                        <div class=\"rio-map-single moving cursor-pointer\">\n                            <div class=\"rio-map-icon rio-map-marker-state rio-map-direction\">\n                                <span class=\"rioglyph rioglyph-direction\" style=\"transform: rotate(60deg);\">\n                                </span>\n                            </div>\n                            <div class=\"rio-map-icon\">\n                                <span class=\"rioglyph rioglyph-truck\">\n                                </span>\n                            </div>\n                            <div class=\"rio-map-name\">Vehicle</div>\n                            <div class=\"rio-map-bubble exception\">2</div>\n                            <div class=\"rio-map-bubble warning\">1</div>\n                        </div>\n                        <div class=\"rio-map-anchor-arrow\">\n                        </div>\n                        <div class=\"rio-map-anchor cursor-pointer\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <p class=\"margin-bottom-0\">The hover state is triggered on mouse hover or by adding the class <code class=\"code\">hover</code>\n    </p>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "bearing",
+                      "type": "Number",
+                      "default": "0",
+                      "description": "Defines the rotation of the arrow in deg."
+                    },
+                    {
+                      "name": "name",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "Text for the Marker."
+                    },
+                    {
+                      "name": "warningCount",
+                      "type": "Number",
+                      "default": "0",
+                      "description": "Displayed in the orange badge if more than 0."
+                    },
+                    {
+                      "name": "exceptionCount",
+                      "type": "Number",
+                      "default": "0",
+                      "description": "Displayed in the red badge if more than 0."
+                    },
+                    {
+                      "name": "active",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines if marker is selected or not."
+                    },
+                    {
+                      "name": "clickable",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Defines if marker is clickable or not."
+                    },
+                    {
+                      "name": "fixed",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines if marker is fixed and has no centering point."
+                    },
+                    {
+                      "name": "moving",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the direction icon is displayed or not"
+                    },
+                    {
+                      "name": "pinging",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines if marker is rendered with a pinging animation."
+                    },
+                    {
+                      "name": "positionIconName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Optional icon name that is shown on the position circle of the DOM marker. Use this when no marker content is shown"
+                    },
+                    {
+                      "name": "iconNames",
+                      "type": "Array of Strings",
+                      "default": "",
+                      "description": "List of rioglyph icon names"
+                    },
+                    {
+                      "name": "markerColor",
+                      "type": "String",
+                      "default": "'bg-map-marker-asset'",
+                      "description": "Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence', 'bg-map-marker-route', 'bg-map-marker-info', 'bg-map-marker-succcess', 'bg-map-marker-warning' or 'bg-map-marker-danger'."
+                    },
+                    {
+                      "name": "size",
+                      "type": "String",
+                      "default": "'md'",
+                      "description": "Used to control the marker's size. Possible values are: md and lg."
+                    },
+                    {
+                      "name": "cursor",
+                      "type": "String",
+                      "default": "'cursor-pointer'",
+                      "description": "Possible values are: cursor-pointer, cursor-grab and cursor-not-allowed."
+                    },
+                    {
+                      "name": "visibleOnHover",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Whether the marker is only visible on hover."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "Example 3",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><div class=\"bg-light padding-top-25\"><div class=\"margin-left-25 padding-left-25 margin-right-25 padding-right-25 display-flex-ls\"><div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\"><div class=\"active rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-asset\" style=\"color: var(--color-map-marker-asset);\"><div class=\"rio-map-marker-translate\"><div class=\"rio-map-single moving active cursor-pointer\"><div class=\"rio-map-icon rio-map-marker-state rio-map-direction\"><span class=\"rioglyph rioglyph-direction\" style=\"transform: rotate(135deg);\"></span></div><div class=\"rio-map-icon\"><span class=\"rioglyph rioglyph-truck\"></span></div><div class=\"rio-map-icon\"><span class=\"rioglyph rioglyph-heart\"></span></div><div class=\"rio-map-name\">Vehicle</div><div class=\"rio-map-bubble exception\">2</div><div class=\"rio-map-bubble warning\">1</div></div><div class=\"rio-map-anchor-arrow\"></div><div class=\"rio-map-anchor cursor-pointer\"></div></div></div></div><div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\"><div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-asset\" style=\"color: var(--color-map-marker-asset);\"><div class=\"rio-map-marker-translate\"><div class=\"rio-map-single cursor-pointer\"><div class=\"rio-map-icon rio-map-marker-state \"><span class=\"rioglyph rioglyph-parking\"></span></div><div class=\"rio-map-icon\"><span class=\"rioglyph rioglyph-truck\"></span></div><div class=\"rio-map-name\">Vehicle</div></div><div class=\"rio-map-anchor-arrow\"></div><div class=\"rio-map-anchor cursor-pointer\"></div></div></div></div><div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\"><div class=\"active rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-asset\" style=\"color: var(--color-map-marker-asset);\"><div class=\"rio-map-marker-translate\"><div class=\"rio-map-single active cursor-pointer\"><div class=\"rio-map-icon\"><span class=\"rioglyph rioglyph-truck\"></span></div><div class=\"rio-map-name\">Vehicle</div></div><div class=\"rio-map-anchor-arrow\"></div><div class=\"rio-map-anchor cursor-pointer\"></div></div></div></div><div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\"><div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-asset\" style=\"color: var(--color-map-marker-asset);\"><div class=\"rio-map-marker-translate\"><div class=\"rio-map-single cursor-pointer\"><div class=\"rio-map-icon rio-map-marker-state \"><span class=\"rioglyph rioglyph-plugged-on\"></span></div><div class=\"rio-map-icon\"><span class=\"rioglyph rioglyph-truck\"></span></div><div class=\"rio-map-name\">Vehicle</div><div class=\"rio-map-bubble exception\">2</div><div class=\"rio-map-bubble warning\">1</div></div><div class=\"rio-map-anchor-arrow\"></div><div class=\"rio-map-anchor cursor-pointer\"></div></div></div></div></div></div><p class=\"margin-bottom-0\">To activate the active state of any marker you have to add the class <code class=\"code\">active</code></p></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import SingleMapMarker from '@rio-cloud/rio-uikit/SingleMapMarker';\n\nexport default () => (\n    <div>\n        <div className='bg-light padding-top-25'>\n            <div className='margin-left-25 padding-left-25 margin-right-25 padding-right-25 display-flex-ls'>\n                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>\n                    <SingleMapMarker\n                        bearing={135}\n                        name='Vehicle'\n                        warningCount={1}\n                        exceptionCount={2}\n                        active\n                        moving\n                        iconNames={['truck', 'heart']}\n                    />\n                </div>\n                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>\n                    <SingleMapMarker name='Vehicle' iconNames={['truck']} stateIconName='parking' />\n                </div>\n                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>\n                    <SingleMapMarker name='Vehicle' iconNames={['truck']} active />\n                </div>\n                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>\n                    <SingleMapMarker\n                        name='Vehicle'\n                        warningCount={1}\n                        exceptionCount={2}\n                        iconNames={['truck']}\n                        stateIconName='plugged-on'\n                    />\n                </div>\n            </div>\n        </div>\n        <p className='margin-bottom-0'>\n            To activate the active state of any marker you have to add the class <code className='code'>active</code>\n        </p>\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <div class=\"bg-light padding-top-25\">\n        <div class=\"margin-left-25 padding-left-25 margin-right-25 padding-right-25 display-flex-ls\">\n            <div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\">\n                <div class=\"active rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-asset\" style=\"color: var(--color-map-marker-asset);\">\n                    <div class=\"rio-map-marker-translate\">\n                        <div class=\"rio-map-single moving active cursor-pointer\">\n                            <div class=\"rio-map-icon rio-map-marker-state rio-map-direction\">\n                                <span class=\"rioglyph rioglyph-direction\" style=\"transform: rotate(135deg);\">\n                                </span>\n                            </div>\n                            <div class=\"rio-map-icon\">\n                                <span class=\"rioglyph rioglyph-truck\">\n                                </span>\n                            </div>\n                            <div class=\"rio-map-icon\">\n                                <span class=\"rioglyph rioglyph-heart\">\n                                </span>\n                            </div>\n                            <div class=\"rio-map-name\">Vehicle</div>\n                            <div class=\"rio-map-bubble exception\">2</div>\n                            <div class=\"rio-map-bubble warning\">1</div>\n                        </div>\n                        <div class=\"rio-map-anchor-arrow\">\n                        </div>\n                        <div class=\"rio-map-anchor cursor-pointer\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\">\n                <div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-asset\" style=\"color: var(--color-map-marker-asset);\">\n                    <div class=\"rio-map-marker-translate\">\n                        <div class=\"rio-map-single cursor-pointer\">\n                            <div class=\"rio-map-icon rio-map-marker-state \">\n                                <span class=\"rioglyph rioglyph-parking\">\n                                </span>\n                            </div>\n                            <div class=\"rio-map-icon\">\n                                <span class=\"rioglyph rioglyph-truck\">\n                                </span>\n                            </div>\n                            <div class=\"rio-map-name\">Vehicle</div>\n                        </div>\n                        <div class=\"rio-map-anchor-arrow\">\n                        </div>\n                        <div class=\"rio-map-anchor cursor-pointer\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\">\n                <div class=\"active rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-asset\" style=\"color: var(--color-map-marker-asset);\">\n                    <div class=\"rio-map-marker-translate\">\n                        <div class=\"rio-map-single active cursor-pointer\">\n                            <div class=\"rio-map-icon\">\n                                <span class=\"rioglyph rioglyph-truck\">\n                                </span>\n                            </div>\n                            <div class=\"rio-map-name\">Vehicle</div>\n                        </div>\n                        <div class=\"rio-map-anchor-arrow\">\n                        </div>\n                        <div class=\"rio-map-anchor cursor-pointer\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\">\n                <div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-asset\" style=\"color: var(--color-map-marker-asset);\">\n                    <div class=\"rio-map-marker-translate\">\n                        <div class=\"rio-map-single cursor-pointer\">\n                            <div class=\"rio-map-icon rio-map-marker-state \">\n                                <span class=\"rioglyph rioglyph-plugged-on\">\n                                </span>\n                            </div>\n                            <div class=\"rio-map-icon\">\n                                <span class=\"rioglyph rioglyph-truck\">\n                                </span>\n                            </div>\n                            <div class=\"rio-map-name\">Vehicle</div>\n                            <div class=\"rio-map-bubble exception\">2</div>\n                            <div class=\"rio-map-bubble warning\">1</div>\n                        </div>\n                        <div class=\"rio-map-anchor-arrow\">\n                        </div>\n                        <div class=\"rio-map-anchor cursor-pointer\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <p class=\"margin-bottom-0\">To activate the active state of any marker you have to add the class <code class=\"code\">active</code>\n    </p>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "bearing",
+                      "type": "Number",
+                      "default": "0",
+                      "description": "Defines the rotation of the arrow in deg."
+                    },
+                    {
+                      "name": "name",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "Text for the Marker."
+                    },
+                    {
+                      "name": "warningCount",
+                      "type": "Number",
+                      "default": "0",
+                      "description": "Displayed in the orange badge if more than 0."
+                    },
+                    {
+                      "name": "exceptionCount",
+                      "type": "Number",
+                      "default": "0",
+                      "description": "Displayed in the red badge if more than 0."
+                    },
+                    {
+                      "name": "active",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines if marker is selected or not."
+                    },
+                    {
+                      "name": "clickable",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Defines if marker is clickable or not."
+                    },
+                    {
+                      "name": "fixed",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines if marker is fixed and has no centering point."
+                    },
+                    {
+                      "name": "moving",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the direction icon is displayed or not"
+                    },
+                    {
+                      "name": "pinging",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines if marker is rendered with a pinging animation."
+                    },
+                    {
+                      "name": "positionIconName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Optional icon name that is shown on the position circle of the DOM marker. Use this when no marker content is shown"
+                    },
+                    {
+                      "name": "iconNames",
+                      "type": "Array of Strings",
+                      "default": "",
+                      "description": "List of rioglyph icon names"
+                    },
+                    {
+                      "name": "markerColor",
+                      "type": "String",
+                      "default": "'bg-map-marker-asset'",
+                      "description": "Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence', 'bg-map-marker-route', 'bg-map-marker-info', 'bg-map-marker-succcess', 'bg-map-marker-warning' or 'bg-map-marker-danger'."
+                    },
+                    {
+                      "name": "size",
+                      "type": "String",
+                      "default": "'md'",
+                      "description": "Used to control the marker's size. Possible values are: md and lg."
+                    },
+                    {
+                      "name": "cursor",
+                      "type": "String",
+                      "default": "'cursor-pointer'",
+                      "description": "Possible values are: cursor-pointer, cursor-grab and cursor-not-allowed."
+                    },
+                    {
+                      "name": "visibleOnHover",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Whether the marker is only visible on hover."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "Example 4",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><div class=\"bg-light padding-top-25 map-details-view padding-bottom-25\"><div class=\"margin-left-25 padding-left-25 margin-right-25 padding-right-25 display-flex-ls\"><div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\"><div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-asset\" style=\"color: var(--color-map-marker-asset);\"><div class=\"rio-map-marker-translate\"><div class=\"rio-map-single cursor-pointer\"><div class=\"rio-map-icon\"><span class=\"rioglyph rioglyph-truck\"></span></div></div><div class=\"rio-map-anchor-arrow\"></div><div class=\"rio-map-anchor cursor-pointer\"></div></div></div></div><div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\"><div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-poi\" style=\"color: var(--color-map-marker-poi);\"><div class=\"rio-map-marker-translate\"><div class=\"rio-map-single cursor-pointer\"><div class=\"rio-map-icon\"><span class=\"rioglyph rioglyph-factory\"></span></div></div><div class=\"rio-map-anchor-arrow\"></div><div class=\"rio-map-anchor cursor-pointer\"></div></div></div></div><div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\"><div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-geofence\" style=\"color: var(--color-map-marker-geofence);\"><div class=\"rio-map-marker-translate\"><div class=\"rio-map-single cursor-pointer\"><div class=\"rio-map-icon\"><span class=\"rioglyph rioglyph-geofence\"></span></div></div><div class=\"rio-map-anchor-arrow\"></div><div class=\"rio-map-anchor cursor-pointer\"></div></div></div></div><div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\"><div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-restrictions\" style=\"color: var(--color-map-marker-restrictions);\"><div class=\"rio-map-marker-translate\"><div class=\"rio-map-single cursor-pointer\"><div class=\"rio-map-icon\"><span class=\"rioglyph rioglyph-road-restrictions\"></span></div></div><div class=\"rio-map-anchor-arrow\"></div><div class=\"rio-map-anchor cursor-pointer\"></div></div></div></div><div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\"><div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-route\" style=\"color: var(--color-map-marker-route);\"><div class=\"rio-map-marker-translate\"><div class=\"rio-map-single cursor-pointer\"><div class=\"rio-map-icon\"><span class=\"rioglyph rioglyph-route\"></span></div><div class=\"rio-map-name\">236km</div></div><div class=\"rio-map-anchor-arrow\"></div><div class=\"rio-map-anchor cursor-pointer\"></div></div></div></div></div></div><div class=\"bg-light map-details-view\"><div class=\"margin-left-25 padding-left-25 margin-right-25 padding-right-25 display-flex-ls\"><div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\"><div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-asset\" style=\"color: var(--color-map-marker-asset);\"><div class=\"rio-map-marker-translate\"><div class=\"rio-map-single fixed cursor-pointer\"><div class=\"rio-map-icon\"><span class=\"rioglyph rioglyph-truck\"></span></div></div><div class=\"rio-map-anchor-arrow\"></div><div class=\"rio-map-anchor cursor-pointer\"></div></div></div></div><div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\"><div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-poi\" style=\"color: var(--color-map-marker-poi);\"><div class=\"rio-map-marker-translate\"><div class=\"rio-map-single fixed cursor-pointer\"><div class=\"rio-map-icon\"><span class=\"rioglyph rioglyph-factory\"></span></div></div><div class=\"rio-map-anchor-arrow\"></div><div class=\"rio-map-anchor cursor-pointer\"></div></div></div></div><div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\"><div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-geofence\" style=\"color: var(--color-map-marker-geofence);\"><div class=\"rio-map-marker-translate\"><div class=\"rio-map-single fixed cursor-pointer\"><div class=\"rio-map-icon\"><span class=\"rioglyph rioglyph-geofence\"></span></div></div><div class=\"rio-map-anchor-arrow\"></div><div class=\"rio-map-anchor cursor-pointer\"></div></div></div></div><div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\"><div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-restrictions\" style=\"color: var(--color-map-marker-restrictions);\"><div class=\"rio-map-marker-translate\"><div class=\"rio-map-single fixed cursor-pointer\"><div class=\"rio-map-icon\"><span class=\"rioglyph rioglyph-road-restrictions\"></span></div></div><div class=\"rio-map-anchor-arrow\"></div><div class=\"rio-map-anchor cursor-pointer\"></div></div></div></div><div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\"><div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-route\" style=\"color: var(--color-map-marker-route);\"><div class=\"rio-map-marker-translate\"><div class=\"rio-map-single fixed cursor-pointer\"><div class=\"rio-map-icon\"><span class=\"rioglyph rioglyph-route\"></span></div></div><div class=\"rio-map-anchor-arrow\"></div><div class=\"rio-map-anchor cursor-pointer\"></div></div></div></div></div></div><div class=\"bg-light padding-top-25 map-details-view padding-bottom-25\"><div class=\"margin-left-25 padding-left-25 margin-right-25 padding-right-25 display-flex-ls\"><div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\"><div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-asset\" style=\"color: var(--color-map-marker-asset);\"><div class=\"rio-map-marker-translate\"><div class=\"rio-map-single cursor-pointer\"><div class=\"rio-map-icon\"><span class=\"rioglyph rioglyph-truck\"></span></div><div class=\"rio-map-name\">Vehicle</div></div><div class=\"rio-map-anchor-arrow\"></div><div class=\"rio-map-anchor cursor-pointer\"></div></div></div></div><div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\"><div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-poi\" style=\"color: var(--color-map-marker-poi);\"><div class=\"rio-map-marker-translate\"><div class=\"rio-map-single cursor-pointer\"><div class=\"rio-map-icon\"><span class=\"rioglyph rioglyph-factory\"></span></div><div class=\"rio-map-name\">POI</div></div><div class=\"rio-map-anchor-arrow\"></div><div class=\"rio-map-anchor cursor-pointer\"></div></div></div></div><div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\"><div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-geofence\" style=\"color: var(--color-map-marker-geofence);\"><div class=\"rio-map-marker-translate\"><div class=\"rio-map-single cursor-pointer\"><div class=\"rio-map-icon\"><span class=\"rioglyph rioglyph-geofence\"></span></div><div class=\"rio-map-name\">Geofence</div></div><div class=\"rio-map-anchor-arrow\"></div><div class=\"rio-map-anchor cursor-pointer\"></div></div></div></div><div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\"><div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-restrictions\" style=\"color: var(--color-map-marker-restrictions);\"><div class=\"rio-map-marker-translate\"><div class=\"rio-map-single cursor-pointer\"><div class=\"rio-map-icon\"><span class=\"rioglyph rioglyph-road-restrictions\"></span></div><div class=\"rio-map-name\">Max height 2.5m</div></div><div class=\"rio-map-anchor-arrow\"></div><div class=\"rio-map-anchor cursor-pointer\"></div></div></div></div><div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\"><div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-route\" style=\"color: var(--color-map-marker-route);\"><div class=\"rio-map-marker-translate\"><div class=\"rio-map-single cursor-pointer\"><div class=\"rio-map-icon\"><span class=\"rioglyph rioglyph-route\"></span></div><div class=\"rio-map-name\">236km</div></div><div class=\"rio-map-anchor-arrow\"></div><div class=\"rio-map-anchor cursor-pointer\"></div></div></div></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import SingleMapMarker from '@rio-cloud/rio-uikit/SingleMapMarker';\n\nexport default () => (\n    <div>\n        <div className='bg-light padding-top-25 map-details-view padding-bottom-25'>\n            <div className='margin-left-25 padding-left-25 margin-right-25 padding-right-25 display-flex-ls'>\n                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>\n                    <SingleMapMarker iconNames={['truck']} markerColor='bg-map-marker-asset' />\n                </div>\n                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>\n                    <SingleMapMarker iconNames={['factory']} markerColor='bg-map-marker-poi' />\n                </div>\n                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>\n                    <SingleMapMarker iconNames={['geofence']} markerColor='bg-map-marker-geofence' />\n                </div>\n                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>\n                    <SingleMapMarker iconNames={['road-restrictions']} markerColor='bg-map-marker-restrictions' />\n                </div>\n                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>\n                    <SingleMapMarker iconNames={['route']} name='236km' markerColor='bg-map-marker-route' />\n                </div>\n            </div>\n        </div>\n        <div className='bg-light map-details-view'>\n            <div className='margin-left-25 padding-left-25 margin-right-25 padding-right-25 display-flex-ls'>\n                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>\n                    <SingleMapMarker iconNames={['truck']} markerColor='bg-map-marker-asset' fixed />\n                </div>\n                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>\n                    <SingleMapMarker iconNames={['factory']} markerColor='bg-map-marker-poi' fixed />\n                </div>\n                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>\n                    <SingleMapMarker iconNames={['geofence']} markerColor='bg-map-marker-geofence' fixed />\n                </div>\n                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>\n                    <SingleMapMarker iconNames={['road-restrictions']} markerColor='bg-map-marker-restrictions' fixed />\n                </div>\n                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>\n                    <SingleMapMarker iconNames={['route']} markerColor='bg-map-marker-route' fixed />\n                </div>\n            </div>\n        </div>\n\n        <div className='bg-light padding-top-25 map-details-view padding-bottom-25'>\n            <div className='margin-left-25 padding-left-25 margin-right-25 padding-right-25 display-flex-ls'>\n                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>\n                    <SingleMapMarker iconNames={['truck']} markerColor='bg-map-marker-asset' name='Vehicle' />\n                </div>\n                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>\n                    <SingleMapMarker iconNames={['factory']} markerColor='bg-map-marker-poi' name='POI' />\n                </div>\n                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>\n                    <SingleMapMarker iconNames={['geofence']} markerColor='bg-map-marker-geofence' name='Geofence' />\n                </div>\n                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>\n                    <SingleMapMarker\n                        iconNames={['road-restrictions']}\n                        markerColor='bg-map-marker-restrictions'\n                        name='Max height 2.5m'\n                    />\n                </div>\n                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>\n                    <SingleMapMarker iconNames={['route']} name='236km' markerColor='bg-map-marker-route' />\n                </div>\n            </div>\n        </div>\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <div class=\"bg-light padding-top-25 map-details-view padding-bottom-25\">\n        <div class=\"margin-left-25 padding-left-25 margin-right-25 padding-right-25 display-flex-ls\">\n            <div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\">\n                <div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-asset\" style=\"color: var(--color-map-marker-asset);\">\n                    <div class=\"rio-map-marker-translate\">\n                        <div class=\"rio-map-single cursor-pointer\">\n                            <div class=\"rio-map-icon\">\n                                <span class=\"rioglyph rioglyph-truck\">\n                                </span>\n                            </div>\n                        </div>\n                        <div class=\"rio-map-anchor-arrow\">\n                        </div>\n                        <div class=\"rio-map-anchor cursor-pointer\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\">\n                <div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-poi\" style=\"color: var(--color-map-marker-poi);\">\n                    <div class=\"rio-map-marker-translate\">\n                        <div class=\"rio-map-single cursor-pointer\">\n                            <div class=\"rio-map-icon\">\n                                <span class=\"rioglyph rioglyph-factory\">\n                                </span>\n                            </div>\n                        </div>\n                        <div class=\"rio-map-anchor-arrow\">\n                        </div>\n                        <div class=\"rio-map-anchor cursor-pointer\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\">\n                <div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-geofence\" style=\"color: var(--color-map-marker-geofence);\">\n                    <div class=\"rio-map-marker-translate\">\n                        <div class=\"rio-map-single cursor-pointer\">\n                            <div class=\"rio-map-icon\">\n                                <span class=\"rioglyph rioglyph-geofence\">\n                                </span>\n                            </div>\n                        </div>\n                        <div class=\"rio-map-anchor-arrow\">\n                        </div>\n                        <div class=\"rio-map-anchor cursor-pointer\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\">\n                <div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-restrictions\" style=\"color: var(--color-map-marker-restrictions);\">\n                    <div class=\"rio-map-marker-translate\">\n                        <div class=\"rio-map-single cursor-pointer\">\n                            <div class=\"rio-map-icon\">\n                                <span class=\"rioglyph rioglyph-road-restrictions\">\n                                </span>\n                            </div>\n                        </div>\n                        <div class=\"rio-map-anchor-arrow\">\n                        </div>\n                        <div class=\"rio-map-anchor cursor-pointer\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\">\n                <div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-route\" style=\"color: var(--color-map-marker-route);\">\n                    <div class=\"rio-map-marker-translate\">\n                        <div class=\"rio-map-single cursor-pointer\">\n                            <div class=\"rio-map-icon\">\n                                <span class=\"rioglyph rioglyph-route\">\n                                </span>\n                            </div>\n                            <div class=\"rio-map-name\">236km</div>\n                        </div>\n                        <div class=\"rio-map-anchor-arrow\">\n                        </div>\n                        <div class=\"rio-map-anchor cursor-pointer\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"bg-light map-details-view\">\n        <div class=\"margin-left-25 padding-left-25 margin-right-25 padding-right-25 display-flex-ls\">\n            <div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\">\n                <div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-asset\" style=\"color: var(--color-map-marker-asset);\">\n                    <div class=\"rio-map-marker-translate\">\n                        <div class=\"rio-map-single fixed cursor-pointer\">\n                            <div class=\"rio-map-icon\">\n                                <span class=\"rioglyph rioglyph-truck\">\n                                </span>\n                            </div>\n                        </div>\n                        <div class=\"rio-map-anchor-arrow\">\n                        </div>\n                        <div class=\"rio-map-anchor cursor-pointer\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\">\n                <div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-poi\" style=\"color: var(--color-map-marker-poi);\">\n                    <div class=\"rio-map-marker-translate\">\n                        <div class=\"rio-map-single fixed cursor-pointer\">\n                            <div class=\"rio-map-icon\">\n                                <span class=\"rioglyph rioglyph-factory\">\n                                </span>\n                            </div>\n                        </div>\n                        <div class=\"rio-map-anchor-arrow\">\n                        </div>\n                        <div class=\"rio-map-anchor cursor-pointer\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\">\n                <div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-geofence\" style=\"color: var(--color-map-marker-geofence);\">\n                    <div class=\"rio-map-marker-translate\">\n                        <div class=\"rio-map-single fixed cursor-pointer\">\n                            <div class=\"rio-map-icon\">\n                                <span class=\"rioglyph rioglyph-geofence\">\n                                </span>\n                            </div>\n                        </div>\n                        <div class=\"rio-map-anchor-arrow\">\n                        </div>\n                        <div class=\"rio-map-anchor cursor-pointer\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\">\n                <div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-restrictions\" style=\"color: var(--color-map-marker-restrictions);\">\n                    <div class=\"rio-map-marker-translate\">\n                        <div class=\"rio-map-single fixed cursor-pointer\">\n                            <div class=\"rio-map-icon\">\n                                <span class=\"rioglyph rioglyph-road-restrictions\">\n                                </span>\n                            </div>\n                        </div>\n                        <div class=\"rio-map-anchor-arrow\">\n                        </div>\n                        <div class=\"rio-map-anchor cursor-pointer\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\">\n                <div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-route\" style=\"color: var(--color-map-marker-route);\">\n                    <div class=\"rio-map-marker-translate\">\n                        <div class=\"rio-map-single fixed cursor-pointer\">\n                            <div class=\"rio-map-icon\">\n                                <span class=\"rioglyph rioglyph-route\">\n                                </span>\n                            </div>\n                        </div>\n                        <div class=\"rio-map-anchor-arrow\">\n                        </div>\n                        <div class=\"rio-map-anchor cursor-pointer\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"bg-light padding-top-25 map-details-view padding-bottom-25\">\n        <div class=\"margin-left-25 padding-left-25 margin-right-25 padding-right-25 display-flex-ls\">\n            <div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\">\n                <div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-asset\" style=\"color: var(--color-map-marker-asset);\">\n                    <div class=\"rio-map-marker-translate\">\n                        <div class=\"rio-map-single cursor-pointer\">\n                            <div class=\"rio-map-icon\">\n                                <span class=\"rioglyph rioglyph-truck\">\n                                </span>\n                            </div>\n                            <div class=\"rio-map-name\">Vehicle</div>\n                        </div>\n                        <div class=\"rio-map-anchor-arrow\">\n                        </div>\n                        <div class=\"rio-map-anchor cursor-pointer\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\">\n                <div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-poi\" style=\"color: var(--color-map-marker-poi);\">\n                    <div class=\"rio-map-marker-translate\">\n                        <div class=\"rio-map-single cursor-pointer\">\n                            <div class=\"rio-map-icon\">\n                                <span class=\"rioglyph rioglyph-factory\">\n                                </span>\n                            </div>\n                            <div class=\"rio-map-name\">POI</div>\n                        </div>\n                        <div class=\"rio-map-anchor-arrow\">\n                        </div>\n                        <div class=\"rio-map-anchor cursor-pointer\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\">\n                <div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-geofence\" style=\"color: var(--color-map-marker-geofence);\">\n                    <div class=\"rio-map-marker-translate\">\n                        <div class=\"rio-map-single cursor-pointer\">\n                            <div class=\"rio-map-icon\">\n                                <span class=\"rioglyph rioglyph-geofence\">\n                                </span>\n                            </div>\n                            <div class=\"rio-map-name\">Geofence</div>\n                        </div>\n                        <div class=\"rio-map-anchor-arrow\">\n                        </div>\n                        <div class=\"rio-map-anchor cursor-pointer\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\">\n                <div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-restrictions\" style=\"color: var(--color-map-marker-restrictions);\">\n                    <div class=\"rio-map-marker-translate\">\n                        <div class=\"rio-map-single cursor-pointer\">\n                            <div class=\"rio-map-icon\">\n                                <span class=\"rioglyph rioglyph-road-restrictions\">\n                                </span>\n                            </div>\n                            <div class=\"rio-map-name\">Max height 2.5m</div>\n                        </div>\n                        <div class=\"rio-map-anchor-arrow\">\n                        </div>\n                        <div class=\"rio-map-anchor cursor-pointer\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\">\n                <div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-route\" style=\"color: var(--color-map-marker-route);\">\n                    <div class=\"rio-map-marker-translate\">\n                        <div class=\"rio-map-single cursor-pointer\">\n                            <div class=\"rio-map-icon\">\n                                <span class=\"rioglyph rioglyph-route\">\n                                </span>\n                            </div>\n                            <div class=\"rio-map-name\">236km</div>\n                        </div>\n                        <div class=\"rio-map-anchor-arrow\">\n                        </div>\n                        <div class=\"rio-map-anchor cursor-pointer\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "bearing",
+                      "type": "Number",
+                      "default": "0",
+                      "description": "Defines the rotation of the arrow in deg."
+                    },
+                    {
+                      "name": "name",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "Text for the Marker."
+                    },
+                    {
+                      "name": "warningCount",
+                      "type": "Number",
+                      "default": "0",
+                      "description": "Displayed in the orange badge if more than 0."
+                    },
+                    {
+                      "name": "exceptionCount",
+                      "type": "Number",
+                      "default": "0",
+                      "description": "Displayed in the red badge if more than 0."
+                    },
+                    {
+                      "name": "active",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines if marker is selected or not."
+                    },
+                    {
+                      "name": "clickable",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Defines if marker is clickable or not."
+                    },
+                    {
+                      "name": "fixed",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines if marker is fixed and has no centering point."
+                    },
+                    {
+                      "name": "moving",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the direction icon is displayed or not"
+                    },
+                    {
+                      "name": "pinging",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines if marker is rendered with a pinging animation."
+                    },
+                    {
+                      "name": "positionIconName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Optional icon name that is shown on the position circle of the DOM marker. Use this when no marker content is shown"
+                    },
+                    {
+                      "name": "iconNames",
+                      "type": "Array of Strings",
+                      "default": "",
+                      "description": "List of rioglyph icon names"
+                    },
+                    {
+                      "name": "markerColor",
+                      "type": "String",
+                      "default": "'bg-map-marker-asset'",
+                      "description": "Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence', 'bg-map-marker-route', 'bg-map-marker-info', 'bg-map-marker-succcess', 'bg-map-marker-warning' or 'bg-map-marker-danger'."
+                    },
+                    {
+                      "name": "size",
+                      "type": "String",
+                      "default": "'md'",
+                      "description": "Used to control the marker's size. Possible values are: md and lg."
+                    },
+                    {
+                      "name": "cursor",
+                      "type": "String",
+                      "default": "'cursor-pointer'",
+                      "description": "Possible values are: cursor-pointer, cursor-grab and cursor-not-allowed."
+                    },
+                    {
+                      "name": "visibleOnHover",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Whether the marker is only visible on hover."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "Example 5",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><div class=\"bg-light padding-top-25 map-details-view padding-bottom-25\"><div class=\"margin-left-25 padding-left-25 margin-right-25 padding-right-25 display-flex-ls\"><div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\"><div class=\"active rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-info\" style=\"color: var(--color-map-marker-info);\"><div class=\"rio-map-marker-translate\"><div class=\"rio-map-single active cursor-pointer\"><div class=\"rio-map-icon\"><span class=\"rioglyph rioglyph-truck\"></span></div></div><div class=\"rio-map-anchor-arrow\"></div><div class=\"rio-map-anchor cursor-pointer\"></div></div></div></div><div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\"><div class=\"active rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-success\" style=\"color: var(--color-map-marker-success);\"><div class=\"rio-map-marker-translate\"><div class=\"rio-map-single active cursor-pointer\"><div class=\"rio-map-icon\"><span class=\"rioglyph rioglyph-truck\"></span></div></div><div class=\"rio-map-anchor-arrow\"></div><div class=\"rio-map-anchor cursor-pointer\"></div></div></div></div><div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\"><div class=\"active rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-warning\" style=\"color: var(--color-map-marker-warning);\"><div class=\"rio-map-marker-translate\"><div class=\"rio-map-single active cursor-pointer\"><div class=\"rio-map-icon\"><span class=\"rioglyph rioglyph-truck\"></span></div></div><div class=\"rio-map-anchor-arrow\"></div><div class=\"rio-map-anchor cursor-pointer\"></div></div></div></div><div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\"><div class=\"active rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-danger\" style=\"color: var(--color-map-marker-danger);\"><div class=\"rio-map-marker-translate\"><div class=\"rio-map-single active cursor-pointer\"><div class=\"rio-map-icon\"><span class=\"rioglyph rioglyph-truck-breakdown\"></span></div></div><div class=\"rio-map-anchor-arrow\"></div><div class=\"rio-map-anchor cursor-pointer\"></div></div></div></div><div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\"><div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-warning\" style=\"color: var(--color-map-marker-warning);\"><div class=\"rio-map-marker-translate\"><div class=\"rio-map-single cursor-pointer\"><div class=\"rio-map-icon rio-map-marker-state \"><span class=\"rioglyph rioglyph-parking\"></span></div><div class=\"rio-map-icon\"><span class=\"rioglyph rioglyph-truck\"></span></div><div class=\"rio-map-name\">Vehicle</div></div><div class=\"rio-map-anchor-arrow\"></div><div class=\"rio-map-anchor cursor-pointer\"></div></div></div></div></div></div><div class=\"bg-light map-details-view\"><div class=\"margin-left-25 padding-left-25 margin-right-25 padding-right-25 display-flex-ls\"><div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\"><div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-info\" style=\"color: var(--color-map-marker-info);\"><div class=\"rio-map-marker-translate\"><div class=\"rio-map-single cursor-pointer\"><div class=\"rio-map-icon\"><span class=\"rioglyph rioglyph-truck\"></span></div></div><div class=\"rio-map-anchor-arrow\"></div><div class=\"rio-map-anchor cursor-pointer\"></div></div></div></div><div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\"><div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-success\" style=\"color: var(--color-map-marker-success);\"><div class=\"rio-map-marker-translate\"><div class=\"rio-map-single cursor-pointer\"><div class=\"rio-map-icon\"><span class=\"rioglyph rioglyph-truck\"></span></div></div><div class=\"rio-map-anchor-arrow\"></div><div class=\"rio-map-anchor cursor-pointer\"></div></div></div></div><div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\"><div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-warning\" style=\"color: var(--color-map-marker-warning);\"><div class=\"rio-map-marker-translate\"><div class=\"rio-map-single cursor-pointer\"><div class=\"rio-map-icon\"><span class=\"rioglyph rioglyph-truck\"></span></div></div><div class=\"rio-map-anchor-arrow\"></div><div class=\"rio-map-anchor cursor-pointer\"></div></div></div></div><div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\"><div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-danger\" style=\"color: var(--color-map-marker-danger);\"><div class=\"rio-map-marker-translate\"><div class=\"rio-map-single cursor-pointer\"><div class=\"rio-map-icon\"><span class=\"rioglyph rioglyph-truck-breakdown\"></span></div></div><div class=\"rio-map-anchor-arrow\"></div><div class=\"rio-map-anchor cursor-pointer\"></div></div></div></div><div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\"><div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-warning\" style=\"color: var(--color-map-marker-warning);\"><div class=\"rio-map-marker-translate\"><div class=\"rio-map-single cursor-pointer\"><div class=\"rio-map-icon rio-map-marker-state \"><span class=\"rioglyph rioglyph-antenna\"></span></div><div class=\"rio-map-icon\"><span class=\"rioglyph rioglyph-truck-breakdown\"></span></div><div class=\"rio-map-name\">Vehicle</div></div><div class=\"rio-map-anchor-arrow\"></div><div class=\"rio-map-anchor cursor-pointer\"></div></div></div></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import SingleMapMarker from '@rio-cloud/rio-uikit/SingleMapMarker';\n\nexport default () => (\n    <div>\n        <div className='bg-light padding-top-25 map-details-view padding-bottom-25'>\n            <div className='margin-left-25 padding-left-25 margin-right-25 padding-right-25 display-flex-ls'>\n                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>\n                    <SingleMapMarker iconNames={['truck']} markerColor='bg-map-marker-info' active />\n                </div>\n                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>\n                    <SingleMapMarker iconNames={['truck']} markerColor='bg-map-marker-success' active />\n                </div>\n                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>\n                    <SingleMapMarker iconNames={['truck']} markerColor='bg-map-marker-warning' active />\n                </div>\n                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>\n                    <SingleMapMarker iconNames={['truck-breakdown']} markerColor='bg-map-marker-danger' active />\n                </div>\n                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>\n                    <SingleMapMarker\n                        name='Vehicle'\n                        iconNames={['truck']}\n                        stateIconName='parking'\n                        markerColor='bg-map-marker-warning'\n                    />\n                </div>\n            </div>\n        </div>\n        <div className='bg-light map-details-view'>\n            <div className='margin-left-25 padding-left-25 margin-right-25 padding-right-25 display-flex-ls'>\n                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>\n                    <SingleMapMarker iconNames={['truck']} markerColor='bg-map-marker-info' />\n                </div>\n                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>\n                    <SingleMapMarker iconNames={['truck']} markerColor='bg-map-marker-success' />\n                </div>\n                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>\n                    <SingleMapMarker iconNames={['truck']} markerColor='bg-map-marker-warning' />\n                </div>\n                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>\n                    <SingleMapMarker iconNames={['truck-breakdown']} markerColor='bg-map-marker-danger' />\n                </div>\n                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>\n                    <SingleMapMarker\n                        name='Vehicle'\n                        iconNames={['truck-breakdown']}\n                        markerColor='bg-map-marker-warning'\n                        stateIconName='antenna'\n                    />\n                </div>\n            </div>\n        </div>\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <div class=\"bg-light padding-top-25 map-details-view padding-bottom-25\">\n        <div class=\"margin-left-25 padding-left-25 margin-right-25 padding-right-25 display-flex-ls\">\n            <div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\">\n                <div class=\"active rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-info\" style=\"color: var(--color-map-marker-info);\">\n                    <div class=\"rio-map-marker-translate\">\n                        <div class=\"rio-map-single active cursor-pointer\">\n                            <div class=\"rio-map-icon\">\n                                <span class=\"rioglyph rioglyph-truck\">\n                                </span>\n                            </div>\n                        </div>\n                        <div class=\"rio-map-anchor-arrow\">\n                        </div>\n                        <div class=\"rio-map-anchor cursor-pointer\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\">\n                <div class=\"active rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-success\" style=\"color: var(--color-map-marker-success);\">\n                    <div class=\"rio-map-marker-translate\">\n                        <div class=\"rio-map-single active cursor-pointer\">\n                            <div class=\"rio-map-icon\">\n                                <span class=\"rioglyph rioglyph-truck\">\n                                </span>\n                            </div>\n                        </div>\n                        <div class=\"rio-map-anchor-arrow\">\n                        </div>\n                        <div class=\"rio-map-anchor cursor-pointer\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\">\n                <div class=\"active rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-warning\" style=\"color: var(--color-map-marker-warning);\">\n                    <div class=\"rio-map-marker-translate\">\n                        <div class=\"rio-map-single active cursor-pointer\">\n                            <div class=\"rio-map-icon\">\n                                <span class=\"rioglyph rioglyph-truck\">\n                                </span>\n                            </div>\n                        </div>\n                        <div class=\"rio-map-anchor-arrow\">\n                        </div>\n                        <div class=\"rio-map-anchor cursor-pointer\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\">\n                <div class=\"active rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-danger\" style=\"color: var(--color-map-marker-danger);\">\n                    <div class=\"rio-map-marker-translate\">\n                        <div class=\"rio-map-single active cursor-pointer\">\n                            <div class=\"rio-map-icon\">\n                                <span class=\"rioglyph rioglyph-truck-breakdown\">\n                                </span>\n                            </div>\n                        </div>\n                        <div class=\"rio-map-anchor-arrow\">\n                        </div>\n                        <div class=\"rio-map-anchor cursor-pointer\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\">\n                <div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-warning\" style=\"color: var(--color-map-marker-warning);\">\n                    <div class=\"rio-map-marker-translate\">\n                        <div class=\"rio-map-single cursor-pointer\">\n                            <div class=\"rio-map-icon rio-map-marker-state \">\n                                <span class=\"rioglyph rioglyph-parking\">\n                                </span>\n                            </div>\n                            <div class=\"rio-map-icon\">\n                                <span class=\"rioglyph rioglyph-truck\">\n                                </span>\n                            </div>\n                            <div class=\"rio-map-name\">Vehicle</div>\n                        </div>\n                        <div class=\"rio-map-anchor-arrow\">\n                        </div>\n                        <div class=\"rio-map-anchor cursor-pointer\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"bg-light map-details-view\">\n        <div class=\"margin-left-25 padding-left-25 margin-right-25 padding-right-25 display-flex-ls\">\n            <div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\">\n                <div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-info\" style=\"color: var(--color-map-marker-info);\">\n                    <div class=\"rio-map-marker-translate\">\n                        <div class=\"rio-map-single cursor-pointer\">\n                            <div class=\"rio-map-icon\">\n                                <span class=\"rioglyph rioglyph-truck\">\n                                </span>\n                            </div>\n                        </div>\n                        <div class=\"rio-map-anchor-arrow\">\n                        </div>\n                        <div class=\"rio-map-anchor cursor-pointer\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\">\n                <div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-success\" style=\"color: var(--color-map-marker-success);\">\n                    <div class=\"rio-map-marker-translate\">\n                        <div class=\"rio-map-single cursor-pointer\">\n                            <div class=\"rio-map-icon\">\n                                <span class=\"rioglyph rioglyph-truck\">\n                                </span>\n                            </div>\n                        </div>\n                        <div class=\"rio-map-anchor-arrow\">\n                        </div>\n                        <div class=\"rio-map-anchor cursor-pointer\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\">\n                <div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-warning\" style=\"color: var(--color-map-marker-warning);\">\n                    <div class=\"rio-map-marker-translate\">\n                        <div class=\"rio-map-single cursor-pointer\">\n                            <div class=\"rio-map-icon\">\n                                <span class=\"rioglyph rioglyph-truck\">\n                                </span>\n                            </div>\n                        </div>\n                        <div class=\"rio-map-anchor-arrow\">\n                        </div>\n                        <div class=\"rio-map-anchor cursor-pointer\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\">\n                <div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-danger\" style=\"color: var(--color-map-marker-danger);\">\n                    <div class=\"rio-map-marker-translate\">\n                        <div class=\"rio-map-single cursor-pointer\">\n                            <div class=\"rio-map-icon\">\n                                <span class=\"rioglyph rioglyph-truck-breakdown\">\n                                </span>\n                            </div>\n                        </div>\n                        <div class=\"rio-map-anchor-arrow\">\n                        </div>\n                        <div class=\"rio-map-anchor cursor-pointer\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\">\n                <div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-warning\" style=\"color: var(--color-map-marker-warning);\">\n                    <div class=\"rio-map-marker-translate\">\n                        <div class=\"rio-map-single cursor-pointer\">\n                            <div class=\"rio-map-icon rio-map-marker-state \">\n                                <span class=\"rioglyph rioglyph-antenna\">\n                                </span>\n                            </div>\n                            <div class=\"rio-map-icon\">\n                                <span class=\"rioglyph rioglyph-truck-breakdown\">\n                                </span>\n                            </div>\n                            <div class=\"rio-map-name\">Vehicle</div>\n                        </div>\n                        <div class=\"rio-map-anchor-arrow\">\n                        </div>\n                        <div class=\"rio-map-anchor cursor-pointer\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "bearing",
+                      "type": "Number",
+                      "default": "0",
+                      "description": "Defines the rotation of the arrow in deg."
+                    },
+                    {
+                      "name": "name",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "Text for the Marker."
+                    },
+                    {
+                      "name": "warningCount",
+                      "type": "Number",
+                      "default": "0",
+                      "description": "Displayed in the orange badge if more than 0."
+                    },
+                    {
+                      "name": "exceptionCount",
+                      "type": "Number",
+                      "default": "0",
+                      "description": "Displayed in the red badge if more than 0."
+                    },
+                    {
+                      "name": "active",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines if marker is selected or not."
+                    },
+                    {
+                      "name": "clickable",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Defines if marker is clickable or not."
+                    },
+                    {
+                      "name": "fixed",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines if marker is fixed and has no centering point."
+                    },
+                    {
+                      "name": "moving",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the direction icon is displayed or not"
+                    },
+                    {
+                      "name": "pinging",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines if marker is rendered with a pinging animation."
+                    },
+                    {
+                      "name": "positionIconName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Optional icon name that is shown on the position circle of the DOM marker. Use this when no marker content is shown"
+                    },
+                    {
+                      "name": "iconNames",
+                      "type": "Array of Strings",
+                      "default": "",
+                      "description": "List of rioglyph icon names"
+                    },
+                    {
+                      "name": "markerColor",
+                      "type": "String",
+                      "default": "'bg-map-marker-asset'",
+                      "description": "Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence', 'bg-map-marker-route', 'bg-map-marker-info', 'bg-map-marker-succcess', 'bg-map-marker-warning' or 'bg-map-marker-danger'."
+                    },
+                    {
+                      "name": "size",
+                      "type": "String",
+                      "default": "'md'",
+                      "description": "Used to control the marker's size. Possible values are: md and lg."
+                    },
+                    {
+                      "name": "cursor",
+                      "type": "String",
+                      "default": "'cursor-pointer'",
+                      "description": "Possible values are: cursor-pointer, cursor-grab and cursor-not-allowed."
+                    },
+                    {
+                      "name": "visibleOnHover",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Whether the marker is only visible on hover."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "Example 6",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><div class=\"bg-light padding-top-25\"><div class=\"margin-left-25 padding-left-25 margin-right-25 padding-right-25 display-flex-ls\"><div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\"><div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-warning\" style=\"color: var(--color-map-marker-warning);\"><div class=\"rio-map-marker-translate\"><div class=\"rio-map-single pinging cursor-pointer\"><div class=\"rio-map-icon\"><span class=\"rioglyph rioglyph-truck\"></span></div><div class=\"rio-map-name\">Vehicle</div></div><div class=\"rio-map-anchor-arrow\"></div><div class=\"rio-map-anchor cursor-pointer\"></div></div></div></div><div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\"><div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-danger\" style=\"color: var(--color-map-marker-danger);\"><div class=\"rio-map-marker-translate\"><div class=\"rio-map-single moving pinging cursor-pointer\"><div class=\"rio-map-icon rio-map-marker-state rio-map-direction\"><span class=\"rioglyph rioglyph-direction\" style=\"transform: rotate(60deg);\"></span></div><div class=\"rio-map-icon\"><span class=\"rioglyph rioglyph-truck\"></span></div><div class=\"rio-map-name\">Vehicle</div></div><div class=\"rio-map-anchor-arrow\"></div><div class=\"rio-map-anchor cursor-pointer\"></div></div></div></div><div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\"><div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-danger\" style=\"color: var(--color-map-marker-danger);\"><div class=\"rio-map-marker-translate\"><div class=\"rio-map-single pinging cursor-pointer\"><div class=\"rio-map-icon\"><span class=\"rioglyph rioglyph-truck-breakdown\"></span></div></div><div class=\"rio-map-anchor-arrow\"></div><div class=\"rio-map-anchor cursor-pointer\"></div></div></div></div><div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\"><div class=\"active rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-danger\" style=\"color: var(--color-map-marker-danger);\"><div class=\"rio-map-marker-translate\"><div class=\"rio-map-single active pinging cursor-pointer\"><div class=\"rio-map-icon\"><span class=\"rioglyph rioglyph-truck-breakdown\"></span></div></div><div class=\"rio-map-anchor-arrow\"></div><div class=\"rio-map-anchor cursor-pointer\"></div></div></div></div></div></div><p class=\"margin-bottom-0\">The animation plays automatically when using the SingleMapMarker prop <code class=\"code\">pinging</code></p></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import SingleMapMarker from '@rio-cloud/rio-uikit/SingleMapMarker';\n\nexport default () => (\n    <div>\n        <div className='bg-light padding-top-25'>\n            <div className='margin-left-25 padding-left-25 margin-right-25 padding-right-25 display-flex-ls'>\n                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>\n                    <SingleMapMarker\n                        bearing={60}\n                        name='Vehicle'\n                        iconNames={['truck']}\n                        markerColor='bg-map-marker-warning'\n                        pinging\n                    />\n                </div>\n                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>\n                    <SingleMapMarker\n                        bearing={60}\n                        name='Vehicle'\n                        iconNames={['truck']}\n                        markerColor='bg-map-marker-danger'\n                        moving\n                        pinging\n                    />\n                </div>\n                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>\n                    <SingleMapMarker iconNames={['truck-breakdown']} markerColor='bg-map-marker-danger' pinging />\n                </div>\n                <div className='margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center'>\n                    <SingleMapMarker\n                        iconNames={['truck-breakdown']}\n                        markerColor='bg-map-marker-danger'\n                        active\n                        pinging\n                    />\n                </div>\n            </div>\n        </div>\n        <p className='margin-bottom-0'>\n            The animation plays automatically when using the SingleMapMarker prop <code className='code'>pinging</code>\n        </p>\n    </div>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <div class=\"bg-light padding-top-25\">\n        <div class=\"margin-left-25 padding-left-25 margin-right-25 padding-right-25 display-flex-ls\">\n            <div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\">\n                <div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-warning\" style=\"color: var(--color-map-marker-warning);\">\n                    <div class=\"rio-map-marker-translate\">\n                        <div class=\"rio-map-single pinging cursor-pointer\">\n                            <div class=\"rio-map-icon\">\n                                <span class=\"rioglyph rioglyph-truck\">\n                                </span>\n                            </div>\n                            <div class=\"rio-map-name\">Vehicle</div>\n                        </div>\n                        <div class=\"rio-map-anchor-arrow\">\n                        </div>\n                        <div class=\"rio-map-anchor cursor-pointer\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\">\n                <div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-danger\" style=\"color: var(--color-map-marker-danger);\">\n                    <div class=\"rio-map-marker-translate\">\n                        <div class=\"rio-map-single moving pinging cursor-pointer\">\n                            <div class=\"rio-map-icon rio-map-marker-state rio-map-direction\">\n                                <span class=\"rioglyph rioglyph-direction\" style=\"transform: rotate(60deg);\">\n                                </span>\n                            </div>\n                            <div class=\"rio-map-icon\">\n                                <span class=\"rioglyph rioglyph-truck\">\n                                </span>\n                            </div>\n                            <div class=\"rio-map-name\">Vehicle</div>\n                        </div>\n                        <div class=\"rio-map-anchor-arrow\">\n                        </div>\n                        <div class=\"rio-map-anchor cursor-pointer\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\">\n                <div class=\"rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-danger\" style=\"color: var(--color-map-marker-danger);\">\n                    <div class=\"rio-map-marker-translate\">\n                        <div class=\"rio-map-single pinging cursor-pointer\">\n                            <div class=\"rio-map-icon\">\n                                <span class=\"rioglyph rioglyph-truck-breakdown\">\n                                </span>\n                            </div>\n                        </div>\n                        <div class=\"rio-map-anchor-arrow\">\n                        </div>\n                        <div class=\"rio-map-anchor cursor-pointer\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"margin-top-25 padding-25 flex-1-0-ls display-flex justify-content-center\">\n                <div class=\"active rio-map-marker rio-map-marker-bottom-center\" data-marker-type=\"single-map-marker-danger\" style=\"color: var(--color-map-marker-danger);\">\n                    <div class=\"rio-map-marker-translate\">\n                        <div class=\"rio-map-single active pinging cursor-pointer\">\n                            <div class=\"rio-map-icon\">\n                                <span class=\"rioglyph rioglyph-truck-breakdown\">\n                                </span>\n                            </div>\n                        </div>\n                        <div class=\"rio-map-anchor-arrow\">\n                        </div>\n                        <div class=\"rio-map-anchor cursor-pointer\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n    <p class=\"margin-bottom-0\">The animation plays automatically when using the SingleMapMarker prop <code class=\"code\">pinging</code>\n    </p>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "bearing",
+                      "type": "Number",
+                      "default": "0",
+                      "description": "Defines the rotation of the arrow in deg."
+                    },
+                    {
+                      "name": "name",
+                      "type": "String / Node",
+                      "default": "",
+                      "description": "Text for the Marker."
+                    },
+                    {
+                      "name": "warningCount",
+                      "type": "Number",
+                      "default": "0",
+                      "description": "Displayed in the orange badge if more than 0."
+                    },
+                    {
+                      "name": "exceptionCount",
+                      "type": "Number",
+                      "default": "0",
+                      "description": "Displayed in the red badge if more than 0."
+                    },
+                    {
+                      "name": "active",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines if marker is selected or not."
+                    },
+                    {
+                      "name": "clickable",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Defines if marker is clickable or not."
+                    },
+                    {
+                      "name": "fixed",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines if marker is fixed and has no centering point."
+                    },
+                    {
+                      "name": "moving",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines whether the direction icon is displayed or not"
+                    },
+                    {
+                      "name": "pinging",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines if marker is rendered with a pinging animation."
+                    },
+                    {
+                      "name": "positionIconName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Optional icon name that is shown on the position circle of the DOM marker. Use this when no marker content is shown"
+                    },
+                    {
+                      "name": "iconNames",
+                      "type": "Array of Strings",
+                      "default": "",
+                      "description": "List of rioglyph icon names"
+                    },
+                    {
+                      "name": "markerColor",
+                      "type": "String",
+                      "default": "'bg-map-marker-asset'",
+                      "description": "Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence', 'bg-map-marker-route', 'bg-map-marker-info', 'bg-map-marker-succcess', 'bg-map-marker-warning' or 'bg-map-marker-danger'."
+                    },
+                    {
+                      "name": "size",
+                      "type": "String",
+                      "default": "'md'",
+                      "description": "Used to control the marker's size. Possible values are: md and lg."
+                    },
+                    {
+                      "name": "cursor",
+                      "type": "String",
+                      "default": "'cursor-pointer'",
+                      "description": "Possible values are: cursor-pointer, cursor-grab and cursor-not-allowed."
+                    },
+                    {
+                      "name": "visibleOnHover",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Whether the marker is only visible on hover."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "ClusterMapMarker",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 7",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div><div class=\"bg-light padding-top-15 padding-bottom-25\"><div class=\"margin-left-25 padding-left-25 margin-right-25 padding-right-25 display-flex-ls\"><div class=\"margin-top-25 margin-bottom-25 padding-25 flex-1-0-ls display-flex justify-content-center\"><div class=\"rio-map-marker rio-map-marker-center-center\" data-marker-type=\"cluster-map-marker-asset\" style=\"color: var(--color-map-marker-asset);\"><div class=\"rio-map-marker-translate\"><div class=\"rio-map-cluster\"><div class=\"rio-map-cluster-circle cursor-pointer\"><div class=\"rio-map-cluster-content\"><div class=\"rio-map-count\">100</div></div></div><div class=\"rio-map-bubble exception\">10</div><div class=\"rio-map-bubble warning\">25</div></div></div></div></div><div class=\"margin-top-25 margin-bottom-25 padding-25 flex-1-0-ls display-flex justify-content-center\"><div class=\"active rio-map-marker rio-map-marker-center-center\" data-marker-type=\"cluster-map-marker-asset\" style=\"color: var(--color-map-marker-asset);\"><div class=\"rio-map-marker-translate\"><div class=\"rio-map-cluster\"><div class=\"rio-map-cluster-circle active cursor-pointer\"><div class=\"rio-map-cluster-content\"><div class=\"rio-map-count\">100</div></div></div><div class=\"rio-map-bubble exception\">10</div><div class=\"rio-map-bubble warning\">25</div></div></div></div></div><div class=\"margin-top-25 margin-bottom-25 padding-25 flex-1-0-ls display-flex justify-content-center\"><div class=\"rio-map-marker rio-map-marker-center-center\" data-marker-type=\"cluster-map-marker-poi\" style=\"color: var(--color-map-marker-poi);\"><div class=\"rio-map-marker-translate\"><div class=\"rio-map-cluster\"><div class=\"rio-map-cluster-circle cursor-pointer\"><div class=\"rio-map-cluster-content\"><div class=\"rio-map-count\">100</div></div></div></div></div></div></div><div class=\"margin-top-25 margin-bottom-25 padding-25 flex-1-0-ls display-flex justify-content-center\"><div class=\"rio-map-marker rio-map-marker-center-center\" data-marker-type=\"cluster-map-marker-geofence\" style=\"color: var(--color-map-marker-geofence);\"><div class=\"rio-map-marker-translate\"><div class=\"rio-map-cluster\"><div class=\"rio-map-cluster-circle cursor-pointer\"><div class=\"rio-map-cluster-content\"><div class=\"rio-map-count\">100</div></div></div></div></div></div></div><div class=\"margin-top-25 margin-bottom-25 padding-25 flex-1-0-ls display-flex justify-content-center\"><div class=\"rio-map-marker rio-map-marker-center-center\" data-marker-type=\"cluster-map-marker-geofence\" style=\"color: var(--color-map-marker-geofence);\"><div class=\"rio-map-marker-translate\"><div class=\"rio-map-cluster\"><div class=\"rio-map-cluster-circle cursor-pointer\"><div class=\"rio-map-cluster-content\"><span class=\"rio-map-icon\"><span class=\"rioglyph rioglyph-geofence\"></span></span><div class=\"rio-map-count\">100</div></div></div></div></div></div></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import ClusterMapMarker from '@rio-cloud/rio-uikit/ClusterMapMarker';\n\nexport default () => {\n    const markerWrapperClasses =\n        'margin-top-25 margin-bottom-25 padding-25 flex-1-0-ls display-flex justify-content-center';\n    return (\n        <div>\n            <div className='bg-light padding-top-15 padding-bottom-25'>\n                <div className='margin-left-25 padding-left-25 margin-right-25 padding-right-25 display-flex-ls'>\n                    <div className={markerWrapperClasses}>\n                        <ClusterMapMarker count={100} warningCount={25} exceptionCount={10} />\n                    </div>\n                    <div className={markerWrapperClasses}>\n                        <ClusterMapMarker count={100} warningCount={25} exceptionCount={10} active />\n                    </div>\n                    <div className={markerWrapperClasses}>\n                        <ClusterMapMarker\n                            count={100}\n                            warningCount={0}\n                            exceptionCount={0}\n                            markerColor='bg-map-marker-poi'\n                        />\n                    </div>\n                    <div className={markerWrapperClasses}>\n                        <ClusterMapMarker\n                            count={100}\n                            warningCount={0}\n                            exceptionCount={0}\n                            markerColor='bg-map-marker-geofence'\n                        />\n                    </div>\n                    <div className={markerWrapperClasses}>\n                        <ClusterMapMarker\n                            count={100}\n                            warningCount={0}\n                            exceptionCount={0}\n                            iconName='geofence'\n                            markerColor='bg-map-marker-geofence'\n                        />\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div>\n    <div class=\"bg-light padding-top-15 padding-bottom-25\">\n        <div class=\"margin-left-25 padding-left-25 margin-right-25 padding-right-25 display-flex-ls\">\n            <div class=\"margin-top-25 margin-bottom-25 padding-25 flex-1-0-ls display-flex justify-content-center\">\n                <div class=\"rio-map-marker rio-map-marker-center-center\" data-marker-type=\"cluster-map-marker-asset\" style=\"color: var(--color-map-marker-asset);\">\n                    <div class=\"rio-map-marker-translate\">\n                        <div class=\"rio-map-cluster\">\n                            <div class=\"rio-map-cluster-circle cursor-pointer\">\n                                <div class=\"rio-map-cluster-content\">\n                                    <div class=\"rio-map-count\">100</div>\n                                </div>\n                            </div>\n                            <div class=\"rio-map-bubble exception\">10</div>\n                            <div class=\"rio-map-bubble warning\">25</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"margin-top-25 margin-bottom-25 padding-25 flex-1-0-ls display-flex justify-content-center\">\n                <div class=\"active rio-map-marker rio-map-marker-center-center\" data-marker-type=\"cluster-map-marker-asset\" style=\"color: var(--color-map-marker-asset);\">\n                    <div class=\"rio-map-marker-translate\">\n                        <div class=\"rio-map-cluster\">\n                            <div class=\"rio-map-cluster-circle active cursor-pointer\">\n                                <div class=\"rio-map-cluster-content\">\n                                    <div class=\"rio-map-count\">100</div>\n                                </div>\n                            </div>\n                            <div class=\"rio-map-bubble exception\">10</div>\n                            <div class=\"rio-map-bubble warning\">25</div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"margin-top-25 margin-bottom-25 padding-25 flex-1-0-ls display-flex justify-content-center\">\n                <div class=\"rio-map-marker rio-map-marker-center-center\" data-marker-type=\"cluster-map-marker-poi\" style=\"color: var(--color-map-marker-poi);\">\n                    <div class=\"rio-map-marker-translate\">\n                        <div class=\"rio-map-cluster\">\n                            <div class=\"rio-map-cluster-circle cursor-pointer\">\n                                <div class=\"rio-map-cluster-content\">\n                                    <div class=\"rio-map-count\">100</div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"margin-top-25 margin-bottom-25 padding-25 flex-1-0-ls display-flex justify-content-center\">\n                <div class=\"rio-map-marker rio-map-marker-center-center\" data-marker-type=\"cluster-map-marker-geofence\" style=\"color: var(--color-map-marker-geofence);\">\n                    <div class=\"rio-map-marker-translate\">\n                        <div class=\"rio-map-cluster\">\n                            <div class=\"rio-map-cluster-circle cursor-pointer\">\n                                <div class=\"rio-map-cluster-content\">\n                                    <div class=\"rio-map-count\">100</div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"margin-top-25 margin-bottom-25 padding-25 flex-1-0-ls display-flex justify-content-center\">\n                <div class=\"rio-map-marker rio-map-marker-center-center\" data-marker-type=\"cluster-map-marker-geofence\" style=\"color: var(--color-map-marker-geofence);\">\n                    <div class=\"rio-map-marker-translate\">\n                        <div class=\"rio-map-cluster\">\n                            <div class=\"rio-map-cluster-circle cursor-pointer\">\n                                <div class=\"rio-map-cluster-content\">\n                                    <span class=\"rio-map-icon\">\n                                        <span class=\"rioglyph rioglyph-geofence\">\n                                        </span>\n                                    </span>\n                                    <div class=\"rio-map-count\">100</div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "count",
+                      "type": "Number",
+                      "default": "",
+                      "description": "Number displayed in the center."
+                    },
+                    {
+                      "name": "warningCount",
+                      "type": "Number",
+                      "default": "0",
+                      "description": "Displayed in the orange badge if more than 0."
+                    },
+                    {
+                      "name": "exceptionCount",
+                      "type": "Number",
+                      "default": "0",
+                      "description": "Displayed in the red badge if more than 0."
+                    },
+                    {
+                      "name": "active",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Defines if marker is selected or not."
+                    },
+                    {
+                      "name": "clickable",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Defines if marker is clickable or not."
+                    },
+                    {
+                      "name": "markerColor",
+                      "type": "String",
+                      "default": "'bg-map-marker-asset'",
+                      "description": "Defines the color of the marker. Possible values are:'bg-map-marker-asset', 'bg-map-marker-poi', 'bg-map-marker-geofence' or 'bg-map-marker-route'."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}