# antuikit / TanStack Maps

> TanStack Charts' SVG chart with its tooltip, painted with the theme's chart colors, grid and axes, with labels sized from the theme.

Docs: https://antuikit.com/docs/components/tanstack-maps

## Install

npx antuikit@latest init
npx antuikit@latest add tanstack-chart

## Import

import { Chart, chartColors } from "@/components/ui/tanstack-chart";

## Demos

- [GeoJSON shapes](https://ui.antuikit.com/embed/tanstack-maps/floor-plan.md): Pass `geoShape` any GeoJSON features with a `geoIdentity` projection to draw plain shapes, here the rooms of a building floor plan.
- [World choropleth](https://ui.antuikit.com/embed/tanstack-maps/world-choropleth.md): Set `color` to a value per country with a `scaleThreshold` to shade each one into five fixed bands over a gray land layer.
- [Quantized choropleth](https://ui.antuikit.com/embed/tanstack-maps/density-choropleth.md): Use `scaleQuantize` instead of fixed thresholds to split population density into six equal bands, with an outline on every country.
- [Bubble map](https://ui.antuikit.com/embed/tanstack-maps/bubble-map.md): Give `geoShape` point features and an `r` channel with a square root `rScale` to size a circle on each country by its population.
- [Route map](https://ui.antuikit.com/embed/tanstack-maps/route-map.md): Draw a `LineString` feature over detailed land and a graticule to trace a route across the world, here the voyage of the Beagle.
- [Globe](https://ui.antuikit.com/embed/tanstack-maps/globe.md): Use `geoOrthographic` with a `rotate` to show the earth as a tilted globe, with an ocean fill, graticule lines and land on top.
- [Projections](https://ui.antuikit.com/embed/tanstack-maps/projections.md): Build one map per projection with `facetChart`, to compare Equal Earth, Natural Earth, Mercator and Equirectangular side by side.
- [US counties](https://ui.antuikit.com/embed/tanstack-maps/us-counties.md): Project counties with `geoAlbersUsa` and shade them with a `scaleQuantile` of unemployment rates, with state borders drawn on top.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/tanstack-chart`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.