ethiopia-regions-map · Ethiopia's 14 regions as ready-to-render SVG paths

Live demo

Everything below is rendered by renderEthiopiaMap() in your browser. Change the controls — the SVG updates immediately.

Hover a region to see its details.

Quick start

Three common ways to use the package.

Drop-in choropleth

import { renderEthiopiaMap } from 'ethiopia-regions-map'

const svg = renderEthiopiaMap({
  values: { OR: 35.4, AM: 21.1, TI: 4.2 },
  palette: 'green',
  showLabels: true,
  width: 800,
})

document.getElementById('map').innerHTML = svg

React component

import {
  ETHIOPIA_GEOMETRY,
  ETHIOPIA_RENDER_ORDER,
  ETHIOPIA_VIEWBOX,
} from 'ethiopia-regions-map'

<svg viewBox={`0 0 ${ETHIOPIA_VIEWBOX.width} ${ETHIOPIA_VIEWBOX.height}`}>
  {ETHIOPIA_RENDER_ORDER.map((code) => (
    <path
      key={code}
      d={ETHIOPIA_GEOMETRY[code].d}
      fill="#e5e7eb"
      stroke="#fff"
    />
  ))}
</svg>

Just the data

import {
  ETHIOPIAN_REGIONS,
  getEthiopianRegion,
  findEthiopianRegionByName,
} from 'ethiopia-regions-map'

ETHIOPIAN_REGIONS.length              // 14
getEthiopianRegion('OR')              // { name: 'Oromia', … }
findEthiopianRegionByName('amhara')   // { code: 'AM', … }

Custom palette

renderEthiopiaMap({
  values,
  customPalette: {
    min: '#fef3c7',
    mid: '#f59e0b',
    max: '#7c2d12',
    diverging: true,
  },
})

Or use via CDN — no `npm install`

Every npm release is automatically mirrored to public CDNs. Drop one <script type="module"> into an HTML file and the package works — no Node, no bundler, no node_modules.

Plain HTML, no build step

<!DOCTYPE html>
<html>
  <body>
    <div id="map"></div>
    <script type="module">
      import { renderEthiopiaMap } from
        'https://esm.sh/ethiopia-regions-map@0.2.0'

      document.getElementById('map').innerHTML =
        renderEthiopiaMap({
          values: { OR: 35, AM: 21, TI: 5 },
          palette: 'blue',
          legend: { title: 'Demo', position: 'bottom-right' },
          width: 800,
        })
    </script>
  </body>
</html>

CDN	URL (replace `0.2.0` with any version)	Best for
esm.sh	`https://esm.sh/ethiopia-regions-map@0.2.0`	Browser ESM, auto-bundles deps — used by this site.
jsDelivr	`https://cdn.jsdelivr.net/npm/ethiopia-regions-map@0.2.0/+esm`	Heavy global edge caching, supports SemVer ranges.
unpkg	`https://unpkg.com/ethiopia-regions-map@0.2.0/dist/index.js`	Browse the npm folder structure directly in the URL.

Pinning tip: always include an explicit version (@0.2.0) in production URLs. A bare ethiopia-regions-map without @version resolves to latest and will auto-jump across breaking releases without warning.

Configuration

Every option is optional. Pass nothing and you get a plain outline. Mix-and-match — they're all independent.

Data input

Option	Default	What it does
`values`	`undefined`	Map of region code → number. Drives the colour scale.
`minValue`	auto	Clamp the scale's low end.
`maxValue`	auto	Clamp the scale's high end.

Colour

Option	Default	What it does
`palette`	`'green'`	One of 10 built-in palettes — see the gallery below.
`customPalette`	—	`{ min, mid?, max, diverging }` — overrides `palette`.
`colorSteps`	`1`	Discrete buckets. `5` → classic stepped choropleth.
`defaultFill`	`'#e5e7eb'`	Fill used when no `values` are passed.
`noDataColor`	`'#f3f4f6'`	Fill for regions missing from `values`.

Stroke

Option	Default	What it does
`stroke`	`'#ffffff'`	Boundary colour. `'none'` hides borders.
`strokeWidth`	`0.8`	Boundary width in SVG units.

Layout

Option	Default	What it does
`width`	`1000`	Output SVG width in pixels. Height auto-derived.

Labels

Option	Default	What it does
`regionLabel`	`'none'`	`'code'` · `'name'` · `'none'` · or `(region) => string`.
`showLabels`	`false`	Legacy shortcut — `true` = `regionLabel: 'code'`.
`labelSize`	`11`	Font size for labels.

Behavior

Option	Default	What it does
`valueFormat`	stringify	`(value, code) => string` — used in tooltips and legend.
`legend`	`false`	`true` or `{ position, title, steps, format }`.
`highlight`	`[]`	Region codes to emphasize — thicker stroke, painted last.
`exclude`	`[]`	Region codes to skip rendering entirely.

DOM hooks

Option	Default	What it does
`pathClassName`	`'ethiopia-region'`	Class on each `<path>`.
`svgClassName`	`'ethiopia-regions-map'`	Class on the root `<svg>`.

Every <path> ships with data-code, data-name, and data-value attributes — so you can wire click/hover handlers without touching the package again.

Palette gallery

All 10 built-in palettes, rendered live by the package.

Style presets

Drop-in Partial<RenderOptions> bundles. Spread one into your options and override anything you want on top.

API at a glance

Everything ships with TypeScript types. ESM + CJS dual package.

Export	Type	What it is
`ETHIOPIAN_REGIONS`	`EthiopianRegion[]`	All 14 regions with name, type, capital, year established.
`ETHIOPIA_GEOMETRY`	`Record<Code, Geometry>`	SVG `d` path + centroid per region (viewBox 1000×774).
`ETHIOPIA_VIEWBOX`	`{ width, height }`	Native SVG dimensions — `1000 × 774`.
`ETHIOPIA_RENDER_ORDER`	`Code[]`	Suggested z-order — enclaves (AA, DD, HA) paint last.
`getEthiopianRegion(code)`	`EthiopianRegion?`	Lookup by region code (case-insensitive).
`findEthiopianRegionByName(name)`	`EthiopianRegion?`	Lookup by region name (case-insensitive).
`renderEthiopiaMap(opts?)`	`string`	Complete SVG markup string — drop into `innerHTML`.

The 14 regions

Eleven regional states plus two chartered cities (Addis Ababa, Dire Dawa). The four post-SNNPR-split regions — Sidama (2020), South West (2021), Central Ethiopia + South Ethiopia (2023) — are reconstructed by unioning their constituent ADM2 zones.

Code	Name	Type	Capital	Since

About

Boundary polygons are derived from geoBoundaries gbOpen ETH ADM1 + ADM2 (2025 release) under CC-BY 4.0. Polygons are pre-projected to an SVG pixel grid (equirectangular with cos(lat) correction) — there's no runtime projection cost.

If you need raw GeoJSON in longitude/latitude coordinates, grab them directly from geoBoundaries; this package optimizes for the most common case: rendering a clean, lightweight, framework-agnostic map of Ethiopia in the browser.

Built and maintained by Mikiyas Degefu. MIT-licensed. Issues and pull requests welcome.

Ethiopia's 14 regions as ready-to-render SVG paths.