// Generated by scripts/generate-showcase.mjs. Do not edit directly. page MapDetail { layout = "showcase" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_title = ctx.url.searchParams.get("pg_title") ?? "Map example" state playground_description = ctx.url.searchParams.get("pg_description") ?? "A polished default map for a modern application." state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"map-0-1\",\"key\":\"map-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#map-demo\",\"actionHref\":\"#map-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"map-0-2\",\"key\":\"map-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#map-demo\",\"actionHref\":\"#map-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]") state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" seo { title = "Map" description = "Present responsive location information and markers with map-ready metadata and movement or marker events." } view {
Integrations component

Map

Present responsive location information and markers with map-ready metadata and movement or marker events.

7 props1 slots0 outputsTheme readyResponsive
Interactive playground

Configure Map

Change any prop and inspect the server-rendered component immediately.

Live preview
Component code
<Map
  title="Map example"
  description="A polished default map for a modern application."
  items='[
    {
      "id": "map-0-1",
      "key": "map-0-1",
      "value": "primary",
      "label": "Primary workflow",
      "title": "Primary workflow",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "A configurable sample message.",
      "href": "#map-demo",
      "actionHref": "#map-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 16,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    },
    {
      "id": "map-0-2",
      "key": "map-0-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "Another configurable message.",
      "href": "#map-demo",
      "actionHref": "#map-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": false,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 32,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    }
  ]'
/>
Component props7 controls
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Recommended

Station directory map

Present locations with supporting names, addresses, and actions.

01
Live preview
Component usage.wrn
<Map
  title="Nearby police stations"
  description="Select a station to view contact details and jurisdiction information."
  items='[
    {
      "title": "Central station",
      "description": "Main Road",
      "latitude": 18.5204,
      "longitude": 73.8567
    },
    {
      "title": "North station",
      "description": "University Road",
      "latitude": 18.559,
      "longitude": 73.807
    }
  ]'
/>
Compact

Compact location preview

Use a smaller map preview inside cards, drawers, and record details.

02
Live preview
Component usage.wrn
<Map
  size="sm"
  title="Service location"
  description="Public service office"
  items='[
    {
      "title": "Public office",
      "description": "City centre"
    }
  ]'
  variant="soft"
/>
Advanced

Operations map

Use a larger map surface for multiple markers and operational context.

03
Live preview
Component usage.wrn
<Map
  size="lg"
  color="info"
  title="Jurisdiction overview"
  description="Stations, service areas, and public facilities."
  items='[
    {
      "title": "Station A"
    },
    {
      "title": "Station B"
    },
    {
      "title": "Control room"
    }
  ]'
  variant="raised"
/>
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
titlestring"Map"No
descriptionstring""No
itemsunknown[][]No
variantstring"default"No
classstring""No
} }