@rio-cloud/uikit-mcp 1.0.0

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

@@ -0,0 +1,223 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:07:31.190Z",
+    "source": "https://uikit.developers.rio.cloud/#components/barList",
+    "category": "Components",
+    "section": "Progress",
+    "slug": "components/barlist",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "ec0ac017fe97713ff79b85d29f28c9a6eeb08f060c8e456ed7c45cf6add7d86d"
+  },
+  "title": "BarList",
+  "lead": null,
+  "content": [
+    {
+      "heading": "BarList",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"padding-20-md\"><div class=\"display-flex flex-wrap gap-50\"><div class=\"flex-1-1 border rounded padding-15 padding-bottom-20 bg-white\"><div class=\"text-size-16 text-medium margin-bottom-15\">BarList</div><div class=\"display-flex justify-content-between gap-15\"><div class=\"width-100pct space-y-5\"><div class=\"position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer\"><div class=\"display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light\" role=\"presentation\" style=\"height: 25px; opacity: 0.5; width: 3.7934%;\"></div><div class=\"position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10\"><a href=\"https://example.com/metrics/on-time-delivery\" class=\"text-color-darker\" target=\"_blank\" rel=\"noreferrer\">On-time delivery</a></div></div><div class=\"position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer\"><div class=\"display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light\" role=\"presentation\" style=\"height: 25px; opacity: 0.5; width: 0%;\"></div><div class=\"position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10\"><div class=\"text-color-darker\">Warehouse efficiency</div></div></div><div class=\"position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer\"><div class=\"display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light\" role=\"presentation\" style=\"height: 25px; opacity: 0.5; width: 0%;\"></div><div class=\"position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10\"><a href=\"https://example.com/metrics/truck-utilization\" class=\"text-color-darker\" target=\"_blank\" rel=\"noreferrer\">Truck utilization</a></div></div><div class=\"position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer\"><div class=\"display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light\" role=\"presentation\" style=\"height: 25px; opacity: 0.5; width: 0%;\"></div><div class=\"position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10\"><div class=\"text-color-darker\">Freight cost/km</div></div></div><div class=\"position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer\"><div class=\"display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light\" role=\"presentation\" style=\"height: 25px; opacity: 0.5; width: 0%;\"></div><div class=\"position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10\"><a href=\"https://example.com/metrics/fuel-consumption\" class=\"text-color-darker\" target=\"_blank\" rel=\"noreferrer\">Fuel consumption index</a></div></div></div><div class=\"space-y-5\"><div class=\"display-flex align-items-center justify-content-end\" style=\"height: 25px;\"><div class=\"text-color-darkest\">92%</div></div><div class=\"display-flex align-items-center justify-content-end\" style=\"height: 25px;\"><div class=\"text-color-darkest\">84%</div></div><div class=\"display-flex align-items-center justify-content-end\" style=\"height: 25px;\"><div class=\"text-color-darkest\">78%</div></div><div class=\"display-flex align-items-center justify-content-end\" style=\"height: 25px;\"><div class=\"text-color-darkest\">65%</div></div><div class=\"display-flex align-items-center justify-content-end\" style=\"height: 25px;\"><div class=\"text-color-darkest\">15%</div></div></div></div></div><div class=\"flex-1-1 border rounded padding-15 padding-bottom-20 bg-white\"><div class=\"text-size-16 text-medium margin-bottom-15\">BarList reversed</div><div class=\"display-flex justify-content-between gap-15 flex-row-reverse gap-10\"><div class=\"width-100pct space-y-5\"><div class=\"position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer\"><div class=\"display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light\" role=\"presentation\" style=\"height: 25px; opacity: 0.5; width: 3.7934%;\"></div><div class=\"position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10\"><a href=\"https://example.com/metrics/on-time-delivery\" class=\"text-color-darker\" target=\"_blank\" rel=\"noreferrer\">On-time delivery</a></div></div><div class=\"position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer\"><div class=\"display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light\" role=\"presentation\" style=\"height: 25px; opacity: 0.5; width: 0%;\"></div><div class=\"position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10\"><div class=\"text-color-darker\">Warehouse efficiency</div></div></div><div class=\"position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer\"><div class=\"display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light\" role=\"presentation\" style=\"height: 25px; opacity: 0.5; width: 0%;\"></div><div class=\"position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10\"><a href=\"https://example.com/metrics/truck-utilization\" class=\"text-color-darker\" target=\"_blank\" rel=\"noreferrer\">Truck utilization</a></div></div><div class=\"position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer\"><div class=\"display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light\" role=\"presentation\" style=\"height: 25px; opacity: 0.5; width: 0%;\"></div><div class=\"position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10\"><div class=\"text-color-darker\">Freight cost/km</div></div></div><div class=\"position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer\"><div class=\"display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light\" role=\"presentation\" style=\"height: 25px; opacity: 0.5; width: 0%;\"></div><div class=\"position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10\"><a href=\"https://example.com/metrics/fuel-consumption\" class=\"text-color-darker\" target=\"_blank\" rel=\"noreferrer\">Fuel consumption index</a></div></div></div><div class=\"space-y-5\"><div class=\"display-flex align-items-center justify-content-end\" style=\"height: 25px;\"><div class=\"text-color-darkest\"><span class=\"text-medium\">92%</span></div></div><div class=\"display-flex align-items-center justify-content-end\" style=\"height: 25px;\"><div class=\"text-color-darkest\"><span class=\"text-medium\">84%</span></div></div><div class=\"display-flex align-items-center justify-content-end\" style=\"height: 25px;\"><div class=\"text-color-darkest\"><span class=\"text-medium\">78%</span></div></div><div class=\"display-flex align-items-center justify-content-end\" style=\"height: 25px;\"><div class=\"text-color-darkest\"><span class=\"text-medium\">65%</span></div></div><div class=\"display-flex align-items-center justify-content-end\" style=\"height: 25px;\"><div class=\"text-color-darkest\"><span class=\"text-medium\">15%</span></div></div></div></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import BarList from '@rio-cloud/rio-uikit/BarList';\n\nexport default () => {\n    const handleSelect = (item: (typeof transportData)[number]) => {\n        console.log(`Clicked on: ${item.name}`);\n    };\n\n    return (\n        <div className='padding-20-md'>\n            <div className='display-flex flex-wrap gap-50'>\n                <div className='flex-1-1 border rounded padding-15 padding-bottom-20 bg-white'>\n                    <div className='text-size-16 text-medium margin-bottom-15'>BarList</div>\n                    <BarList\n                        data={transportData}\n                        valueFormatter={value => `${value}%`}\n                        onSelectRow={handleSelect}\n                        referenceValue={100}\n                        showAnimation\n                    />\n                </div>\n                <div className='flex-1-1 border rounded padding-15 padding-bottom-20 bg-white'>\n                    <div className='text-size-16 text-medium margin-bottom-15'>BarList reversed</div>\n                    <BarList\n                        data={transportData}\n                        valueFormatter={value => <span className='text-medium'>{value}%</span>}\n                        onSelectRow={handleSelect}\n                        referenceValue={100}\n                        showAnimation\n                        className='flex-row-reverse gap-10'\n                    />\n                </div>\n            </div>\n        </div>\n    );\n};\n\nconst transportData = [\n    {\n        key: 'truck_utilization',\n        name: 'Truck utilization',\n        value: 78,\n        href: 'https://example.com/metrics/truck-utilization',\n    },\n    {\n        key: 'on_time_delivery',\n        name: 'On-time delivery',\n        value: 92,\n        href: 'https://example.com/metrics/on-time-delivery',\n    },\n    {\n        key: 'freight_cost_per_km',\n        name: 'Freight cost/km',\n        value: 65,\n    },\n    {\n        key: 'warehouse_efficiency',\n        name: 'Warehouse efficiency',\n        value: 84,\n    },\n    {\n        key: 'fuel_consumption',\n        name: 'Fuel consumption index',\n        value: 15,\n        href: 'https://example.com/metrics/fuel-consumption',\n    },\n];"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"padding-20-md\">\n    <div class=\"display-flex flex-wrap gap-50\">\n        <div class=\"flex-1-1 border rounded padding-15 padding-bottom-20 bg-white\">\n            <div class=\"text-size-16 text-medium margin-bottom-15\">BarList</div>\n            <div class=\"display-flex justify-content-between gap-15\">\n                <div class=\"width-100pct space-y-5\">\n                    <div class=\"position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer\">\n                        <div class=\"display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light\" role=\"presentation\" style=\"height: 25px; opacity: 0.5; width: 58.4184%;\">\n                        </div>\n                        <div class=\"position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10\">\n                            <a href=\"https://example.com/metrics/on-time-delivery\" class=\"text-color-darker\" target=\"_blank\" rel=\"noreferrer\">On-time delivery</a>\n                        </div>\n                    </div>\n                    <div class=\"position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer\">\n                        <div class=\"display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light\" role=\"presentation\" style=\"height: 25px; opacity: 0.5; width: 36.75%;\">\n                        </div>\n                        <div class=\"position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10\">\n                            <div class=\"text-color-darker\">Warehouse efficiency</div>\n                        </div>\n                    </div>\n                    <div class=\"position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer\">\n                        <div class=\"display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light\" role=\"presentation\" style=\"height: 25px; opacity: 0.5; width: 18.2812%;\">\n                        </div>\n                        <div class=\"position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10\">\n                            <a href=\"https://example.com/metrics/truck-utilization\" class=\"text-color-darker\" target=\"_blank\" rel=\"noreferrer\">Truck utilization</a>\n                        </div>\n                    </div>\n                    <div class=\"position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer\">\n                        <div class=\"display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light\" role=\"presentation\" style=\"height: 25px; opacity: 0.5; width: 0%;\">\n                        </div>\n                        <div class=\"position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10\">\n                            <div class=\"text-color-darker\">Freight cost/km</div>\n                        </div>\n                    </div>\n                    <div class=\"position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer\">\n                        <div class=\"display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light\" role=\"presentation\" style=\"height: 25px; opacity: 0.5; width: 0%;\">\n                        </div>\n                        <div class=\"position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10\">\n                            <a href=\"https://example.com/metrics/fuel-consumption\" class=\"text-color-darker\" target=\"_blank\" rel=\"noreferrer\">Fuel consumption index</a>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"space-y-5\">\n                    <div class=\"display-flex align-items-center justify-content-end\" style=\"height: 25px;\">\n                        <div class=\"text-color-darkest\">92%</div>\n                    </div>\n                    <div class=\"display-flex align-items-center justify-content-end\" style=\"height: 25px;\">\n                        <div class=\"text-color-darkest\">84%</div>\n                    </div>\n                    <div class=\"display-flex align-items-center justify-content-end\" style=\"height: 25px;\">\n                        <div class=\"text-color-darkest\">78%</div>\n                    </div>\n                    <div class=\"display-flex align-items-center justify-content-end\" style=\"height: 25px;\">\n                        <div class=\"text-color-darkest\">65%</div>\n                    </div>\n                    <div class=\"display-flex align-items-center justify-content-end\" style=\"height: 25px;\">\n                        <div class=\"text-color-darkest\">15%</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"flex-1-1 border rounded padding-15 padding-bottom-20 bg-white\">\n            <div class=\"text-size-16 text-medium margin-bottom-15\">BarList reversed</div>\n            <div class=\"display-flex justify-content-between gap-15 flex-row-reverse gap-10\">\n                <div class=\"width-100pct space-y-5\">\n                    <div class=\"position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer\">\n                        <div class=\"display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light\" role=\"presentation\" style=\"height: 25px; opacity: 0.5; width: 58.4184%;\">\n                        </div>\n                        <div class=\"position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10\">\n                            <a href=\"https://example.com/metrics/on-time-delivery\" class=\"text-color-darker\" target=\"_blank\" rel=\"noreferrer\">On-time delivery</a>\n                        </div>\n                    </div>\n                    <div class=\"position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer\">\n                        <div class=\"display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light\" role=\"presentation\" style=\"height: 25px; opacity: 0.5; width: 36.75%;\">\n                        </div>\n                        <div class=\"position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10\">\n                            <div class=\"text-color-darker\">Warehouse efficiency</div>\n                        </div>\n                    </div>\n                    <div class=\"position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer\">\n                        <div class=\"display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light\" role=\"presentation\" style=\"height: 25px; opacity: 0.5; width: 18.2812%;\">\n                        </div>\n                        <div class=\"position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10\">\n                            <a href=\"https://example.com/metrics/truck-utilization\" class=\"text-color-darker\" target=\"_blank\" rel=\"noreferrer\">Truck utilization</a>\n                        </div>\n                    </div>\n                    <div class=\"position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer\">\n                        <div class=\"display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light\" role=\"presentation\" style=\"height: 25px; opacity: 0.5; width: 0%;\">\n                        </div>\n                        <div class=\"position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10\">\n                            <div class=\"text-color-darker\">Freight cost/km</div>\n                        </div>\n                    </div>\n                    <div class=\"position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-transparent cursor-pointer\">\n                        <div class=\"display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-highlight-light\" role=\"presentation\" style=\"height: 25px; opacity: 0.5; width: 0%;\">\n                        </div>\n                        <div class=\"position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10\">\n                            <a href=\"https://example.com/metrics/fuel-consumption\" class=\"text-color-darker\" target=\"_blank\" rel=\"noreferrer\">Fuel consumption index</a>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"space-y-5\">\n                    <div class=\"display-flex align-items-center justify-content-end\" style=\"height: 25px;\">\n                        <div class=\"text-color-darkest\">\n                            <span class=\"text-medium\">92%</span>\n                        </div>\n                    </div>\n                    <div class=\"display-flex align-items-center justify-content-end\" style=\"height: 25px;\">\n                        <div class=\"text-color-darkest\">\n                            <span class=\"text-medium\">84%</span>\n                        </div>\n                    </div>\n                    <div class=\"display-flex align-items-center justify-content-end\" style=\"height: 25px;\">\n                        <div class=\"text-color-darkest\">\n                            <span class=\"text-medium\">78%</span>\n                        </div>\n                    </div>\n                    <div class=\"display-flex align-items-center justify-content-end\" style=\"height: 25px;\">\n                        <div class=\"text-color-darkest\">\n                            <span class=\"text-medium\">65%</span>\n                        </div>\n                    </div>\n                    <div class=\"display-flex align-items-center justify-content-end\" style=\"height: 25px;\">\n                        <div class=\"text-color-darkest\">\n                            <span class=\"text-medium\">15%</span>\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": "data",
+                      "type": "BarListRow<T>[]",
+                      "default": "",
+                      "description": "Array of bar row data to be rendered."
+                    },
+                    {
+                      "name": "valueFormatter",
+                      "type": "(value: number) => string | React.ReactElement",
+                      "default": "",
+                      "description": "Optional function to format the numeric value displayed on the right side of each bar."
+                    },
+                    {
+                      "name": "referenceValue",
+                      "type": "number",
+                      "default": "max(data.value)",
+                      "description": "A reference value used to calculate relative widths. If not provided, the maximum value in the data array will be used."
+                    },
+                    {
+                      "name": "showAnimation",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Whether to animate the bar width transitions using Framer Motion."
+                    },
+                    {
+                      "name": "onSelectRow",
+                      "type": "(payload: BarListRow<T>) => void",
+                      "default": "",
+                      "description": "Callback fired when a bar is clicked. Receives the full data object of the selected bar."
+                    },
+                    {
+                      "name": "sortOrder",
+                      "type": "'asc' | 'desc' | 'none'",
+                      "default": "'none'",
+                      "description": "The sort order for the bars."
+                    },
+                    {
+                      "name": "rowHeight",
+                      "type": "number",
+                      "default": "32",
+                      "description": "Height of each bar row in pixels."
+                    },
+                    {
+                      "name": "opacity",
+                      "type": "number",
+                      "default": "0.5",
+                      "description": "Opacity applied to non-hovered bars. Value should be between 0 and 1."
+                    },
+                    {
+                      "name": "barColor",
+                      "type": "string",
+                      "default": "'bg-highlight-light'",
+                      "description": "CSS class or color string used for the active/progress portion of each bar."
+                    },
+                    {
+                      "name": "labelColor",
+                      "type": "string",
+                      "default": "'text-color-darker'",
+                      "description": "CSS class or color string used for the text labels."
+                    },
+                    {
+                      "name": "background",
+                      "type": "string",
+                      "default": "'bg-transparent'",
+                      "description": "CSS class or color string used for the bar background."
+                    },
+                    {
+                      "name": "className",
+                      "type": "string",
+                      "default": "",
+                      "description": "Additional classes for the wrapper element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "caption": "95",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"padding-20-md max-width-500\"><div color=\"text-color-darker\" class=\"display-flex justify-content-between gap-15\"><div class=\"width-100pct space-y-5\"><div class=\"position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-lightest cursor-pointer\"><div class=\"display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-warmup-salmon\" role=\"presentation\" style=\"height: 25px; opacity: 0.5; width: 0.08247%;\"></div><div class=\"position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10\"><div class=\"text-color-danger\">Damaged packages</div></div></div><div class=\"position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-lightest cursor-pointer\"><div class=\"display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-warmup-corn\" role=\"presentation\" style=\"height: 25px; opacity: 0.5; width: 0%;\"></div><div class=\"position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10\"><div class=\"text-color-darker\">Returned packages</div></div></div><div class=\"position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-lightest cursor-pointer\"><div class=\"display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-coldplay-moos\" role=\"presentation\" style=\"height: 25px; opacity: 0.5; width: 0%;\"></div><div class=\"position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10\"><div class=\"text-color-darker\">In transit</div></div></div><div class=\"position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-lightest cursor-pointer\"><div class=\"display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-coldplay-moos\" role=\"presentation\" style=\"height: 25px; opacity: 0.5; width: 0%;\"></div><div class=\"position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10\"><div class=\"text-color-darker\">Stored in warehouse</div></div></div><div class=\"position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-lightest cursor-pointer\"><div class=\"display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-coldplay-moos\" role=\"presentation\" style=\"height: 25px; opacity: 0.5; width: 0%;\"></div><div class=\"position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10\"><div class=\"text-color-darker\">Shipped packages</div></div></div></div><div class=\"space-y-5\"><div class=\"display-flex align-items-center justify-content-end\" style=\"height: 25px;\"><div class=\"text-color-darkest\"><span class=\"text-color-dark\">95</span></div></div><div class=\"display-flex align-items-center justify-content-end\" style=\"height: 25px;\"><div class=\"text-color-darkest\"><span class=\"text-color-dark\">320</span></div></div><div class=\"display-flex align-items-center justify-content-end\" style=\"height: 25px;\"><div class=\"text-color-darkest\"><span class=\"text-color-dark\">1200</span></div></div><div class=\"display-flex align-items-center justify-content-end\" style=\"height: 25px;\"><div class=\"text-color-darkest\"><span class=\"text-color-dark\">4200</span></div></div><div class=\"display-flex align-items-center justify-content-end\" style=\"height: 25px;\"><div class=\"text-color-darkest\"><span class=\"text-color-dark\">8500</span></div></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import BarList from '@rio-cloud/rio-uikit/BarList';\n\nexport default () => {\n    const handleSelect = (item: (typeof transportData)[number]) => {\n        console.log(`Clicked on: ${item.name}`);\n    };\n\n    return (\n        <div className='padding-20-md max-width-500'>\n            <BarList\n                data={transportData}\n                valueFormatter={value => <span className='text-color-dark'>{value}</span>}\n                onSelectRow={handleSelect}\n                showAnimation\n                background='bg-lightest'\n                color='text-color-darker'\n                barColor='bg-coldplay-moos'\n                sortOrder='asc'\n            />\n        </div>\n    );\n};\n\nconst transportData = [\n    {\n        key: 'shipped',\n        name: 'Shipped packages',\n        value: 8500,\n    },\n    {\n        key: 'returned',\n        name: 'Returned packages',\n        value: 320,\n        barColor: 'bg-warmup-corn',\n    },\n    {\n        key: 'inTransit',\n        name: 'In transit',\n        value: 1200,\n    },\n    {\n        key: 'stored',\n        name: 'Stored in warehouse',\n        value: 4200,\n    },\n    {\n        key: 'damaged',\n        name: 'Damaged packages',\n        value: 95,\n        color: 'text-color-danger',\n        barColor: 'bg-warmup-salmon',\n    },\n];"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"padding-20-md max-width-500\">\n    <div color=\"text-color-darker\" class=\"display-flex justify-content-between gap-15\">\n        <div class=\"width-100pct space-y-5\">\n            <div class=\"position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-lightest cursor-pointer\">\n                <div class=\"display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-warmup-salmon\" role=\"presentation\" style=\"height: 25px; opacity: 0.5; width: 2%;\">\n                </div>\n                <div class=\"position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10\">\n                    <div class=\"text-color-danger\">Damaged packages</div>\n                </div>\n            </div>\n            <div class=\"position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-lightest cursor-pointer\">\n                <div class=\"display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-warmup-corn\" role=\"presentation\" style=\"height: 25px; opacity: 0.5; width: 3.76471%;\">\n                </div>\n                <div class=\"position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10\">\n                    <div class=\"text-color-darker\">Returned packages</div>\n                </div>\n            </div>\n            <div class=\"position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-lightest cursor-pointer\">\n                <div class=\"display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-coldplay-moos\" role=\"presentation\" style=\"height: 25px; opacity: 0.5; width: 14.1115%;\">\n                </div>\n                <div class=\"position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10\">\n                    <div class=\"text-color-darker\">In transit</div>\n                </div>\n            </div>\n            <div class=\"position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-lightest cursor-pointer\">\n                <div class=\"display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-coldplay-moos\" role=\"presentation\" style=\"height: 25px; opacity: 0.5; width: 48.0378%;\">\n                </div>\n                <div class=\"position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10\">\n                    <div class=\"text-color-darker\">Stored in warehouse</div>\n                </div>\n            </div>\n            <div class=\"position-relative width-100pct rounded-small transition-all transition-ease-in-out transition-duration-01 bg-lightest cursor-pointer\">\n                <div class=\"display-flex align-items-center rounded-small transition-all transition-ease-in-out transition-duration-01 bg-coldplay-moos\" role=\"presentation\" style=\"height: 25px; opacity: 0.5; width: 92.6627%;\">\n                </div>\n                <div class=\"position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10\">\n                    <div class=\"text-color-darker\">Shipped packages</div>\n                </div>\n            </div>\n        </div>\n        <div class=\"space-y-5\">\n            <div class=\"display-flex align-items-center justify-content-end\" style=\"height: 25px;\">\n                <div class=\"text-color-darkest\">\n                    <span class=\"text-color-dark\">95</span>\n                </div>\n            </div>\n            <div class=\"display-flex align-items-center justify-content-end\" style=\"height: 25px;\">\n                <div class=\"text-color-darkest\">\n                    <span class=\"text-color-dark\">320</span>\n                </div>\n            </div>\n            <div class=\"display-flex align-items-center justify-content-end\" style=\"height: 25px;\">\n                <div class=\"text-color-darkest\">\n                    <span class=\"text-color-dark\">1200</span>\n                </div>\n            </div>\n            <div class=\"display-flex align-items-center justify-content-end\" style=\"height: 25px;\">\n                <div class=\"text-color-darkest\">\n                    <span class=\"text-color-dark\">4200</span>\n                </div>\n            </div>\n            <div class=\"display-flex align-items-center justify-content-end\" style=\"height: 25px;\">\n                <div class=\"text-color-darkest\">\n                    <span class=\"text-color-dark\">8500</span>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": null,
+                  "rows": [
+                    {
+                      "name": "data",
+                      "type": "BarListRow<T>[]",
+                      "default": "",
+                      "description": "Array of bar row data to be rendered."
+                    },
+                    {
+                      "name": "valueFormatter",
+                      "type": "(value: number) => string | React.ReactElement",
+                      "default": "",
+                      "description": "Optional function to format the numeric value displayed on the right side of each bar."
+                    },
+                    {
+                      "name": "referenceValue",
+                      "type": "number",
+                      "default": "max(data.value)",
+                      "description": "A reference value used to calculate relative widths. If not provided, the maximum value in the data array will be used."
+                    },
+                    {
+                      "name": "showAnimation",
+                      "type": "boolean",
+                      "default": "false",
+                      "description": "Whether to animate the bar width transitions using Framer Motion."
+                    },
+                    {
+                      "name": "onSelectRow",
+                      "type": "(payload: BarListRow<T>) => void",
+                      "default": "",
+                      "description": "Callback fired when a bar is clicked. Receives the full data object of the selected bar."
+                    },
+                    {
+                      "name": "sortOrder",
+                      "type": "'asc' | 'desc' | 'none'",
+                      "default": "'none'",
+                      "description": "The sort order for the bars."
+                    },
+                    {
+                      "name": "rowHeight",
+                      "type": "number",
+                      "default": "32",
+                      "description": "Height of each bar row in pixels."
+                    },
+                    {
+                      "name": "opacity",
+                      "type": "number",
+                      "default": "0.5",
+                      "description": "Opacity applied to non-hovered bars. Value should be between 0 and 1."
+                    },
+                    {
+                      "name": "barColor",
+                      "type": "string",
+                      "default": "'bg-highlight-light'",
+                      "description": "CSS class or color string used for the active/progress portion of each bar."
+                    },
+                    {
+                      "name": "labelColor",
+                      "type": "string",
+                      "default": "'text-color-darker'",
+                      "description": "CSS class or color string used for the text labels."
+                    },
+                    {
+                      "name": "background",
+                      "type": "string",
+                      "default": "'bg-transparent'",
+                      "description": "CSS class or color string used for the bar background."
+                    },
+                    {
+                      "name": "className",
+                      "type": "string",
+                      "default": "",
+                      "description": "Additional classes for the wrapper element."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}

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

@@ -0,0 +1,68 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:11.272Z",
+    "source": "https://uikit.developers.rio.cloud/#components/basicMap",
+    "category": "Components",
+    "section": "Map",
+    "slug": "components/basicmap",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "fc42b8ceeda968f32a26a3033984b944e60dad939b986db786f8626161b94868"
+  },
+  "title": "Map",
+  "lead": "The following map shows labels for locale de",
+  "content": [
+    {
+      "heading": "Map",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"height-300\"><div class=\"Map position-relative map-type-default height-100pct\"><div style=\"position: relative; width: 100%; height: 100%; overflow: hidden; -webkit-tap-highlight-color: transparent;\"><div style=\"z-index: 0; width: 100%; height: 100%; direction: ltr; position: absolute; touch-action: none;\"><canvas width=\"908\" height=\"300\" data-engine=\"three.js r152\" style=\"position: absolute; left: 0px; top: 0px; width: 908px; height: 300px;\"></canvas><canvas width=\"908\" height=\"300\" style=\"position: absolute; left: 0px; top: 0px; width: 908px; height: 300px; display: none;\"></canvas><div style=\"position: absolute; height: 100%; width: 100%; z-index: 1;\"><div style=\"position: absolute; pointer-events: none; width: 908px; height: 300px; z-index: 1;\"></div></div></div><div class=\"H_imprint\" style=\"position: absolute; bottom: 0px; right: 0px; left: 0px; z-index: 1; direction: ltr; pointer-events: none; user-select: none; font: 11px &quot;Lucida Grande&quot;, Arial, Helvetica, sans-serif;\"><div class=\"H_logo\" style=\"margin: 0px 0px 16px 16px; display: inline-block;\"><svg height=\"40\" viewBox=\"0 0 47 40\" width=\"47\" xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" fill-rule=\"evenodd\"><path d=\"m45.2054149 8.82876345.6003191.40637037-.2240425.6914074-.4490426 1.38570368c-.1024468.3148889-.6998936 1.9596297-2.43 3.5918519l-.017234.0163704c-.188617.1887407-.3801064.3659259-.5467021.5084444l-.4605319.4285185-.486383.4516296-.1407447-.0702963c-.7257447.4583704-1.4926596.7886667-2.2796809.9831852l.5840426.5864445-.6769149.6817778-2.052766 2.0636296-.169468.1704444-.019149.0192593-2.3821276 2.3958518c-.4902128.8493334-1.1202128 1.6331852-1.8497873 2.3111112-.6031915.6047407-1.2504255 1.1054814-1.935 1.4954814l-.4777659.4805186-4.3247873 4.3506666-.0296808.0298519-.0315958.0269629-2.1532978 1.8171111-.2661702.2253334h-.3485107-3.8948936l-3.968617 3.9914815-1.3547873 1.3616296-.6769148.6808148-.6769149-.6808148-1.3538298-1.3616296-4.80925535-4.837926-3.2687234-3.2875555-1.63436171-1.6437778h2.3112766 4.62255319 2.67223407l-4.71063832-4.7368148-.6769149-.6808148.6769149-.6808148 4.93851062-4.9650371.6769149-.6798518.6769149.6808148 2.7296809 2.7454074c.9363829-.8820741 2.1485106-1.4685185 3.4037234-1.6562963.278617-1.4694815 1.0187234-2.834963 2.168617-3.9885926.5696808-.572 1.1843617-1.0438519 1.8335106-1.4107407l.2901064-.2917778 4.3094681-4.31985187c.5830851-1.0582963 1.4256383-1.78918519 2.0364893-2.12718519l.4471277-.24748148c.3829787-.7617037.9047872-1.47622222 1.5539362-2.12622222 1.510851-1.51666667 3.3165957-2.31881482 5.22-2.31881482.0871276 0 .1752127.00192593.2594681.00577778 1.9484042.06933334 3.8441489.97933334 5.4775532 2.62792593.1512765.15022222.3303191.34859259.5361702.5797037l.0526595.05874074c.1120213.12518519.2345745.26192593.370532.40733334l1.2657446 1.36066666.6328724.67985185-.6548936.65866667-.2508511.25325926zm-27.9288192 22.17414815h-9.57446804l4.78723404 4.8148148zm23.1864894-21.70422223c-.9220213 1.38666663-2.5180851 3.63037033-4.1984042 1.94133333l4.2510638-4.27651851c-.3810638-.41022222-.6711702-.754-.8923404-.97740741-2.2921277-2.31207407-4.8743617-2.34192593-6.8984043-.312-1.3528723 1.35681481-1.7071277 2.91007407-1.313617 4.38533332l-1.332766-1.52629628c-.385851.21474074-2.0182979 1.65918518-.7937234 3.84703708l-1.5252127-1.274963-2.0240426 2.0299259 2.7344681 2.7502222c-2.1121277-1.6861481-4.3889362-1.5205185-6.2157447.312-1.9560638 1.9615556-1.8181915 4.3381482-.3532979 6.293926l-.295851-.2946667c-1.9321277-1.9432593-4.0318085-1.2576296-5.0706383-.2128148-.8023405.8079259-1.2944681 1.9191852-1.0924468 2.6905185l-4.195532-4.2187407-2.22893613 2.2408148 8.25893613 8.3065185h4.4339362l-2.9767021-2.9938519c-.5893908-.6029568-.9604155-1.0987731-1.1531529-1.5232627-.3182349-.7008886-.1504161-1.2073234.3230465-1.680515.7334043-.7318519 1.583617-.2763704 3.0829787 1.2277777l2.9412766 2.9562963 2.2164894-2.2292592-2.7909575-2.8060741c2.0125532 1.5291852 4.4224468 1.612 6.5728724-.545037 1.3567021-1.2653334 1.7425532-2.4565185 1.7425532-2.4565185l-1.6755319-1.1314815c-.9229788 1.3866666-2.5152128 3.6361481-4.195532 1.9461481l4.2606383-4.2851852 2.655 2.6712593 2.3160639-2.3294074-3.3223405-3.3424445c-1.5520212-1.5609629-.6328723-3.0275555.0124469-3.5793333.3025531.6442222.7448936 1.2624445 1.3078723 1.8296296 2.1485106 2.1676297 4.9260638 2.6038519 7.3685106.1550371 1.3567022-1.2643704 1.7425532-2.4565185 1.7425532-2.4565185zm-3.6564894-1.35537321-2.0211702 2.03377777c-.9890425-1.18251851-.9392553-1.81422222-.3245744-2.43051851.7439361-.7462963 1.4993617-.43044445 2.3457446.39674074zm-12.4879787 12.56088884c-.9890425-1.1825185-.9411702-1.819037-.3284042-2.4353333.7448936-.7462963 1.5003191-.4304444 2.3467021.3967408z\" fill=\"#0f1621\" fill-opacity=\".7\" style=\"fill: rgb(255, 255, 255); fill-opacity: 0.6;\"></path><path d=\"m17.2765957 31.0029116-4.787234 4.8148148-4.78723404-4.8148148zm23.1864894-21.70422223 1.6755319 1.13148153s-.385851 1.1921481-1.7425532 2.4565185c-2.4424468 2.4488148-5.22 2.0125926-7.3685106-.1550371-.5629787-.5671851-1.0053192-1.1854074-1.3078723-1.8296296-.6453192.5517778-1.5644681 2.0183704-.0124469 3.5793333l3.3223405 3.3424445-2.3160639 2.3294074-2.655-2.6712593-4.2606383 4.2851852c1.6803192 1.69 3.2725532-.5594815 4.195532-1.9461481l1.6755319 1.1314815s-.3858511 1.1911851-1.7425532 2.4565185c-2.1504256 2.157037-4.5603192 2.0742222-6.5728724.545037l2.7909575 2.8060741-2.2164894 2.2292592-2.9412766-2.9562963c-1.4993617-1.5041481-2.3495744-1.9596296-3.0829787-1.2277777-.4734626.4731916-.6412814.9796264-.3230465 1.680515.1927374.4244896.5637621.9203059 1.1531529 1.5232627l2.9767021 2.9938519h-4.4339362l-8.25893613-8.3065185 2.22893613-2.2408148 4.195532 4.2187407c-.2020213-.7713333.2901063-1.8825926 1.0924468-2.6905185 1.0388298-1.0448148 3.1385106-1.7304445 5.0706383.2128148l.295851.2946667c-1.4648936-1.9557778-1.6027659-4.3323704.3532979-6.293926 1.8268085-1.8325185 4.103617-1.9981481 6.2157447-.312l-2.7344681-2.7502222 2.0240426-2.0299259 1.5252127 1.274963c-1.2245745-2.1878519.4078724-3.63229634.7937234-3.84703708l1.332766 1.52629628c-.3935107-1.47525925-.0392553-3.02851851 1.313617-4.38533332 2.0240426-2.02992593 4.6062766-2.00007407 6.8984043.312.2211702.22340741.5112766.56718519.8923404.97740741l-4.2510638 4.27651851c1.6803191 1.689037 3.2763829-.5546667 4.1984042-1.94133333zm-16.1444681 11.20551563 2.0182979-2.0385925c-.846383-.8271852-1.6018085-1.1430371-2.3467021-.3967408-.612766.6162963-.6606383 1.2528148.3284042 2.4353333zm12.4879787-12.56088884c-.8463829-.82718519-1.6018085-1.14303704-2.3457446-.39674074-.6146809.61629629-.6644681 1.248.3245744 2.43051851z\" fill=\"#fff\" fill-opacity=\".3\" style=\"fill: rgb(15, 22, 33); fill-opacity: 0.3;\"></path></g></svg></div><div class=\"H_copyright\" style=\"right: 0px; bottom: 0px; position: absolute; background-color: rgba(255, 255, 255, 0.8); color: rgb(15, 22, 33); padding: 2px 16px;\"><a target=\"_blank\" tabindex=\"1\" href=\"https://legal.here.com/us-en/terms/here-end-user-terms\" style=\"color: inherit; margin: 0px 8px; text-decoration: none; pointer-events: all;\">Terms of use</a><span style=\"margin: 0px 8px;\">© 1987–2025 HERE</span><span style=\"margin: 0px;\"></span></div></div><div class=\"H_ui\" dir=\"ltr\"><div class=\"H_l_top H_l_left\"><div class=\"H_l_anchor H_l_horizontal\"></div><div class=\"H_l_anchor H_l_vertical\"></div></div><div class=\"H_l_top H_l_right\"><div class=\"H_l_anchor H_l_horizontal\"></div><div class=\"H_l_anchor H_l_vertical\"></div></div><div class=\"H_l_bottom H_l_left\"><div class=\"H_l_anchor H_l_vertical\"></div><div class=\"H_l_anchor H_l_horizontal\"><div class=\"H_ctl H_el H_scalebar\" title=\"Change to miles\" aria-label=\"Change to miles\" tabindex=\"0\" style=\"direction: ltr; display: none;\"><svg height=\"12\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"98\"><polyline style=\"fill:none; stroke:white; stroke-width:4\" points=\"2 2 2 10 96 10 96 2\"></polyline><polyline style=\"fill:none; stroke:black; stroke-width:2\" points=\"2 2 2 10 96 10 96 2\"></polyline></svg><div style=\"padding: 0 0 0 10px\">10 km</div></div></div></div><div class=\"H_l_bottom H_l_right\"><div class=\"H_l_anchor H_l_vertical\"></div><div class=\"H_l_anchor H_l_horizontal\"><div class=\"H_ctl H_el\" tabindex=\"-1\" style=\"display: none;\"><div class=\"H_btn H_el\" title=\"Choose view\" aria-label=\"Choose view\" tabindex=\"0\"><svg xmlns=\"http://www.w3.org/2000/svg\" class=\"H_icon\" viewBox=\"0 0 24 24\"><path fill-rule=\"evenodd\" d=\"M6.7,14.6 L4.5,16 L12,20.6 L19.5,16 L17.3,14.6 L19.1,13.5 L23,16 L12,23 L1,16 L4.9,13.5 L6.7,14.6 Z M12,2 L23,9 L12,16 L1,9 L12,2 Z\"></path></svg></div><div class=\"H_overlay H_el\" tabindex=\"-1\"><div class=\"H_rdo H_el\" tabindex=\"-1\"><div class=\"H_rdo_title H_el\" tabindex=\"-1\">Choose view</div><div class=\"H_rdo_buttons H_el\" tabindex=\"-1\"><div class=\"H_btn H_el H_active\" tabindex=\"-1\">Map view</div><div class=\"H_btn H_el\" tabindex=\"-1\">Satellite</div></div></div><div class=\"H_separator H_el\" tabindex=\"-1\"></div><div class=\"H_grp H_el\" tabindex=\"-1\"><div class=\"H_btn H_el\" tabindex=\"-1\">Traffic conditions</div><div class=\"H_btn H_el\" tabindex=\"-1\">Show traffic incidents</div></div></div></div></div></div><div class=\"H_l_anchor H_l_top H_l_center H_l_horizontal\" style=\"margin-left: 0px;\"></div><div class=\"H_l_anchor H_l_left H_l_middle H_l_vertical\" style=\"margin-top: 0px;\"></div><div class=\"H_l_anchor H_l_right H_l_middle H_l_vertical\" style=\"margin-top: 0px;\"></div><div class=\"H_l_anchor H_l_bottom H_l_center H_l_horizontal\" style=\"margin-left: 0px;\"></div></div></div><div class=\"ZoomButtons\"><div class=\"MapSettingsTile\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" class=\"display-block hover-scale-110\"><path fill=\"#A7AFBB\" d=\"M9.5 1v5.5H15v3H9.5V15h-3V9.5H1v-3h5.5V1z\"></path></svg></div><div class=\"MapSettingsTileSpacer\"></div><div class=\"MapSettingsTile\"><svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" class=\"display-block hover-scale-110\"><path fill=\"#A7AFBB\" d=\"M7.177 9.5H1v-3h14v3H8.823z\"></path></svg></div></div></div></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import Map from '@rio-cloud/rio-uikit/Map';\n\nimport { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';\n\nconst position = { lat: 48.1351, lng: 11.582 };\n\nconst MapExample = () => {\n    return (\n        <div className='height-300'>\n            <Map\n                credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}\n                center={position}\n                zoom={10}\n                hideMapSettings\n            />\n        </div>\n    );\n};\n\nexport default MapExample;"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "Map with ScaleBar",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 2",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"height-300\"><div class=\"Map position-relative map-type-default height-100pct\"><div style=\"position: relative; width: 100%; height: 100%; overflow: hidden; -webkit-tap-highlight-color: transparent;\"><div style=\"z-index: 0; width: 100%; height: 100%; direction: ltr; position: absolute; touch-action: none;\"><canvas width=\"908\" height=\"300\" data-engine=\"three.js r152\" style=\"position: absolute; left: 0px; top: 0px; width: 908px; height: 300px;\"></canvas><canvas width=\"908\" height=\"300\" style=\"position: absolute; left: 0px; top: 0px; width: 908px; height: 300px; display: none;\"></canvas><div style=\"position: absolute; height: 100%; width: 100%; z-index: 1;\"><div style=\"position: absolute; pointer-events: none; width: 908px; height: 300px; z-index: 1;\"></div></div></div><div class=\"H_imprint\" style=\"position: absolute; bottom: 0px; right: 0px; left: 0px; z-index: 1; direction: ltr; pointer-events: none; user-select: none; font: 11px &quot;Lucida Grande&quot;, Arial, Helvetica, sans-serif;\"><div class=\"H_logo\" style=\"margin: 0px 0px 16px 16px; display: inline-block;\"><svg height=\"40\" viewBox=\"0 0 47 40\" width=\"47\" xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" fill-rule=\"evenodd\"><path d=\"m45.2054149 8.82876345.6003191.40637037-.2240425.6914074-.4490426 1.38570368c-.1024468.3148889-.6998936 1.9596297-2.43 3.5918519l-.017234.0163704c-.188617.1887407-.3801064.3659259-.5467021.5084444l-.4605319.4285185-.486383.4516296-.1407447-.0702963c-.7257447.4583704-1.4926596.7886667-2.2796809.9831852l.5840426.5864445-.6769149.6817778-2.052766 2.0636296-.169468.1704444-.019149.0192593-2.3821276 2.3958518c-.4902128.8493334-1.1202128 1.6331852-1.8497873 2.3111112-.6031915.6047407-1.2504255 1.1054814-1.935 1.4954814l-.4777659.4805186-4.3247873 4.3506666-.0296808.0298519-.0315958.0269629-2.1532978 1.8171111-.2661702.2253334h-.3485107-3.8948936l-3.968617 3.9914815-1.3547873 1.3616296-.6769148.6808148-.6769149-.6808148-1.3538298-1.3616296-4.80925535-4.837926-3.2687234-3.2875555-1.63436171-1.6437778h2.3112766 4.62255319 2.67223407l-4.71063832-4.7368148-.6769149-.6808148.6769149-.6808148 4.93851062-4.9650371.6769149-.6798518.6769149.6808148 2.7296809 2.7454074c.9363829-.8820741 2.1485106-1.4685185 3.4037234-1.6562963.278617-1.4694815 1.0187234-2.834963 2.168617-3.9885926.5696808-.572 1.1843617-1.0438519 1.8335106-1.4107407l.2901064-.2917778 4.3094681-4.31985187c.5830851-1.0582963 1.4256383-1.78918519 2.0364893-2.12718519l.4471277-.24748148c.3829787-.7617037.9047872-1.47622222 1.5539362-2.12622222 1.510851-1.51666667 3.3165957-2.31881482 5.22-2.31881482.0871276 0 .1752127.00192593.2594681.00577778 1.9484042.06933334 3.8441489.97933334 5.4775532 2.62792593.1512765.15022222.3303191.34859259.5361702.5797037l.0526595.05874074c.1120213.12518519.2345745.26192593.370532.40733334l1.2657446 1.36066666.6328724.67985185-.6548936.65866667-.2508511.25325926zm-27.9288192 22.17414815h-9.57446804l4.78723404 4.8148148zm23.1864894-21.70422223c-.9220213 1.38666663-2.5180851 3.63037033-4.1984042 1.94133333l4.2510638-4.27651851c-.3810638-.41022222-.6711702-.754-.8923404-.97740741-2.2921277-2.31207407-4.8743617-2.34192593-6.8984043-.312-1.3528723 1.35681481-1.7071277 2.91007407-1.313617 4.38533332l-1.332766-1.52629628c-.385851.21474074-2.0182979 1.65918518-.7937234 3.84703708l-1.5252127-1.274963-2.0240426 2.0299259 2.7344681 2.7502222c-2.1121277-1.6861481-4.3889362-1.5205185-6.2157447.312-1.9560638 1.9615556-1.8181915 4.3381482-.3532979 6.293926l-.295851-.2946667c-1.9321277-1.9432593-4.0318085-1.2576296-5.0706383-.2128148-.8023405.8079259-1.2944681 1.9191852-1.0924468 2.6905185l-4.195532-4.2187407-2.22893613 2.2408148 8.25893613 8.3065185h4.4339362l-2.9767021-2.9938519c-.5893908-.6029568-.9604155-1.0987731-1.1531529-1.5232627-.3182349-.7008886-.1504161-1.2073234.3230465-1.680515.7334043-.7318519 1.583617-.2763704 3.0829787 1.2277777l2.9412766 2.9562963 2.2164894-2.2292592-2.7909575-2.8060741c2.0125532 1.5291852 4.4224468 1.612 6.5728724-.545037 1.3567021-1.2653334 1.7425532-2.4565185 1.7425532-2.4565185l-1.6755319-1.1314815c-.9229788 1.3866666-2.5152128 3.6361481-4.195532 1.9461481l4.2606383-4.2851852 2.655 2.6712593 2.3160639-2.3294074-3.3223405-3.3424445c-1.5520212-1.5609629-.6328723-3.0275555.0124469-3.5793333.3025531.6442222.7448936 1.2624445 1.3078723 1.8296296 2.1485106 2.1676297 4.9260638 2.6038519 7.3685106.1550371 1.3567022-1.2643704 1.7425532-2.4565185 1.7425532-2.4565185zm-3.6564894-1.35537321-2.0211702 2.03377777c-.9890425-1.18251851-.9392553-1.81422222-.3245744-2.43051851.7439361-.7462963 1.4993617-.43044445 2.3457446.39674074zm-12.4879787 12.56088884c-.9890425-1.1825185-.9411702-1.819037-.3284042-2.4353333.7448936-.7462963 1.5003191-.4304444 2.3467021.3967408z\" fill=\"#0f1621\" fill-opacity=\".7\" style=\"fill: rgb(255, 255, 255); fill-opacity: 0.6;\"></path><path d=\"m17.2765957 31.0029116-4.787234 4.8148148-4.78723404-4.8148148zm23.1864894-21.70422223 1.6755319 1.13148153s-.385851 1.1921481-1.7425532 2.4565185c-2.4424468 2.4488148-5.22 2.0125926-7.3685106-.1550371-.5629787-.5671851-1.0053192-1.1854074-1.3078723-1.8296296-.6453192.5517778-1.5644681 2.0183704-.0124469 3.5793333l3.3223405 3.3424445-2.3160639 2.3294074-2.655-2.6712593-4.2606383 4.2851852c1.6803192 1.69 3.2725532-.5594815 4.195532-1.9461481l1.6755319 1.1314815s-.3858511 1.1911851-1.7425532 2.4565185c-2.1504256 2.157037-4.5603192 2.0742222-6.5728724.545037l2.7909575 2.8060741-2.2164894 2.2292592-2.9412766-2.9562963c-1.4993617-1.5041481-2.3495744-1.9596296-3.0829787-1.2277777-.4734626.4731916-.6412814.9796264-.3230465 1.680515.1927374.4244896.5637621.9203059 1.1531529 1.5232627l2.9767021 2.9938519h-4.4339362l-8.25893613-8.3065185 2.22893613-2.2408148 4.195532 4.2187407c-.2020213-.7713333.2901063-1.8825926 1.0924468-2.6905185 1.0388298-1.0448148 3.1385106-1.7304445 5.0706383.2128148l.295851.2946667c-1.4648936-1.9557778-1.6027659-4.3323704.3532979-6.293926 1.8268085-1.8325185 4.103617-1.9981481 6.2157447-.312l-2.7344681-2.7502222 2.0240426-2.0299259 1.5252127 1.274963c-1.2245745-2.1878519.4078724-3.63229634.7937234-3.84703708l1.332766 1.52629628c-.3935107-1.47525925-.0392553-3.02851851 1.313617-4.38533332 2.0240426-2.02992593 4.6062766-2.00007407 6.8984043.312.2211702.22340741.5112766.56718519.8923404.97740741l-4.2510638 4.27651851c1.6803191 1.689037 3.2763829-.5546667 4.1984042-1.94133333zm-16.1444681 11.20551563 2.0182979-2.0385925c-.846383-.8271852-1.6018085-1.1430371-2.3467021-.3967408-.612766.6162963-.6606383 1.2528148.3284042 2.4353333zm12.4879787-12.56088884c-.8463829-.82718519-1.6018085-1.14303704-2.3457446-.39674074-.6146809.61629629-.6644681 1.248.3245744 2.43051851z\" fill=\"#fff\" fill-opacity=\".3\" style=\"fill: rgb(15, 22, 33); fill-opacity: 0.3;\"></path></g></svg></div><div class=\"H_copyright\" style=\"right: 0px; bottom: 0px; position: absolute; background-color: rgba(255, 255, 255, 0.8); color: rgb(15, 22, 33); padding: 2px 16px;\"><a target=\"_blank\" tabindex=\"1\" href=\"https://legal.here.com/us-en/terms/here-end-user-terms\" style=\"color: inherit; margin: 0px 8px; text-decoration: none; pointer-events: all;\">Terms of use</a><span style=\"margin: 0px 8px;\">© 1987–2025 HERE</span><span style=\"margin: 0px;\"></span></div></div><div class=\"H_ui\" dir=\"ltr\"><div class=\"H_l_top H_l_left\"><div class=\"H_l_anchor H_l_horizontal\"></div><div class=\"H_l_anchor H_l_vertical\"></div></div><div class=\"H_l_top H_l_right\"><div class=\"H_l_anchor H_l_horizontal\"></div><div class=\"H_l_anchor H_l_vertical\"></div></div><div class=\"H_l_bottom H_l_left\"><div class=\"H_l_anchor H_l_vertical\"></div><div class=\"H_l_anchor H_l_horizontal\"><div class=\"H_ctl H_el H_scalebar\" title=\"Change to miles\" aria-label=\"Change to miles\" tabindex=\"0\" style=\"direction: ltr;\"><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></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import Map from '@rio-cloud/rio-uikit/Map';\nimport { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';\n\nconst position = { lat: 48.1351, lng: 11.582 };\n\nconst MapWithScaleBarExample = () => {\n    return (\n        <div className='height-300'>\n            <Map\n                credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}\n                center={position}\n                zoom={10}\n                hideMapSettings\n                showScaleBar\n            />\n        </div>\n    );\n};\n\nexport default MapWithScaleBarExample;"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "Map localization",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 3",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><div class=\"height-300\"><div class=\"Map position-relative map-type-default height-100pct\"><div style=\"position: relative; width: 100%; height: 100%; overflow: hidden; -webkit-tap-highlight-color: transparent;\"><div style=\"z-index: 0; width: 100%; height: 100%; direction: ltr; position: absolute; touch-action: none;\"><canvas width=\"908\" height=\"300\" data-engine=\"three.js r152\" style=\"position: absolute; left: 0px; top: 0px; width: 908px; height: 300px;\"></canvas><canvas width=\"908\" height=\"300\" style=\"position: absolute; left: 0px; top: 0px; width: 908px; height: 300px; display: none;\"></canvas><div style=\"position: absolute; height: 100%; width: 100%; z-index: 1;\"><div style=\"position: absolute; pointer-events: none; width: 908px; height: 300px; z-index: 1;\"></div></div></div><div class=\"H_imprint\" style=\"position: absolute; bottom: 0px; right: 0px; left: 0px; z-index: 1; direction: ltr; pointer-events: none; user-select: none; font: 11px &quot;Lucida Grande&quot;, Arial, Helvetica, sans-serif;\"><div class=\"H_logo\" style=\"margin: 0px 0px 16px 16px; display: inline-block;\"><svg height=\"40\" viewBox=\"0 0 47 40\" width=\"47\" xmlns=\"http://www.w3.org/2000/svg\"><g fill=\"none\" fill-rule=\"evenodd\"><path d=\"m45.2054149 8.82876345.6003191.40637037-.2240425.6914074-.4490426 1.38570368c-.1024468.3148889-.6998936 1.9596297-2.43 3.5918519l-.017234.0163704c-.188617.1887407-.3801064.3659259-.5467021.5084444l-.4605319.4285185-.486383.4516296-.1407447-.0702963c-.7257447.4583704-1.4926596.7886667-2.2796809.9831852l.5840426.5864445-.6769149.6817778-2.052766 2.0636296-.169468.1704444-.019149.0192593-2.3821276 2.3958518c-.4902128.8493334-1.1202128 1.6331852-1.8497873 2.3111112-.6031915.6047407-1.2504255 1.1054814-1.935 1.4954814l-.4777659.4805186-4.3247873 4.3506666-.0296808.0298519-.0315958.0269629-2.1532978 1.8171111-.2661702.2253334h-.3485107-3.8948936l-3.968617 3.9914815-1.3547873 1.3616296-.6769148.6808148-.6769149-.6808148-1.3538298-1.3616296-4.80925535-4.837926-3.2687234-3.2875555-1.63436171-1.6437778h2.3112766 4.62255319 2.67223407l-4.71063832-4.7368148-.6769149-.6808148.6769149-.6808148 4.93851062-4.9650371.6769149-.6798518.6769149.6808148 2.7296809 2.7454074c.9363829-.8820741 2.1485106-1.4685185 3.4037234-1.6562963.278617-1.4694815 1.0187234-2.834963 2.168617-3.9885926.5696808-.572 1.1843617-1.0438519 1.8335106-1.4107407l.2901064-.2917778 4.3094681-4.31985187c.5830851-1.0582963 1.4256383-1.78918519 2.0364893-2.12718519l.4471277-.24748148c.3829787-.7617037.9047872-1.47622222 1.5539362-2.12622222 1.510851-1.51666667 3.3165957-2.31881482 5.22-2.31881482.0871276 0 .1752127.00192593.2594681.00577778 1.9484042.06933334 3.8441489.97933334 5.4775532 2.62792593.1512765.15022222.3303191.34859259.5361702.5797037l.0526595.05874074c.1120213.12518519.2345745.26192593.370532.40733334l1.2657446 1.36066666.6328724.67985185-.6548936.65866667-.2508511.25325926zm-27.9288192 22.17414815h-9.57446804l4.78723404 4.8148148zm23.1864894-21.70422223c-.9220213 1.38666663-2.5180851 3.63037033-4.1984042 1.94133333l4.2510638-4.27651851c-.3810638-.41022222-.6711702-.754-.8923404-.97740741-2.2921277-2.31207407-4.8743617-2.34192593-6.8984043-.312-1.3528723 1.35681481-1.7071277 2.91007407-1.313617 4.38533332l-1.332766-1.52629628c-.385851.21474074-2.0182979 1.65918518-.7937234 3.84703708l-1.5252127-1.274963-2.0240426 2.0299259 2.7344681 2.7502222c-2.1121277-1.6861481-4.3889362-1.5205185-6.2157447.312-1.9560638 1.9615556-1.8181915 4.3381482-.3532979 6.293926l-.295851-.2946667c-1.9321277-1.9432593-4.0318085-1.2576296-5.0706383-.2128148-.8023405.8079259-1.2944681 1.9191852-1.0924468 2.6905185l-4.195532-4.2187407-2.22893613 2.2408148 8.25893613 8.3065185h4.4339362l-2.9767021-2.9938519c-.5893908-.6029568-.9604155-1.0987731-1.1531529-1.5232627-.3182349-.7008886-.1504161-1.2073234.3230465-1.680515.7334043-.7318519 1.583617-.2763704 3.0829787 1.2277777l2.9412766 2.9562963 2.2164894-2.2292592-2.7909575-2.8060741c2.0125532 1.5291852 4.4224468 1.612 6.5728724-.545037 1.3567021-1.2653334 1.7425532-2.4565185 1.7425532-2.4565185l-1.6755319-1.1314815c-.9229788 1.3866666-2.5152128 3.6361481-4.195532 1.9461481l4.2606383-4.2851852 2.655 2.6712593 2.3160639-2.3294074-3.3223405-3.3424445c-1.5520212-1.5609629-.6328723-3.0275555.0124469-3.5793333.3025531.6442222.7448936 1.2624445 1.3078723 1.8296296 2.1485106 2.1676297 4.9260638 2.6038519 7.3685106.1550371 1.3567022-1.2643704 1.7425532-2.4565185 1.7425532-2.4565185zm-3.6564894-1.35537321-2.0211702 2.03377777c-.9890425-1.18251851-.9392553-1.81422222-.3245744-2.43051851.7439361-.7462963 1.4993617-.43044445 2.3457446.39674074zm-12.4879787 12.56088884c-.9890425-1.1825185-.9411702-1.819037-.3284042-2.4353333.7448936-.7462963 1.5003191-.4304444 2.3467021.3967408z\" fill=\"#0f1621\" fill-opacity=\".7\" style=\"fill: rgb(255, 255, 255); fill-opacity: 0.6;\"></path><path d=\"m17.2765957 31.0029116-4.787234 4.8148148-4.78723404-4.8148148zm23.1864894-21.70422223 1.6755319 1.13148153s-.385851 1.1921481-1.7425532 2.4565185c-2.4424468 2.4488148-5.22 2.0125926-7.3685106-.1550371-.5629787-.5671851-1.0053192-1.1854074-1.3078723-1.8296296-.6453192.5517778-1.5644681 2.0183704-.0124469 3.5793333l3.3223405 3.3424445-2.3160639 2.3294074-2.655-2.6712593-4.2606383 4.2851852c1.6803192 1.69 3.2725532-.5594815 4.195532-1.9461481l1.6755319 1.1314815s-.3858511 1.1911851-1.7425532 2.4565185c-2.1504256 2.157037-4.5603192 2.0742222-6.5728724.545037l2.7909575 2.8060741-2.2164894 2.2292592-2.9412766-2.9562963c-1.4993617-1.5041481-2.3495744-1.9596296-3.0829787-1.2277777-.4734626.4731916-.6412814.9796264-.3230465 1.680515.1927374.4244896.5637621.9203059 1.1531529 1.5232627l2.9767021 2.9938519h-4.4339362l-8.25893613-8.3065185 2.22893613-2.2408148 4.195532 4.2187407c-.2020213-.7713333.2901063-1.8825926 1.0924468-2.6905185 1.0388298-1.0448148 3.1385106-1.7304445 5.0706383.2128148l.295851.2946667c-1.4648936-1.9557778-1.6027659-4.3323704.3532979-6.293926 1.8268085-1.8325185 4.103617-1.9981481 6.2157447-.312l-2.7344681-2.7502222 2.0240426-2.0299259 1.5252127 1.274963c-1.2245745-2.1878519.4078724-3.63229634.7937234-3.84703708l1.332766 1.52629628c-.3935107-1.47525925-.0392553-3.02851851 1.313617-4.38533332 2.0240426-2.02992593 4.6062766-2.00007407 6.8984043.312.2211702.22340741.5112766.56718519.8923404.97740741l-4.2510638 4.27651851c1.6803191 1.689037 3.2763829-.5546667 4.1984042-1.94133333zm-16.1444681 11.20551563 2.0182979-2.0385925c-.846383-.8271852-1.6018085-1.1430371-2.3467021-.3967408-.612766.6162963-.6606383 1.2528148.3284042 2.4353333zm12.4879787-12.56088884c-.8463829-.82718519-1.6018085-1.14303704-2.3457446-.39674074-.6146809.61629629-.6644681 1.248.3245744 2.43051851z\" fill=\"#fff\" fill-opacity=\".3\" style=\"fill: rgb(15, 22, 33); fill-opacity: 0.3;\"></path></g></svg></div><div class=\"H_copyright\" style=\"right: 0px; bottom: 0px; position: absolute; background-color: rgba(255, 255, 255, 0.8); color: rgb(15, 22, 33); padding: 2px 16px;\"><a target=\"_blank\" tabindex=\"1\" href=\"https://legal.here.com/us-en/terms/here-end-user-terms\" style=\"color: inherit; margin: 0px 8px; text-decoration: none; pointer-events: all;\">Terms of use</a><span style=\"margin: 0px 8px;\">© 1987–2025 HERE</span><span style=\"margin: 0px;\"></span></div></div><div class=\"H_ui\" dir=\"ltr\"><div class=\"H_l_top H_l_left\"><div class=\"H_l_anchor H_l_horizontal\"></div><div class=\"H_l_anchor H_l_vertical\"></div></div><div class=\"H_l_top H_l_right\"><div class=\"H_l_anchor H_l_horizontal\"></div><div class=\"H_l_anchor H_l_vertical\"></div></div><div class=\"H_l_bottom H_l_left\"><div class=\"H_l_anchor H_l_vertical\"></div><div class=\"H_l_anchor H_l_horizontal\"><div class=\"H_ctl H_el H_scalebar\" title=\"Umrechnung in Meilen\" aria-label=\"Umrechnung in Meilen\" 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=\"Ansicht auswählen\" aria-label=\"Ansicht auswählen\" 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\">Ansicht auswählen</div><div class=\"H_rdo_buttons H_el\" tabindex=\"-1\"><div class=\"H_btn H_el H_active\" tabindex=\"-1\">Kartenansicht</div><div class=\"H_btn H_el\" tabindex=\"-1\">Satellit</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\">Verkehrslage</div><div class=\"H_btn H_el\" tabindex=\"-1\">Verkehrsstörungen anzeigen</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></div></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import Map from '@rio-cloud/rio-uikit/Map';\nimport { UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT } from '../uikit_demo_credentials';\n\nconst position = { lat: 48.1351, lng: 11.582 };\n\nconst MapLocalizationExample = () => {\n    return (\n        <div className='height-300'>\n            <Map\n                credentials={UIKIT_DEMO_CREDENTIALS_ARE_NOT_ALLOWED_IN_PROD_ENVIRONMENT}\n                language='de'\n                center={position}\n                zoom={10}\n                hideMapSettings\n            />\n        </div>\n    );\n};\n\nexport default MapLocalizationExample;"
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}