Display a beautiful dotted world map with location markers, perfect for showing global presence.
Installation
npx shadcn@latest add @magicui/dotted-map
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>
)
}
Number of sample points for map generation (affects detail level)
Array of location markers to display on the map
Color of the map dots (uses currentColor if not set)
markerColor
string
default:"'#FF6900'"
Color of the location markers
Radius of individual map dots
Additional CSS classes applied to the SVG
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