# 대한민국 지도 차트: 시도·시군구 지도, 타일 지도, 육각형 지도 (전남광주 반영)

> @82chart/map-kr 로 대한민국 시도·시군구 지도(단계구분도), 타일 지도, 시군구 육각형 지도를 그립니다. 전남광주통합특별시 반영(16개 시도, 이전 17개도), 이름·코드 자동 인식, 선거 결과처럼 1위 시리즈 색칠, SSR. 무료 MIT.

Source: https://82chart.com/docs/map/

지도 차트(단계구분도, choropleth)란 지역마다 값에 따라 색의 진하기를 달리 칠해, 어느 지역이 많고 적은지 한눈에 보여 주는 차트입니다. 시도별 인구, 지역별 매출, 시군구별 민원 건수처럼 지역이 기준인 통계에 씁니다.

82chart 의 대한민국 지도는 코어 위에 얹는 별도 패키지 `@82chart/map-kr` 입니다. 시도 경계와 시군구 경계가 패키지에 들어 있어 GeoJSON 을 따로 구할 필요가 없고, 데이터에는 `'서울'`, `'경기도'` 같은 이름이나 행정기관코드만 넣으면 됩니다. 툴팁·키보드·내보내기·표 보기·서버 렌더링은 다른 82chart 차트와 똑같이 동작합니다.

```bash
npm i @82chart/core @82chart/map-kr
```

```js
import { createMapChart } from '@82chart/map-kr';
import '@82chart/core/styles.css';

createMapChart('#map', {
  title: '시도별 인구',
  unit: '명',
  data: { series: [{ name: '인구', data: [{ x: '서울', y: 9310000 }, { x: '경기', y: 13720000 } /* … */] }] },
});

// 코어의 createChart 로 쓸 때는 한 번 등록합니다
import { createChart, use } from '@82chart/core';
import { koreaMap } from '@82chart/map-kr';
use(koreaMap); // 'map', 'tilemap', 'hexmap'
createChart('#map', { type: 'map', data });

// 시군구 지도(map.level: 'sigungu')를 쓰면 경계 데이터를 하나 더 불러옵니다
import '@82chart/map-kr/sigungu';
```

아래는 16개 시도의 인구입니다(예시 값). 지역에 마우스를 올리거나 차트를 누른 뒤 화살표 키로 움직이면 툴팁에 값과 **순위**(16곳 중 몇 번째), 전체 중 **비중**이 나옵니다. 울릉도와 독도는 점선 상자 안에 그리고, 독도는 실제보다 조금 크게 그려 보이게 했습니다.

```js
createChart('#chart', {
  type: 'map',
  title: '시도별 인구',
  subtitle: '2026년 9월, 예시 데이터',
  unit: '명',
  footnote: '지도 경계: 통계청 SGIS, vuski/admdongkor (CC BY 4.0)',
  data: {
    series: [{
      name: '인구',
      data: [
        { x: '서울', y: 9310000 }, { x: '부산', y: 3240000 }, { x: '대구', y: 2350000 }, { x: '인천', y: 3040000 },
        { x: '대전', y: 1440000 }, { x: '울산', y: 1090000 }, { x: '세종', y: 392000 }, { x: '경기', y: 13720000 },
        { x: '강원', y: 1510000 }, { x: '충북', y: 1590000 }, { x: '충남', y: 2140000 }, { x: '전북', y: 1720000 },
        { x: '전남광주', y: 3170000 }, { x: '경북', y: 2510000 }, { x: '경남', y: 3220000 }, { x: '제주', y: 668000 },
      ],
    }],
  },
});
```

## 데이터 형식

- 지역 하나는 `{ x: '서울', y: 9310000 }` 입니다. `labels: ['서울', '부산']` 과 숫자 배열로 넣어도 됩니다.
- 데이터에 없는 지역과 값이 `null` 인 지역은 회색으로 칠하고 툴팁에 "자료 없음"이라고 씁니다.
- 색은 한 가지 색의 진하기로 칠합니다(`map.color`, 기본은 첫 시리즈 색). 값에 음수와 양수가 함께 있으면 0을 가운데 둔 두 가지 색으로 칠합니다(아래 타일 지도).
- 이름은 지역 안에 들어갈 때만 씁니다. `map.labels` 로 이름 대신 값, 또는 이름과 값을 함께 쓸 수 있습니다.

## 16개 시도와 17개 시도 (광주·전남 통합)

2026년 7월 1일 광주광역시와 전라남도가 **전남광주통합특별시**로 합쳐져 시도는 16개가 되었습니다. 기본값 `regions: 'auto'` 는 데이터를 보고 정합니다. 데이터에 광주나 전남이 따로 있으면 이전처럼 17개 시도로, 그렇지 않으면 지금의 16개 시도로 그립니다. 16개 지도에서 전남광주는 옛 광주와 전남의 경계를 합쳐 한 지역으로 칠합니다.

아래는 2025년 말 통계라 광주와 전남이 따로 있습니다. 그래서 따로 설정하지 않아도 17개 시도로 그려집니다(이름과 값을 함께 쓴 예).

```js
createChart('#chart', {
  type: 'map',
  title: '시도별 인구 (2025년 말)',
  subtitle: '광주·전남이 따로 있어 17개 시도로 그립니다',
  unit: '명',
  footnote: '지도 경계: 통계청 SGIS, vuski/admdongkor (CC BY 4.0)',
  map: { labels: 'both' },
  data: {
    series: [{
      name: '인구',
      data: [
        { x: '서울', y: 9330000 }, { x: '부산', y: 3260000 }, { x: '대구', y: 2360000 }, { x: '인천', y: 3030000 },
        { x: '광주', y: 1400000 }, { x: '대전', y: 1440000 }, { x: '울산', y: 1090000 }, { x: '세종', y: 390000 },
        { x: '경기', y: 13700000 }, { x: '강원', y: 1520000 }, { x: '충북', y: 1590000 }, { x: '충남', y: 2130000 },
        { x: '전북', y: 1750000 }, { x: '전남', y: 1790000 }, { x: '경북', y: 2540000 }, { x: '경남', y: 3250000 },
        { x: '제주', y: 670000 },
      ],
    }],
  },
});
```

- `map: { regions: 16 }` 이나 `regions: 17` 로 어느 한쪽에 고정할 수 있습니다.
- 17개로 고정하면 `'전남광주'` 값은 그릴 곳이 없어 빠지고 콘솔에 경고가 남습니다.
- 17개 시도 통계를 16개 지도로 보여 주려면 광주와 전남 값을 더해 `'전남광주'` 한 줄로 넣으세요.

## 알아듣는 지역 이름과 코드

| 쓰는 값 | 예 |
| --- | --- |
| 짧은 이름 | `서울`, `경기`, `전남광주` |
| 공식 이름 | `서울특별시`, `강원특별자치도`, `전남광주통합특별시` |
| 옛 이름 | `강원도`, `전라북도`, `서울시` |
| 영어 | `Seoul`, `Gyeonggi-do`, `Jeonnam-Gwangju` |
| 행정기관코드 | `11`, `1100000000` (10자리는 앞 두 자리로 시도를 찾음), 옛 코드 `42`(강원)·`45`(전북) |
| 시군구 | `종로구`, `서울 중구`, `서울특별시 중구`, 5자리 코드 `11110`, `수원시`·`수원시 장안구` |

띄어쓰기, 가운뎃점, 대소문자는 가리지 않습니다(`경 기`도 경기). 알아듣지 못한 이름은 그리지 않고 콘솔에 경고를 남기므로, 지도가 비어 보이면 브라우저 콘솔을 먼저 보세요.

## 시군구 지도와 focus

`map: { level: 'sigungu' }` 는 시군구 경계로 그립니다. 시군구 경계는 파일이 커서(gzip 약 21 KB) 따로 불러옵니다: `import '@82chart/map-kr/sigungu'`. `focus` 에 시도를 주면 그 시도만 차트에 꽉 차게 그립니다. 아래는 서울의 25개 구입니다.

```js
createChart('#chart', {
  type: 'map',
  title: '서울 구별 인구',
  subtitle: '25개 구, 예시 데이터',
  unit: '명',
  footnote: '지도 경계: 통계청 SGIS, vuski/admdongkor (CC BY 4.0)',
  map: { level: 'sigungu', focus: '서울' },
  data: {
    series: [{
      name: '인구',
      data: [
        { x: '종로구', y: 139000 }, { x: '중구', y: 121000 }, { x: '용산구', y: 210000 }, { x: '성동구', y: 281000 }, { x: '광진구', y: 336000 },
        { x: '동대문구', y: 346000 }, { x: '중랑구', y: 381000 }, { x: '성북구', y: 427000 }, { x: '강북구', y: 282000 }, { x: '도봉구', y: 301000 },
        { x: '노원구', y: 492000 }, { x: '은평구', y: 456000 }, { x: '서대문구', y: 306000 }, { x: '마포구', y: 361000 }, { x: '양천구', y: 431000 },
        { x: '강서구', y: 556000 }, { x: '구로구', y: 396000 }, { x: '금천구', y: 226000 }, { x: '영등포구', y: 376000 }, { x: '동작구', y: 377000 },
        { x: '관악구', y: 486000 }, { x: '서초구', y: 405000 }, { x: '강남구', y: 556000 }, { x: '송파구', y: 654000 }, { x: '강동구', y: 471000 },
      ],
    }],
  },
});
```

`focus` 는 시도 지도에도 쓸 수 있고, `['부산', '울산', '경남']` 처럼 여러 시도를 줄 수도 있습니다.

## 구가 있는 시는 시 이름 하나로

수원시(4개 구), 성남시, 고양시, 용인시처럼 구가 있는 시는 데이터에 `'수원시'` 처럼 시 이름만 쓰면 그 시의 구를 한 지역으로 묶어 칠합니다. 구별 값이 있으면 `'수원시 장안구'` 처럼 구까지 쓰면 됩니다. 아래는 경기도 31개 시군입니다.

```js
createChart('#chart', {
  type: 'map',
  title: '경기도 시군별 인구',
  subtitle: '수원시·성남시처럼 구가 있는 시는 시 이름 하나로',
  unit: '명',
  footnote: '지도 경계: 통계청 SGIS, vuski/admdongkor (CC BY 4.0)',
  map: { level: 'sigungu', focus: '경기', color: '#0e9f6e' },
  data: {
    series: [{
      name: '인구',
      data: [
        { x: '수원시', y: 1190000 }, { x: '용인시', y: 1080000 }, { x: '고양시', y: 1070000 }, { x: '화성시', y: 960000 }, { x: '성남시', y: 910000 },
        { x: '부천시', y: 770000 }, { x: '남양주시', y: 730000 }, { x: '안산시', y: 620000 }, { x: '평택시', y: 600000 }, { x: '안양시', y: 540000 },
        { x: '시흥시', y: 520000 }, { x: '파주시', y: 510000 }, { x: '김포시', y: 490000 }, { x: '의정부시', y: 460000 }, { x: '광주시', y: 390000 },
        { x: '하남시', y: 330000 }, { x: '광명시', y: 280000 }, { x: '군포시', y: 260000 }, { x: '양주시', y: 250000 }, { x: '오산시', y: 230000 },
        { x: '이천시', y: 220000 }, { x: '안성시', y: 190000 }, { x: '구리시', y: 180000 }, { x: '의왕시', y: 160000 }, { x: '포천시', y: 140000 },
        { x: '양평군', y: 120000 }, { x: '여주시', y: 110000 }, { x: '동두천시', y: 90000 }, { x: '과천시', y: 80000 }, { x: '가평군', y: 60000 },
        { x: '연천군', y: 40000 },
      ],
    }],
  },
});
```

> `중구`·`동구`·`서구`처럼 여러 시도에 있는 이름은 어느 곳인지 알 수 없어 그리지 않고, 콘솔에 후보와 함께 경고를 남깁니다. `'서울 중구'` 처럼 시도를 붙이거나, 5자리 코드를 쓰거나, `focus` 로 시도를 정하세요.

## 타일 지도

`type: 'tilemap'` 은 시도마다 같은 크기의 칸 하나를 대략 제자리에 놓은 지도입니다. 면적이 작은 서울·세종·대전도 경북만큼 잘 보여서, 면적보다 값 비교가 중요할 때 맞습니다. 16개 시도에서 전남광주는 두 칸 너비입니다. 아래는 음수와 양수가 함께 있어 두 가지 색으로 칠한 예이고, `deltaColors: 'korea'` 로 증가를 빨강, 감소를 파랑으로 했습니다.

```js
createChart('#chart', {
  type: 'tilemap',
  title: '시도별 인구 증감률',
  subtitle: '1년 전 대비, 예시 데이터',
  unit: '%',
  deltaColors: 'korea',
  data: {
    series: [{
      name: '증감률',
      data: [
        { x: '서울', y: -0.5 }, { x: '부산', y: -0.9 }, { x: '대구', y: -0.7 }, { x: '인천', y: 0.9 },
        { x: '대전', y: -0.2 }, { x: '울산', y: -0.6 }, { x: '세종', y: 1.4 }, { x: '경기', y: 0.6 },
        { x: '강원', y: -0.4 }, { x: '충북', y: 0.1 }, { x: '충남', y: 0.4 }, { x: '전북', y: -1.1 },
        { x: '전남광주', y: -0.8 }, { x: '경북', y: -0.9 }, { x: '경남', y: -0.7 }, { x: '제주', y: -0.3 },
      ],
    }],
  },
});
```

칸 위치는 `map.tiles` 로 옮길 수 있습니다. 키는 시도 이름이나 코드입니다: `tiles: { 제주: [1, 4] }` 또는 `tiles: { '50': [1, 4] }`.

## 육각형 지도 (시군구 256곳)

`type: 'hexmap'` 은 256개 시군구를 같은 크기의 육각형 하나씩으로 그립니다. 실제 지도에서는 서울의 구가 점처럼 작고 강원·경북의 군은 크게 보이지만, 육각형 지도에서는 모든 시군구가 같은 크기라 사람이 많이 사는 서울·경기의 값도 잘 보입니다. 서울과 경기는 넓게 펼쳐 놓았고, 시도 경계는 칸 사이에 굵은 선으로 그립니다. 칸 안에는 `종로`, `수원 장안`처럼 짧은 이름을 씁니다.

칸 배치가 패키지 본체에 들어 있어 **`@82chart/map-kr/sigungu` 를 불러올 필요가 없습니다**. 데이터는 시군구 지도와 똑같이 맞춥니다: 5자리 코드, `'서울 종로구'`, 한 곳뿐인 이름, 구를 묶는 시 이름(`'수원시'`). `map.focus` 로 시도만 확대할 수 있고, 아래는 서울 25개 구에 이름과 값을 함께 쓴 예입니다.

```js
createChart('#chart', {
  type: 'hexmap',
  title: '서울 구별 인구 (육각형 지도)',
  subtitle: '25개 구를 같은 크기의 육각형으로, 예시 데이터',
  unit: '명',
  map: { focus: '서울', labels: 'both' },
  data: {
    series: [{
      name: '인구',
      data: [
        { x: '종로구', y: 139000 }, { x: '중구', y: 121000 }, { x: '용산구', y: 210000 }, { x: '성동구', y: 281000 }, { x: '광진구', y: 336000 },
        { x: '동대문구', y: 346000 }, { x: '중랑구', y: 381000 }, { x: '성북구', y: 427000 }, { x: '강북구', y: 282000 }, { x: '도봉구', y: 301000 },
        { x: '노원구', y: 492000 }, { x: '은평구', y: 456000 }, { x: '서대문구', y: 306000 }, { x: '마포구', y: 361000 }, { x: '양천구', y: 431000 },
        { x: '강서구', y: 556000 }, { x: '구로구', y: 396000 }, { x: '금천구', y: 226000 }, { x: '영등포구', y: 376000 }, { x: '동작구', y: 377000 },
        { x: '관악구', y: 486000 }, { x: '서초구', y: 405000 }, { x: '강남구', y: 556000 }, { x: '송파구', y: 654000 }, { x: '강동구', y: 471000 },
      ],
    }],
  },
});
```

## 여러 시리즈: 1위 색으로 칠하기

시리즈가 둘 이상이면 지도·타일 지도·육각형 지도 모두 지역마다 **값이 가장 큰 시리즈의 색**으로 칠합니다. 선거 개표 지도처럼 후보별 득표율을 넣으면 지역마다 1위 후보 색이 됩니다. 이때 색 범례 대신 시리즈 범례가 나오고(눌러서 후보를 빼면 남은 후보끼리 다시 1위를 정함), 툴팁에는 1위 후보와 값이 먼저, 나머지 후보가 그 아래에 나옵니다. 화면 읽기 요약은 "1위 지역 수: 가 후보 9, 나 후보 7"처럼 읽고, CSV·엑셀에는 시리즈마다 열이 하나씩 들어갑니다.

아래 두 예제의 후보와 숫자는 모두 지어낸 **예시 데이터**입니다. 실제 선거 결과가 아닙니다.

```js
createChart('#chart', {
  type: 'tilemap',
  title: '시도별 1위 후보',
  subtitle: '가상의 후보, 예시 데이터 (실제 선거 결과 아님)',
  unit: '%',
  data: {
    series: [
      {
        name: '가 후보',
        data: [
          { x: '서울', y: 52.1 }, { x: '부산', y: 44.3 }, { x: '대구', y: 37.5 }, { x: '인천', y: 51.2 },
          { x: '대전', y: 49.6 }, { x: '울산', y: 45.1 }, { x: '세종', y: 55.4 }, { x: '경기', y: 52.8 },
          { x: '강원', y: 47 }, { x: '충북', y: 48.8 }, { x: '충남', y: 48.1 }, { x: '전북', y: 60.2 },
          { x: '전남광주', y: 61.5 }, { x: '경북', y: 35.2 }, { x: '경남', y: 43.6 }, { x: '제주', y: 53 },
        ],
      },
      {
        name: '나 후보',
        data: [
          { x: '서울', y: 45 }, { x: '부산', y: 52.8 }, { x: '대구', y: 59.6 }, { x: '인천', y: 45.9 },
          { x: '대전', y: 47.5 }, { x: '울산', y: 52 }, { x: '세종', y: 41.7 }, { x: '경기', y: 44.3 },
          { x: '강원', y: 50.1 }, { x: '충북', y: 48.3 }, { x: '충남', y: 49 }, { x: '전북', y: 36.9 },
          { x: '전남광주', y: 35.6 }, { x: '경북', y: 61.9 }, { x: '경남', y: 53.5 }, { x: '제주', y: 44.1 },
        ],
      },
    ],
  },
});
```

```js
createChart('#chart', {
  type: 'hexmap',
  title: '서울 구별 1위 후보',
  subtitle: '가상의 후보, 예시 데이터 (실제 선거 결과 아님)',
  unit: '%',
  map: { focus: '서울' },
  data: {
    series: [
      {
        name: '가 후보',
        data: [
          { x: '종로구', y: 45 }, { x: '중구', y: 52 }, { x: '용산구', y: 39 }, { x: '성동구', y: 55 }, { x: '광진구', y: 51 },
          { x: '동대문구', y: 47 }, { x: '중랑구', y: 54 }, { x: '성북구', y: 50 }, { x: '강북구', y: 46 }, { x: '도봉구', y: 53 },
          { x: '노원구', y: 49 }, { x: '은평구', y: 45 }, { x: '서대문구', y: 52 }, { x: '마포구', y: 48 }, { x: '양천구', y: 55 },
          { x: '강서구', y: 51 }, { x: '구로구', y: 47 }, { x: '금천구', y: 54 }, { x: '영등포구', y: 50 }, { x: '동작구', y: 46 },
          { x: '관악구', y: 53 }, { x: '서초구', y: 40 }, { x: '강남구', y: 36 }, { x: '송파구', y: 43 }, { x: '강동구', y: 48 },
        ],
      },
      {
        name: '나 후보',
        data: [
          { x: '종로구', y: 52 }, { x: '중구', y: 45 }, { x: '용산구', y: 58 }, { x: '성동구', y: 42 }, { x: '광진구', y: 46 },
          { x: '동대문구', y: 50 }, { x: '중랑구', y: 43 }, { x: '성북구', y: 47 }, { x: '강북구', y: 51 }, { x: '도봉구', y: 44 },
          { x: '노원구', y: 48 }, { x: '은평구', y: 52 }, { x: '서대문구', y: 45 }, { x: '마포구', y: 49 }, { x: '양천구', y: 42 },
          { x: '강서구', y: 46 }, { x: '구로구', y: 50 }, { x: '금천구', y: 43 }, { x: '영등포구', y: 47 }, { x: '동작구', y: 51 },
          { x: '관악구', y: 44 }, { x: '서초구', y: 57 }, { x: '강남구', y: 61 }, { x: '송파구', y: 54 }, { x: '강동구', y: 49 },
        ],
      },
    ],
  },
});
```

> 1위 색은 차이가 1%p 든 20%p 든 같은 색입니다. 격차를 보여 주려면 두 후보의 차이(예: 가 − 나)를 시리즈 하나로 넣어 0을 가운데 둔 두 가지 색 지도로 그리세요. 값이 같으면 앞의 시리즈가 1위가 됩니다.

## 옵션 (map)

| 옵션 | 기본값 | 설명 |
| --- | --- | --- |
| `level` | `'sido'` | `'sido'` 시도, `'sigungu'` 시군구(`@82chart/map-kr/sigungu` 를 불러온 뒤) |
| `regions` | `'auto'` | `16` 지금의 16개 시도, `17` 광주·전남 따로. `'auto'` 는 데이터에 광주나 전남이 따로 있으면 17 |
| `focus` | – | 이 시도만 차트에 맞춰 그리기: `'서울'` 또는 `['부산', '울산']` (이름·코드) |
| `min`, `max` | 데이터의 최솟값·최댓값 | 색 범위의 양 끝. 값이 모두 양수면 0부터 |
| `color` | 첫 시리즈 색 | 한 가지 색 지도의 색 |
| `scheme` | 자동 | `'sequential'` 한 가지 색, `'diverging'` 0을 가운데 둔 두 가지 색(`deltaColors`). 값에 음수와 양수가 함께 있으면 diverging |
| `labels` | 지도·육각형 지도 `'name'`, 타일 지도 `'both'` | `'name'`, `'value'`, `'both'`, `false`. 지역에 들어가지 않는 이름은 생략 |
| `legend` | `true` | 아래쪽 색 범례(시리즈가 하나일 때. 여럿이면 시리즈 범례가 나옴) |
| `tiles` | – | 타일 지도의 칸 위치 `{ 이름 또는 코드: [열, 행] }` |

그 밖의 옵션(`title`, `unit`, `theme`, `palette`, `height`, `language`, `table` …)은 다른 차트와 같습니다. 차트 높이는 지도 비율에 맞춰 정하고, `height` 를 주면 그 안에 맞춰 그립니다.

## 함께 되는 것

- 툴팁: 지역 이름, 값, 순위(예: 2 / 16), 전체 중 비중. 마우스는 지역의 실제 모양으로 찾습니다.
- 키보드: 차트에 초점을 두고 화살표 키로 북쪽에서 남쪽, 서쪽에서 동쪽 순서로 지역을 하나씩 읽습니다. 화면 읽기 프로그램에는 지역 수와 가장 많은 곳·적은 곳을 요약해 읽어 줍니다.
- 내보내기: PNG·SVG·CSV·엑셀(xlsx). CSV·엑셀과 표 보기에는 지역, 코드, 값 열이 들어갑니다.
- 언어: 영어 페이지(`language: 'en'`)에서는 시도 이름을 영어로 씁니다(Seoul, Gyeonggi). 시군구 이름은 한글 그대로입니다.
- 서버 렌더링: `import { renderToSVG, use } from '@82chart/core/server'` 에 `use(koreaMap)` 을 하면 DOM 없이 지도 SVG를 만듭니다. 보고서·OG 이미지·메일 본문에 씁니다.
- 필요한 차트만: `@82chart/core/lite` 에 `use(map)`, `use(tilemap)`, `use(hexmap)` 중 쓰는 것만 등록해도 됩니다([필요한 차트만 불러오기](https://82chart.com/docs/modular-imports/)).

## 스크립트 태그 (82chart-map-kr.min.js)

`82chart.min.js` 다음에 `82chart-map-kr.min.js`(gzip 약 20 KB)를 넣으면 전역 `Chart82` 에 `map` · `tilemap` · `hexmap` 이 등록됩니다. 시군구 지도는 그 다음에 `82chart-map-kr-sigungu.min.js`(gzip 약 21 KB)를 하나 더 넣습니다. jsDelivr 주소의 패키지 이름은 `@82chart/map-kr@0.7.0` 이고, 82chart.com 에서는 같은 `/cdn/v0.7.0/` 폴더에 있습니다([CDN](https://82chart.com/docs/cdn/)). 폐쇄망용 [오프라인 zip](https://82chart.com/download/82chart-0.7.0.zip) 에도 두 파일이 들어 있습니다.

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@82chart/core@0.7.0/dist/cdn/82chart.css">
<script src="https://cdn.jsdelivr.net/npm/@82chart/core@0.7.0/dist/cdn/82chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@82chart/map-kr@0.7.0/dist/cdn/82chart-map-kr.min.js"></script>
<!-- 시군구 지도까지 쓸 때만 -->
<script src="https://cdn.jsdelivr.net/npm/@82chart/map-kr@0.7.0/dist/cdn/82chart-map-kr-sigungu.min.js"></script>
<!-- 대안: https://82chart.com/cdn/v0.7.0/82chart-map-kr.min.js, https://82chart.com/cdn/v0.7.0/82chart-map-kr-sigungu.min.js -->

<div id="map"></div>
<script>
  Chart82.createChart('#map', { type: 'map', data: { series: [{ data: [{ x: '서울', y: 9310000 }] }] } });
</script>
```

## 지도 경계 데이터와 출처 표시

지도 경계: 통계청 통계지리정보서비스(SGIS) 행정동 경계(공공누리 제1유형)를 vuski/admdongkor 가 가공(CC BY 4.0, [https://github.com/vuski/admdongkor](https://github.com/vuski/admdongkor)), 82chart 가 단순화. 기준 2026-10-01.

코드는 MIT 이고 경계 데이터는 CC BY 4.0 이라 상업 서비스에도 무료로 쓸 수 있습니다. 다만 CC BY 4.0 조건에 따라 **지도가 보이는 화면에 출처를 밝혀 주세요**. 위 예제처럼 `footnote` 에 한 줄 넣는 것이 가장 간단합니다. 자세한 내용은 패키지의 `DATA-LICENSE.md` 에 있습니다.

> 경계는 2026-10-01 기준이고, 화면용으로 단순화했으므로 측량·법적 경계 확인에는 쓰지 마세요. 행정구역이 바뀌면 패키지 업데이트로 경계를 고칩니다.

## 자주 묻는 질문

### 대한민국 지도 차트를 그릴 수 있나요?

네. 0.6 부터 별도 패키지 `@82chart/map-kr` 로 시도 지도(단계구분도), 시군구 지도, 타일 지도를 그립니다. 경계 데이터가 패키지에 들어 있어 GeoJSON 을 따로 구할 필요가 없고, 데이터에는 `'서울'` 같은 지역 이름이나 행정기관코드만 넣으면 됩니다. 코어와 같은 MIT 라 무료입니다.

### 광주·전남 통합 이후 지도는 어떻게 그리나요?

2026년 7월 1일부터 광주광역시와 전라남도는 전남광주통합특별시 하나입니다. 기본값(`regions: 'auto'`)은 데이터에 광주와 전남이 따로 있으면 이전 17개 시도로, 그렇지 않으면 전남광주를 한 지역으로 칠한 16개 시도로 그립니다. 그래서 통합 전 통계와 지금 통계를 같은 코드로 그릴 수 있고, 한쪽으로 고정하려면 `map.regions` 에 16 이나 17 을 줍니다.

### 시군구 이름이 여러 시도에 있으면(중구, 동구) 어떻게 하나요?

`'서울 중구'` 처럼 시도를 붙이거나, 5자리 시군구 코드(`11140`)를 쓰거나, `map.focus` 로 시도를 정하세요. 어느 곳인지 알 수 없는 이름은 그리지 않고 콘솔에 후보 목록과 함께 경고를 남깁니다.

### 지도 데이터를 상업 서비스에 무료로 써도 되나요?

네. 코드는 MIT, 경계 데이터는 통계청 SGIS(공공누리 제1유형)를 vuski/admdongkor 가 가공한 것(CC BY 4.0)이라 상업적으로 쓸 수 있습니다. CC BY 4.0 조건에 따라 지도가 보이는 화면에 출처를 한 줄 밝혀 주세요(`footnote`).

### 선거 결과처럼 1위 후보 색으로 칠할 수 있나요?

네(0.7부터). 후보마다 시리즈를 하나씩 넣으면 지도·타일 지도·육각형 지도 모두 지역마다 값이 가장 큰 시리즈의 색으로 칠하고, 범례에 후보가, 툴팁에 1위와 나머지 후보 값이, 요약에 후보별 1위 지역 수가 나옵니다. 시군구 단위라면 256곳을 같은 크기로 보여 주는 `type: 'hexmap'` 이 서울·경기의 결과까지 잘 보입니다.

### 육각형 지도에도 시군구 경계 파일이 필요한가요?

아니요. 육각형 지도의 칸 배치는 `@82chart/map-kr` 본체에 들어 있어 `import '@82chart/map-kr/sigungu'` 없이 그려집니다. 그 파일은 실제 경계로 그리는 시군구 지도(`map.level: 'sigungu'`)에만 필요합니다.

### 세계 지도나 읍면동 지도도 있나요?

없습니다. 대한민국 시도·시군구 지도와 시도 타일 지도만 있습니다. 세계 지도나 읍면동처럼 더 작은 단위가 필요하면 GeoJSON 을 직접 넣어 그리는 EC●●rts 같은 라이브러리가 맞습니다.