World Map

A flat world silhouette from world-atlas data projected with d3-geo, with markers that open the kit’s hover card.

TypeScript Source with Startup & Business plans Light & dark

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { WorldMapMarkers } from '@/components/component-kit/items/map-world-markers';
2
3export function Example() {
4  return (
5    <WorldMapMarkers
6      markers={[
7        { id: 'nbo', label: 'Nairobi', description: 'East Africa hub', coordinates: [36.82, -1.29], stats: [{ label: 'Latency', value: '38 ms' }] },
8        { id: 'syd', label: 'Sydney', description: 'APAC edge', coordinates: [151.21, -33.87] },
9      ]}
10    />
11  );
12}

Props

World Map properties
Prop	Type	Default	Description
`markers`	`WorldMapMarker[]`	`—`	Markers with a label, [lng, lat] coordinates and optional description and stats.
`projection`	`"mercator" \| "equalEarth"`	`mercator`	Map projection.
`markerColor`	`{ light, dark }`	`aqua`	Marker fills per theme.
`onMarkerSelect`	`(marker) => void`	`—`	Called on click or Enter.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { WorldMapMarkers } from '@/components/component-kit/items/map-world-markers';
2
3export function Example() {
4  return (
5    <WorldMapMarkers
6      markers={[
7        { id: 'nbo', label: 'Nairobi', description: 'East Africa hub', coordinates: [36.82, -1.29], stats: [{ label: 'Latency', value: '38 ms' }] },
8        { id: 'syd', label: 'Sydney', description: 'APAC edge', coordinates: [151.21, -33.87] },
9      ]}
10    />
11  );
12}

Props

World Map properties
Prop	Type	Default	Description
`markers`	`WorldMapMarker[]`	`—`	Markers with a label, [lng, lat] coordinates and optional description and stats.
`projection`	`"mercator" \| "equalEarth"`	`mercator`	Map projection.
`markerColor`	`{ light, dark }`	`aqua`	Marker fills per theme.
`onMarkerSelect`	`(marker) => void`	`—`	Called on click or Enter.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { WorldMapMarkers } from '@/components/component-kit/items/map-world-markers';
2
3export function Example() {
4  return (
5    <WorldMapMarkers
6      markers={[
7        { id: 'nbo', label: 'Nairobi', description: 'East Africa hub', coordinates: [36.82, -1.29], stats: [{ label: 'Latency', value: '38 ms' }] },
8        { id: 'syd', label: 'Sydney', description: 'APAC edge', coordinates: [151.21, -33.87] },
9      ]}
10    />
11  );
12}

Props

World Map properties
Prop	Type	Default	Description
`markers`	`WorldMapMarker[]`	`—`	Markers with a label, [lng, lat] coordinates and optional description and stats.
`projection`	`"mercator" \| "equalEarth"`	`mercator`	Map projection.
`markerColor`	`{ light, dark }`	`aqua`	Marker fills per theme.
`onMarkerSelect`	`(marker) => void`	`—`	Called on click or Enter.

World Map

A flat world silhouette from world-atlas data projected with d3-geo, with markers that open the kit’s hover card.

TypeScript Source with Startup & Business plans Light & dark

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { WorldMapMarkers } from '@/components/component-kit/items/map-world-markers';
2
3export function Example() {
4  return (
5    <WorldMapMarkers
6      markers={[
7        { id: 'nbo', label: 'Nairobi', description: 'East Africa hub', coordinates: [36.82, -1.29], stats: [{ label: 'Latency', value: '38 ms' }] },
8        { id: 'syd', label: 'Sydney', description: 'APAC edge', coordinates: [151.21, -33.87] },
9      ]}
10    />
11  );
12}

Props

World Map properties
Prop	Type	Default	Description
`markers`	`WorldMapMarker[]`	`—`	Markers with a label, [lng, lat] coordinates and optional description and stats.
`projection`	`"mercator" \| "equalEarth"`	`mercator`	Map projection.
`markerColor`	`{ light, dark }`	`aqua`	Marker fills per theme.
`onMarkerSelect`	`(marker) => void`	`—`	Called on click or Enter.