Map

World map visualization using D3-Geo projections. Renders GeoJSON country features with optional coordinate-based markers and tooltips.

Import

import { Map, MapMarker } from 'reaviz';

Map Props

MapMarker Props

Basic Usage

import worldData from './worldData.json'; // GeoJSON FeatureCollection

<Map
  height={350}
  width={500}
  data={worldData}
/>

With Markers

<Map
  height={350}
  width={500}
  data={worldData}
  markers={[
    <MapMarker
      coordinates={[-122.490402, 37.786453]}
      tooltip="San Francisco"
    />,
    <MapMarker
      coordinates={[-58.3816, -34.6037]}
      tooltip="Buenos Aires"
    />,
    <MapMarker
      coordinates={[-97.7437, 30.2711]}
      tooltip="Austin, TX"
    />,
  ]}
/>

Natural Earth Projection

<Map
  data={worldData}
  height={350}
  width={500}
  projection="natural-earth"
/>

Custom Fill

<Map
  data={worldData}
  fill="rgba(0, 150, 255, 0.2)"
/>

Autosize

<div style={{ width: '80vw', height: '60vh' }}>
  <Map data={worldData} />
</div>

Notes

• Requires GeoJSON data (FeatureCollection) — the component does not bundle map data
• Antarctica (feature id '010') is automatically excluded
• Markers animate in with staggered scale/opacity transitions
• Markers are accessible: include aria-label, tabIndex, and role="graphics-document"
• Coordinates use [longitude, latitude] order (D3-Geo convention)