react-dotted-map

react-dotted-map

A lightweight React component for rendering beautiful, interactive dotted world maps as SVG.

Installation

bun add react-dotted-map

Quick Start

import DottedMap from 'react-dotted-map';

function App() {
  return <DottedMap height={100} />;
}

Usage

Basic Map

import DottedMap from 'react-dotted-map';

function WorldMap() {
  return (
    <DottedMap
      height={100}
      className="my-map"
    />
  );
}

Adding Pins

Use the Pin component to mark locations on the map:

import DottedMap, { Pin } from 'react-dotted-map';

function MapWithPins() {
  return (
    <DottedMap height={100}>
      <Pin lat={40.7128} lng={-74.006} />  {/* New York */}
      <Pin lat={51.5074} lng={-0.1278} />  {/* London */}
      <Pin lat={35.6762} lng={139.6503} /> {/* Tokyo */}
    </DottedMap>
  );
}

Custom Pin Styling

Pins accept any valid SVG circle attributes:

<DottedMap height={100}>
  <Pin
    lat={48.8566}
    lng={2.3522}
    fill="red"
    stroke="white"
    strokeWidth={2}
  />
</DottedMap>

Filtering by Region

Display specific regions of the world:

<DottedMap
  height={100}
  region="EU" // Show only Europe
/>

Filtering by Countries

Show only specific countries:

<DottedMap
  height={100}
  countries={['USA', 'CAN', 'MEX']}
/>

API Reference

<DottedMap />

The main component for rendering the dotted map.

Prop	Type	Description
height	number	Height of the map grid
width	number	Width of the map grid
region	string	Filter to show a specific region
countries	string[]	Array of country codes to display
grid	string	Grid configuration
avoidOuterPins	boolean	Avoid placing dots at outer boundaries
className	string	CSS class name for the SVG element
viewBox	string	SVG viewBox attribute
ref	RefObject<SVGSVGElement>	React ref to the SVG element
children	ReactNode	Child elements (pins, custom SVG elements)

<Pin />

A component for adding location markers to the map.

Prop	Type	Description
lat	number	Latitude coordinate
lng	number	Longitude coordinate
...props	SVGCircleElement	Any valid SVG circle attributes

Development

Clone the repository and install dependencies:

git clone https://github.com/jackall3n/react-dotted-map.git
cd react-dotted-map
bun install

Available Scripts

Command	Description
bun dev	Start development mode with watch
bun play	Run the playground for testing
bun test	Run unit tests
bun run build	Build the library for production
bun run typecheck	Run TypeScript type checking

License

MIT License - see LICENSE for details.