@abez/kazakhstan-map

Live demo →

A customizable, accessible SVG map of Kazakhstan for React — 16 top-level regions and 175 districts, geometry from geoBoundaries, choropleth, drill-down, and 3-locale built-in metadata (kk/ru/en).

Built on @abez/map-core, the shared engine also powering @abez/uzb-map. TypeScript-first. Zero runtime dependencies.

Install

npm install @abez/kazakhstan-map

React 17+ is a peer dependency; nothing else is required at runtime.

Quick start

import { KazakhstanMap } from '@abez/kazakhstan-map'

export function App() {
  return <KazakhstanMap locale="en" onRegionClick={(code) => console.log(code)} />
}

Choropleth

<KazakhstanMap data={{ 'KZ-ALA': 98, 'KZ-AST': 95, 'KZ-MAN': 30 }} />

Keys are region codes ("KZ-ALA") or, in view="districts", district codes.

Drill-down

const [focusRegion, setFocusRegion] = useState<string>()

<KazakhstanMap
  focusRegion={focusRegion}
  onRegionClick={(code) => setFocusRegion(code)}
  onDistrictClick={(code) => console.log('district', code)}
/>

Custom markers

import { KazakhstanMap, useProjectPoint, useMapScale } from '@abez/kazakhstan-map'

function CapitalMarker() {
  const project = useProjectPoint()
  const scale = useMapScale()
  const [x, y] = project([71.4491, 51.1694]) // Astana
  return <circle cx={x} cy={y} r={4 / scale} fill="red" />
}

<KazakhstanMap>
  <CapitalMarker />
</KazakhstanMap>

Locales & metadata

import { getRegionMeta, getDistrictsByRegion } from '@abez/kazakhstan-map'

getRegionMeta('KZ-ALM') // { code, names: {kk,ru,en}, capital, population, populationYear, areaKm2, ... }
getDistrictsByRegion('KZ-ALM')

District-level population/areaKm2 are best-effort and largely unverified for this initial release — see DATA_SOURCES.md for exactly what's confirmed vs. estimated, and for two documented administrative- boundary gaps (Shymkent and the 2022 Abai/Jetisu/Ulytau split aren't yet reflected in the region geometry).

Data & attribution

Geometry derived from geoBoundaries KAZ ADM1/ADM2 (Runfola et al. 2020, ODbL). See DATA_SOURCES.md for full attribution, known gaps, and the Astana geometry-synthesis note.