{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "map-draw-01",
  "title": "Draw on the map example",
  "description": "Draw points, lines, areas and circles on a map of Calgary and get them back as GeoJSON, composed from the Unmap map and the draw item.",
  "registryDependencies": [
    "https://registry.unmap.dev/r/map.json",
    "https://registry.unmap.dev/r/draw.json"
  ],
  "files": [
    {
      "path": "registry/blocks/map-draw-01.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { Map } from \"@/components/ui/map\";\nimport { Draw, type DrawValue } from \"@/components/ui/draw\";\nimport { cn } from \"@/lib/utils\";\n\nconst COPY = {\n  en: {\n    noKey: \"Add your unmap key to load the map.\",\n    title: \"Draw on the map\",\n    hint: \"Pick a tool and draw on the map. Click or tap the last point again to finish.\",\n    result: (count: number) => (count === 1 ? \"1 shape, ready as GeoJSON\" : `${count} shapes, ready as GeoJSON`),\n  },\n  fr: {\n    noKey: \"Ajoutez votre clé unmap pour charger la carte.\",\n    title: \"Dessiner sur la carte\",\n    hint: \"Choisissez un outil et dessinez sur la carte. Cliquez ou touchez de nouveau le dernier point pour terminer.\",\n    result: (count: number) => (count === 1 ? \"1 forme, prête en GeoJSON\" : `${count} formes, prêtes en GeoJSON`),\n  },\n} as const;\n\n/**\n * A minimal example: draw points, lines, areas and circles on a map of Calgary, then select,\n * move and delete them. Every change arrives as a GeoJSON FeatureCollection in `onValueChange`,\n * ready to save. Drawing happens in the browser: the only requests are the map's own.\n */\nexport function MapDraw({\n  apiKey,\n  lang = \"en\",\n  className,\n}: {\n  /** Your Unmap browser key. */\n  apiKey: string;\n  /** Language of the copy, the toolbar and the map labels: \"en\" (default) or \"fr\". */\n  lang?: \"en\" | \"fr\";\n  className?: string;\n}) {\n  const copy = COPY[lang];\n  const [drawing, setDrawing] = useState<DrawValue | null>(null);\n  const count = drawing?.features.length ?? 0;\n\n  return (\n    <div className={cn(\"flex min-w-0 flex-col gap-3\", className)}>\n      <div role=\"region\" aria-label={copy.title} className=\"relative h-96\">\n        <Map apiKey={apiKey} center={[-114.07, 51.05]} zoom={13} lang={lang}>\n          {/* `drawing` is the GeoJSON to save or send; here it only counts the shapes. */}\n          <Draw lang={lang} onValueChange={setDrawing} />\n        </Map>\n      </div>\n      {/* No key, no map: one line says what to add. */}\n      {apiKey.trim() === \"\" ? <p className=\"text-xs text-muted-foreground\">{copy.noKey}</p> : null}\n      <p aria-live=\"polite\" className=\"text-sm text-muted-foreground tabular-nums\">\n        {count > 0 ? <span className=\"font-medium text-foreground\">{copy.result(count)}</span> : copy.hint}\n      </p>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/unmap-map-draw.tsx"
    }
  ],
  "docs": "Import MapDraw from your components/unmap-map-draw 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-draw",
  "categories": [
    "examples",
    "maps"
  ],
  "type": "registry:block"
}