그리드 맵 데이터 연동
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);