Grid Map Data Integration
This demo helps you understand how to link RealGrid2's name value to a map area in RealMap (opens in a new tab).
Specify the geo.json data path using the map's URL.
Set the data used in the grid data to the series' data.
To link a map and series data, the default mapping is between the map's rm-id or id value and the series' id value.
To use a key value other than id, use the mapKeys property to specify the key values to link to the map 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);