koreamapfont

한국 지도 글꼴을 사용하면 간단한 HTML과 CSS만으로 한국 지도를 그릴 수 있습니다. 주요 행정구역별로 색을 다르게 할 수 있어서 인포그래프에 도움이 됩니다. 미국 주별 지도 Stately를 보고 따라 만들었습니다. 문자와 행정구역은 다음과 같이 대응했습니다.

남한	강원도	a	경기도	b	경상남도	c	경상북도	d
	광주광역시	e	대구광역시	f	대전광역시	g	부산광역시	h
	서울특별시	i	세종특별자치시	j	울산관역시	k	인천광역시	l
	전라남도	m	전라북도	n	제주특별자치도	o	충청남도	p
	충청북도	q
북한	강원도	r	남포특별시	s	라선특별시	t	량강도	u
	자강도	v	평안남도	w	평안북도	x	평양직할시	y
	함경남도	z	함경북도	{	황해남도	|	황해북도	}

사용 방법

글꼴과 CSS 파일을 다운로드받고, 적절한 위치에 압축을 풉니다. HTML header에 CSS 파일을 포함합니다. 글꼴 파일을 다른 위치로 이동했다면, CSS 파일 속 글꼴 경로를 수정합니다.

<link rel="stylesheet" href="assets/css/korea-map-font-v1.css">

지도를 그릴 곳에 아래와 같이 추가합니다. class는 행정구역별로 색을 지정하려고 넣었고, 필요하다면 값을 다르게 변경해도 됩니다.

<ul class="korea-map-font-v1">
  <li class="강원">a</li>
  <li class="경기">b</li>
  <li class="경남">c</li>
  <li class="경북">d</li>
  <li class="광주">e</li>
  <li class="대구">f</li>
  <li class="대전">g</li>
  <li class="부산">h</li>
  <li class="서울">i</li>
  <li class="세종">j</li>
  <li class="울산">k</li>
  <li class="인천">l</li>
  <li class="전남">m</li>
  <li class="전북">n</li>
  <li class="제주">o</li>
  <li class="충남">p</li>
  <li class="충북">q</li>
</ul>
<!-- 북한 지도
<ul class="korea-map-font-v1">
  <li class="북강원">r</li>
  <li class="남포시">s</li>
  <li class="라선시">t</li>
  <li class="량강도">u</li>
  <li class="자강도">v</li>
  <li class="평안남">w</li>
  <li class="평안북">x</li>
  <li class="평양시">y</li>
  <li class="함경남">z</li>
  <li class="함경북">{</li>
  <li class="황해남">|</li>
  <li class="황해북">}</li>
</ul>
-->

지도의 크기와 기본 색을 지시합니다. 여기서 width와 font-size는 동일한 값으로 설정합니다.

.korea-map-font-v1 {
  width: 300px;
  font-size: 300px;
  color: #f0f0f0;
}

행정구역별로 색을 다르게 합니다.

.경기, .경북 {
  color: #FF0000;
}

아래 예제와 같이 한 페이지에 지도가 여러개 나온다면, 지도마다 id를 부여하여 서로 다른 크기와 색을 보여줄 수 있습니다.

예제

http://maczniak.github.com/koreamapfont/

참고

• Stately: https://github.com/intridea/stately
• GeoBats: http://www.dafont.com/font.php?file=geobats

TODO

• 멀리 떨어진 섬들을 다르게 보여주는 버전
• 다양한 크기에서 잘 보이도록 행정구역간 경계 다듬기

라이선스

Creative Commons Attribution-Share Alike 3.0 Unported.