지도(Map)

맵차트에서 표시될 지도 데이터 소스를 반드시 적어도 하나는 설정해야 한다. RealMap은 지도 데이터는 두가지 포맷의 지도 데이터를 읽어서 지도를 구성한다.

geoJSON

topoJSON

const config = {
    map: [
        {
            url: '../assets/map/wooritech/v1/maps/geojson/kr-sido-low.geo.json',
            padding: '0.8 0 0 0',
        },
        // 다른 정보가 없으면 경로 문자열을 바로 설정할 수 있다.
        '../assets/map/wooritech/v1/maps/topjson/kr-sigun-low.topo.json'
    ],
};

맵차트의 축은 지도에 설정된 위/경도 정보를 기준으로 설정된다. 또한, 맵에는 도형셋으로 구성된 영역 정보들이 포함되어 있다. 맵 시리즈는 이 정보를 이용해 영역들을 표시한다.
RealMap 라이브러리는 응용 app에서 사용할 수 있는 맵소스 컬렉션을 제공한다. npm 모듈에 포함된 local 파일로 직접 포함시키거나, CDN 저장소의 원격 url을 포함시킬 수 있다.

const config = {
    map: `https://unpkg.com/realmap-collection/world-low.topo.json`,
};

RealMap Collection

RealMap Collection (opens in a new tab)은 맵차트 개발을 위해 필요한 지도 데이터를 모아둔 NPM 패키지이다.
아래와 같은 지도를 제공한다.

국가별 세계지도(world)
대륙별 세계지도(continent)
대한민국 지도
- 시도(kr-sido)
- 시군구(kr-sigun)
- 읍면동(kr-dong)
한반도 지도(korea)
미국 주(state)별 지도(usa-state)
일본 도도부현 지도(japan-adm1)
중국 성(省)별 지도(china-adm1)

지도 파일은 깃허브 레파지토리를 통해 제공된다.
github.com/realgrid/realmap-collection-dist (opens in a new tab) 지도의 해상도에 따라 3개의 파일이 제공된다. 각각 high, mid, low이다.
해상도가 낮을 수록 지도의 세밀함이 떨어지지만 용량이 감소하므로 상황에 맞게 사용하면 된다.
또한 각 지도는 geo.json과 topo.json 버전이 제공된다.
일반적인 경우 geo.json을 사용하면 된다.

지도 파일의 이름 규칙은 아래와 같다.

{지도_이름}-{해상도}.{geo | topo}.json

예시

국가별 세계지도는 아래와 같이 총 6개의 파일이 제공된다.
world-high.geo.json
world-mid.geo.json
world-low.geo.json
world-high.mid.json
world-mid.mid.json
world-low.mid.json

그 외에도 NPM을 통해 사용하거나 CDN으로 사용할 수 있다.

NPM으로 지도 데이터를 사용하는 경우

아래의 명령어로 npm을 통해 지도 데이터 모듈을 설치한다.

npm install realmap-collection

아래와 같이 지도 데이터를 import하여 사용할 수 있다.

import 'realmap/dist/realmap-style.css';
import { createChartAsync } from 'realmap';
 
// -> 아래와 같이 지도 데이터 import
import map from 'realmap-collection/world-high.geo.json';
 
createChartAsync(document, 'map', {
    map: [ 
        { 
            source: map
        }
     ],
});

CDN으로 지도 데이터를 사용하는 경우

아래와 같이 URL을 작성하여 요청하면 된다

https://unpkg.com/realmap-collection/{{지도 이름}}
ex) https://unpkg.com/realmap-collection/world-high.geo.json