// 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") ?? "Bengaluru" state playground_description = ctx.url.searchParams.get("pg_description") ?? "Interactive geographic map" state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[]") state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" state playground_provider = ctx.url.searchParams.get("pg_provider") ?? "openstreetmap" state playground_apiKey = ctx.url.searchParams.get("pg_apiKey") ?? "" state playground_query = ctx.url.searchParams.get("pg_query") ?? "" state playground_latitude = Number(ctx.url.searchParams.get("pg_latitude") ?? "12.9716") state playground_longitude = Number(ctx.url.searchParams.get("pg_longitude") ?? "77.5946") state playground_zoomLevel = Number(ctx.url.searchParams.get("pg_zoomLevel") ?? "13") state playground_mapType = ctx.url.searchParams.get("pg_mapType") ?? "roadmap" state playground_imageSrc = ctx.url.searchParams.get("pg_imageSrc") ?? "" state playground_imageAlt = ctx.url.searchParams.get("pg_imageAlt") ?? "Map background" 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.

16 props1 slots3 outputsTheme readyResponsive
Interactive playground

Configure Map

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

Live preview
Component code
page MapExample {
  state 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"
    ]
  }
]
  view {
    <Map
      title="Map example"
      description="A polished default map for a modern application."
      items="{items}"
    />
  }
}
Event outputInteract with the preview to inspect the typed payload.
Component props16 controls
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Recommended

OpenStreetMap

A real interactive geographic map. Set latitude, longitude and zoomLevel; no API key is needed.

01
Live preview
Component usage.wrn
page MapExample {
  state items = []
  view {
    <Map
      title="Bengaluru"
      description="Pan and zoom to explore the city"
      items="{items}"
    />
  }
}
Compact

Google Maps

Pass your restricted Maps Embed API key and a place query to show Google Maps.

02
Live preview
Component usage.wrn
page MapExample {
  state items = []
  view {
    <Map
      size="sm"
      title="Google Maps"
      description="A compact configuration for dashboards and dense product surfaces."
      items="{items}"
      variant="secondary"
      provider="google"
      query="Bengaluru"
    />
  }
}
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
providerstring"openstreetmap"No
apiKeystring""No
querystring""No
latitudenumber12.9716No
longitudenumber77.5946No
zoomLevelnumber13No
mapTypestring"roadmap"No
imageSrcstring""No
imageAltstring"Map background"No
classstring""No
} }