// 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 slots3 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"
      ]
    }
  ]'
/>
Event outputInteract with the preview to inspect the typed payload.
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 outputs

Receive every typed component output

Use declarative output handlers in .wrn files or register a direct output handler from JavaScript. The canonical API exposes payload and does not require event.detail.

@markerClickFires when the component emits the markerClick event.
@selectFires when an item, option, card, or result is selected.
@zoomFires when the component emits the zoom event.
Declarative handlers.wrn
<Map
  @markerClick='console.log(payload)'
  @select='console.log(payload)'
  @zoom='console.log(payload)'
/>
Direct output handlers.js
import { registerOutputHandler } from "@wrnexus/csr/outputs"

const component = document.querySelector("[data-ui-component=\"Map\"], [data-component=\"Map\"]")

if (component) registerOutputHandler(component, "markerClick", (payload) => {
  console.log("markerClick", payload)
})

if (component) registerOutputHandler(component, "select", (payload) => {
  console.log("select", payload)
})

if (component) registerOutputHandler(component, "zoom", (payload) => {
  console.log("zoom", payload)
})
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
} }