{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "map-markers-01",
  "title": "Marker and popup example",
  "description": "An accessible marker with a click-to-open popup, composed from the Unmap map and shadcn Button.",
  "registryDependencies": [
    "https://registry.unmap.dev/r/map.json",
    "https://registry.unmap.dev/r/marker-popup.json",
    "button"
  ],
  "files": [
    {
      "path": "registry/blocks/map-markers-01.tsx",
      "content": "\"use client\";\n\nimport { Map } from \"@/components/ui/map\";\nimport { Marker, Popup } from \"@/components/ui/marker-popup\";\nimport { Button } from \"@/components/ui/button\";\n\n/** A minimal example: an accessible marker with a click-to-open popup. */\nexport function MapMarkers({\n  apiKey,\n  lang: language = \"en\",\n}: {\n  apiKey: string;\n  /** Language of the copy and the map labels: \"en\" (default) or \"fr\". */\n  lang?: \"en\" | \"fr\";\n}) {\n  const name = language === \"fr\" ? \"Parc de l’Île\" : \"Prince's Island Park\";\n  return (\n    <div role=\"region\" aria-label={name} className=\"h-96\">\n      <Map apiKey={apiKey} center={[-114.0705, 51.055]} zoom={14} lang={language}>\n        <Marker\n          lngLat={[-114.0705, 51.055]}\n          markerContent={<Button variant=\"outline\">{name}</Button>}\n        >\n          <Popup>\n            <p className=\"text-sm\">\n              {language === \"fr\"\n                ? \"Un arrêt au bord de la rivière Bow, à Calgary.\"\n                : \"A stop beside the Bow River in Calgary.\"}\n            </p>\n          </Popup>\n        </Marker>\n      </Map>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/unmap-map-markers.tsx"
    }
  ],
  "docs": "Import MapMarkers from your components/unmap-map-markers file and pass apiKey (your Unmap browser key). Use lang=\"fr\" for French. Allow your site origin on the key. Preview: https://unmap.dev/templates/map-markers",
  "categories": [
    "examples",
    "maps"
  ],
  "type": "registry:block"
}