✨ Introducing Magic UI Pro - 50+ blocks and templates to build beautiful landing pages in minutes.

Getting Started

Templates

Components

Special Effects

Animations

Text Animations

Device Mocks

Buttons

Backgrounds

Community

Dotted Map

A component with a svg dotted map.

import { DottedMap } from "@/registry/magicui/dotted-map"

const markers = [
  {
    lat: 40.7128,
    lng: -74.006,
    size: 0.3,
  }, // New York
  {
    lat: 34.0522,
    lng: -118.2437,
    size: 0.3,
  }, // Los Angeles
  {
    lat: 51.5074,
    lng: -0.1278,
    size: 0.3,
  }, // London
  {
    lat: -33.8688,
    lng: 151.2093,
    size: 0.3,
  }, // Sydney
  {
    lat: 48.8566,
    lng: 2.3522,
    size: 0.3,
  }, // Paris
  {
    lat: 35.6762,
    lng: 139.6503,
    size: 0.3,
  }, // Tokyo
  {
    lat: 55.7558,
    lng: 37.6176,
    size: 0.3,
  }, // Moscow
  {
    lat: 39.9042,
    lng: 116.4074,
    size: 0.3,
  }, // Beijing
  {
    lat: 28.6139,
    lng: 77.209,
    size: 0.3,
  }, // New Delhi
  {
    lat: -23.5505,
    lng: -46.6333,
    size: 0.3,
  }, // São Paulo
  {
    lat: 1.3521,
    lng: 103.8198,
    size: 0.3,
  }, // Singapore
  {
    lat: 25.2048,
    lng: 55.2708,
    size: 0.3,
  }, // Dubai
  {
    lat: 52.52,
    lng: 13.405,
    size: 0.3,
  }, // Berlin
  {
    lat: 19.4326,
    lng: -99.1332,
    size: 0.3,
  }, // Mexico City
  {
    lat: -26.2041,
    lng: 28.0473,
    size: 0.3,
  }, // Johannesburg
]

export function Component() {
  return (
    <div className="relative h-[500px] w-full overflow-hidden rounded-lg border">
      <div className="to-background absolute inset-0 bg-radial from-transparent to-70%" />
      <DottedMap markers={markers} />
    </div>
  )
}

Installation


pnpm dlx shadcn@latest add @magicui/dotted-map

Examples

Smaller Dots

import { DottedMap } from "@/registry/magicui/dotted-map"

export function Component() {
  return (
    <div className="relative h-[500px] w-full overflow-hidden rounded-lg border">
      <DottedMap dotRadius={0.1} />
    </div>
  )
}

Usage

import { DottedMap } from "@/components/ui/dotted-map"

<div className="relative h-[400px] w-full overflow-hidden rounded-xl border">
  <DottedMap />
</div>

Props

Prop	Type	Default	Description
`width`	`number`	`150`	Width of the SVG map.
`height`	`number`	`75`	Height of the SVG map.
`mapSamples`	`number`	`5500`	Number of sample points for map generation.
`markers`	`Marker[]`	`[]`	Array of markers to display on the map.
`dotColor`	`string`	`undefined`	Color of the map dots (uses currentColor if not set).
`markerColor`	`string`	`"#FF6900"`	Color of the markers.
`dotRadius`	`number`	`0.22`	Radius of the map dots.
`className`	`string`	`undefined`	Additional class names applied to the SVG.
`style`	`React.CSSProperties`	`undefined`	Inline styles merged into the SVG.

Dot Pattern File Tree

On This Page

Installation Examples Smaller Dots Usage Props

Contribute

Limited Time Offer

Ship Faster with Magic UI Pro

Stop building from scratch.
Get 8 production-ready templates and 50+ premium components that your users will love.

Next.js 15 + TypeScript ready

Copy, paste, customize in minutes

Save 100+ hours of development

$199once

Get Lifetime Access

Trusted by 5,000+ developers