구지도 리얼맵 연동하기

RealGrid2와 RealMap (opens in a new tab)을 연동한 예제입니다.
구 지도의 지역을 클릭하면 그리드 행이 선택되고, 반대로 그리드의 행을 클릭하면 해당 지역이 선택됩니다.
마우스 드래그를 통해 지도를 회전시킬 수 있습니다.
회색 영역은 데이터가 없는 영역이며 nullStyle로 빈 영역에 일괄로 스타일 적용이 가능합니다.

const config = {
    title: false,
    map: [{
        url: 'maps/world-low.geo.json'
    }],
    axis: {
        grid: true
    },
    annotations: [{
            front: true,
            type: 'shape',
            shape: 'rectangle',
            offsetX: 20,
            offsetY: 20,
            width: 10,
            height: 28,
            style: {
                fill: '#83A8DC'
            }
        },
        {
            front: true,
            type: 'text',
            text: '구 형태의 지도 회전',
            offsetX: 40,
            offsetY: 20,
            height: 28,
            style: {
                fontSize: '15pt',
                fontWeight: 700
            }
        }
    ],
    body: {
        projection: 'orthographic',
        zoomable: true,
        mapBackground: {}
    },
    series: [{
        dataUrl: "/data/world-economic2.json",
        useMapData: false,
        allAreas:true,
        idField: "countryCode",
        mapKeys:["iso-a3", "countryCode"],
        tooltipText: '<t style="font-size: 18px; font-weight: 700;"> ${countryName}</t><br/>GDP 성장: <t style="font-weight: 700;">${gdpGrowth}</t>',
        nullStyle:{
            fill: '#adb5bd'
        },
        style: {
            stroke: '#fff',
            fill: '#B4CBEF',
            strokeWidth: 0.7
        },
        hoverColor: '#83A8DC',
        pointLabel: false,
        onPointClick: (args) => {
            var point = chart.seriesByType('map').pointByProp('rm-id', args.source.countryCode);
            if (window.prevPoint2) {
                window.prevPoint2.setSelected(false);
            }
            chart.body.updateOptions({
                rotationX: -args.area.getCenter()[0],
                rotationY: -args.area.getCenter()[1]
            })
            
            point.setSelected(true);
            chart.render();
            window.prevPoint2 = point;
 
              const searchResult = gridView.searchCell({
                  value: args.source.countryCode,
                  fields: dataProvider.getOrgFieldNames()
              });
        }
    }]
};
 
var dataProvider, gridContainer, gridView, chart;
 
 async function createGrid(container) {
    chart = await RealMap.createChartAsync(document, 'realmap', config, true);
    ...

리얼맵 연동 🆕추천 설정