Dotted Map

A SVG component displaying a dotted map with optional markers. It renders points in a staggered pattern and can show pulsing markers. Use it as a background with interactive elements.

byMagic UI

Installation

terminal

pnpm dlx layro-cli add @magicuidesign/dotted-map

npx layro-cli add @magicuidesign/dotted-map

npx layro-cli add @magicuidesign/dotted-map

bunx layro-cli add @magicuidesign/dotted-map

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

import * as React from "react"
import { createMap } from "svg-dotted-map"

import { cn } from "@/lib/utils"

export interface Marker {
  lat: number
  lng: number
  size?: number
  pulse?: boolean
}

/** addMarkers returns markers with lat/lng removed; only x, y and other props (e.g. size) remain */
type MapMarker<M extends Marker> = Omit<M, "lat" | "lng"> & {