RealGrid2 가이드
리얼맵 연동 🆕
그리드 맵 데이터 🆕

그리드 맵 데이터 연동

RealGrid2의 name 값과 RealMap (opens in a new tab)의 맵 area와 연결의 이해를 돕기위한 데모입니다.

map의 url로 geo.json 데이터 경로를 지정합니다.

그리드 데이터에 사용되는 데이터를 series 의 data에 설정합니다.

map과 series의 데이터를 연결하기 위해서 기본은 map의 rm-id 또는 id 값과 series의 id값이 매핑됩니다.

id가 아닌 다른 값을 키 값으로 사용하기 위해서 mapKeys속성을 사용해서 맵 area와 연결할 키값들을 지정합니다.

//*.geo.json
"properties":{"rm-id":"11","name":"서울특별시","ctr-lon":126.9877,"ctr-lat":37.5582,"b-code":"1100000000","en-name":"Seoul"},"id":"11"}
 
//index.js
var datas = [{
    name: '서울특별시',
    s_name: '서울',
    pm2_5: 25,
    pm10: 43,
    coord: [126.978, 37.5665],
    offset: [0, 0.1],
    pm2_5_color: '#03c73c',
    pm10_color: '#30a2ff'
},
{
    name: '부산광역시',
    s_name: '부산',
    pm2_5: 19,
    pm10: 40,
    coord: [129.0756, 35.1796],
    offset: [0.3, -0.2],
    pm2_5_color: '#03c73c',
    pm10_color: '#30a2ff'
},
...
]
 
dataProvider.fillJsonData(datas);
 
 
const config = {
    title: false,
    chart: {
        backgroundStyle: {
            backgroundColor: '#85c6f8'
        }
    },
    map: [{
        url: './maps/kr-sido-low.geo.json',
        padding: '0.8 0 0.3 0',
        insets: [{
            area: '37630',
            parent: '37',
            polygons: [1, 2],
            offset: [-1.1, NaN],
            frame: '0.05 0.1',
            border: '0.02 -0.2 -0.1 0.6h 0 h+0.2'
        }],
        dokdo: 0.2
    },
    ...
    series: [{
            type: 'map',
            name: '행정구역경계(시도)',
            tooltipText: '<b>${s_name}</b><br/>초미세먼지: ${pm2_5}',
            mapKeys: 'name',
            valueField: 'pm2_5',
            data: datas,
            visibleInLegend: false,
            style: {
                opacity: 1
            },
            hoverStyle: {
                stroke: 'white',
                fill: 'inherit',
                opacity: 0.8
            }
        },
    ...
}
 
chart = await RealMap.createChartAsync(document, 'realmap', config, true);