{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dotted-map-demo",
  "type": "registry:example",
  "title": "Dotted Map Demo",
  "description": "Example showing a dotted map.",
  "dependencies": [
    "countries-list"
  ],
  "registryDependencies": [
    "@magicui/dotted-map"
  ],
  "files": [
    {
      "path": "registry/example/dotted-map-demo.tsx",
      "content": "import * as React from \"react\"\nimport type { TCountryCode } from \"countries-list\"\n\nimport { DottedMap } from \"@/registry/magicui/dotted-map\"\nimport type { Marker } from \"@/registry/magicui/dotted-map\"\n\ntype CountryCode = Lowercase<TCountryCode>\n\ntype MyMarker = Marker & {\n  overlay: {\n    countryCode: CountryCode\n    label: string\n  }\n}\n\nconst markers: MyMarker[] = [\n  {\n    lat: 37.5665,\n    lng: 126.978,\n    size: 2.8,\n    overlay: { countryCode: \"kr\", label: \"Seoul\" },\n  },\n  {\n    lat: 40.7128,\n    lng: -74.006,\n    size: 2.8,\n    overlay: { countryCode: \"us\", label: \"NYC\" },\n  },\n]\n\nexport default function Component() {\n  const id = React.useId()\n  return (\n    <div className=\"relative h-[500px] w-full overflow-hidden rounded-lg border\">\n      <div className=\"to-background absolute inset-0 bg-radial from-transparent to-200%\" />\n      <DottedMap<MyMarker>\n        markers={markers}\n        renderMarkerOverlay={({ marker, x, y, r, index }) => {\n          const { countryCode, label } = marker.overlay\n          const href = `https://flagcdn.com/w80/${countryCode}.webp` // FlagCDN  [oai_citation:7‡Flagpedia](https://flagpedia.net/download/api)\n\n          const clipId = `${id}-flag-clip-${index}`.replace(/:/g, \"-\")\n          const imgR = r * 0.75\n\n          const fontSize = r * 0.9\n          const pillH = r * 1.5\n          const pillW = label.length * (fontSize * 0.62) + r * 1.4\n          const pillX = x + r + r * 0.6\n          const pillY = y - pillH / 2\n\n          return (\n            <g style={{ pointerEvents: \"none\" }}>\n              <clipPath id={clipId}>\n                <circle cx={x} cy={y} r={imgR} />\n              </clipPath>\n\n              <image\n                href={href}\n                x={x - imgR}\n                y={y - imgR}\n                width={imgR * 2}\n                height={imgR * 2}\n                preserveAspectRatio=\"xMidYMid slice\"\n                clipPath={`url(#${clipId})`}\n              />\n\n              <rect\n                x={pillX}\n                y={pillY}\n                width={pillW}\n                height={pillH}\n                rx={pillH / 2}\n                fill=\"rgba(0,0,0,0.55)\"\n              />\n              <text\n                x={pillX + r * 0.7}\n                y={y + fontSize * 0.35}\n                fontSize={fontSize}\n                fill=\"white\"\n              >\n                {label}\n              </text>\n            </g>\n          )\n        }}\n      />\n    </div>\n  )\n}\n",
      "type": "registry:example"
    }
  ]
}