d3-maps

Interactive SVG maps toolkit for React 19 and Vue 3.

Build choropleths, markers, routes, bubble and zoomable maps with components powered by D3.

_{Solid and Svelte support coming soon.}

Docs · Examples · Migrate from react-simple-maps

Features

✨ Drop-in components, powerful defaults
🧩 Zoom, drag, lines, markers, and more
⚛️ Reactive rendering
📱 Responsive by default
🪶 Lightweight and tree-shakable
🧑‍💻 Fully typed
🗄️ SSR friendly
📑 TopoJSON and GeoJSON support
🌐 Ready-to-use geo files

Get started

Vue

npm install @d3-maps/vue

pnpm, bun, CDN

pnpm add @d3-maps/vue

bun add @d3-maps/vue

<script type="module">
  import { MapBase, MapFeatures } from 'https://esm.sh/@d3-maps/vue'
  import 'https://esm.sh/@d3-maps/vue/style.css'
</script>

<script setup lang="ts">
import { MapBase, MapFeatures, MapZoom } from '@d3-maps/vue'

const { default: data } = await import('@d3-maps/atlas/world/countries/countries-110m')
</script>

<template>
  <MapBase>
    <MapZoom>
      <MapFeatures :data="data" />
    </MapZoom>
  </MapBase>
</template>

React

npm install @d3-maps/react

pnpm, bun, CDN

pnpm add @d3-maps/react

bun add @d3-maps/react

<script type="module">
  import { MapBase, MapFeatures } from 'https://esm.sh/@d3-maps/react'
  import 'https://esm.sh/@d3-maps/react/style.css'
</script>

import { use } from 'react'
import { MapBase, MapFeatures, MapZoom } from '@d3-maps/react'

const worldPromise = import('@d3-maps/atlas/world/countries')
  .then((m) => m.default)

export function MapView() {
  const world = use(worldPromise)

  return (
    <MapBase>
      <MapZoom>
        <MapFeatures data={world} />
      </MapZoom>
    </MapBase>
  )
}

When to use

Case	Support	Notes
Interactive SVG maps	✅	Choropleth, bubble, heatmap, etc
Components API	✅	React & Vue packages
GeoJSON/TopoJSON rendering	✅	Geographic data to SVG
Markers, lines, annotations	✅	Framework-native components
Zoomable maps	✅	Mobile & desktop zoom and pan
Low-level map rendering	⚠️	Use D3.js for full control
Full chart workflow	❌	Use amCharts, Highcharts or Plot
Real-world map apps	❌	Use Leaflet or MapLibre
Data-heavy 3D maps	❌	Use MapLibre

Development

pnpm install
pnpm build
pnpm build:docs
pnpm dev

Contributing

See the Contributing Guide

Inspired by

react-simple-maps
Observable Plot

License

MIT licensed. Copyright © 2026 Georgii Bukharov. See LICENCE for more details.