Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Max-Samson/magicui/llms.txt

Use this file to discover all available pages before exploring further.

Display a beautiful dotted world map with location markers, perfect for showing global presence.

​
Installation

npx shadcn@latest add @magicui/dotted-map

​
Usage

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

const markers = [
  { lat: 40.7128, lng: -74.006 }, // New York
  { lat: 51.5074, lng: -0.1278 }, // London
]

export default function Example() {
  return (
    <div className="relative h-[400px] w-full overflow-hidden rounded-xl border">
      <DottedMap markers={markers} />
    </div>
  )
}

​
Props

​
width
number
default:"150"
Width of the SVG map
​
height
number
default:"75"
Height of the SVG map
​
mapSamples
number
default:"5000"
Number of sample points for map generation (affects detail level)
​
markers
Marker[]
default:"[]"
Array of location markers to display on the map
​
dotColor
string
Color of the map dots (uses currentColor if not set)
​
markerColor
string
default:"'#FF6900'"
Color of the location markers
​
dotRadius
number
default:"0.22"
Radius of individual map dots
​
className
string
Additional CSS classes applied to the SVG
​
style
React.CSSProperties
Inline styles merged into the SVG

​
Marker Object

interface Marker {
  lat: number
  lng: number
  size?: number
}

​
Examples

​
Smaller Dots

<DottedMap dotRadius={0.15} />

​
Custom Colors

<DottedMap dotColor="#3B82F6" markerColor="#EF4444" />

​
Features

  • SVG-based for crisp rendering
  • Customizable dot density
  • Location markers with coordinates
  • Responsive sizing
  • Color customization
  • Staggered dot pattern for visual appeal

​
Credits

Created by dillionverma

Build docs developers (and LLMs) love

Get started for freeTalk to us