리얼맵 연동하기

const config = {
  title: false,
  asset: [
      {
          type: 'pattern',
          id: 'pattern-3',
          pattern: 3,
          style: {
              fill: '#F87986',
          },
          backgroundStyle: {
              fill: '#FFE8E2',
          },
      },
  ],
  map: [
      {
          url: "./maps/world-high.geo.json",
          exclude: ['ATA', 'GRL'],
      },
  ],
  body: {
      projection: 'mercator',
      zoomable: true,
  },
  annotations: [
      {
          front: true,
          type: 'shape',
          shape: 'rectangle',
          offsetX: 20,
          offsetY: 20,
          width: 10,
          height: 28,
          style: {
              fill: '#83A8DC',
          },
      },
      {
          front: true,
          type: 'text',
          text: 'Main economic indicators',
          offsetX: 40,
          offsetY: 20,
          height: 28,
          style: {
              fontSize: '15pt',
              fontWeight: 700,
          },
      },
  ],
  colorScale: {
      location: 'right',
      valueField: 'gdpGrowth',
      // -20.1115759693272 75.0613769262435
      minValue: -25,
      minColor: '#ff5757',
      maxColor: '#78a9e2',
      steps: [
          { from: -25, to: -10, color: '#ff5757' },
          { from: -10, to: 0, color: '#ffc0c0' },
          { from: 0, to: 1, color: '#f2f6fc' },
          { from: 1, to: 3, color: '#c9dcf4' },
          { from: 3, to: 5, color: '#a4c6ec' },
          { from: 5, color: '#78a9e2' },
      ],
  },
  series: [
      {
          mapKeys: ['iso-a3', 'countryCode'],
          dataUrl: '/data/world-economic2.json',
          hoverColor: '#f2f6fc',
          tooltipText:
              '<t style="font-weight: bold;">${name}(${gdpGrowth})</t>',
          style: {
              stroke: '#000',
              strokeWidth: 0.5,
              cursor: 'pointer'
          },
          onPointClick: (args) => {
              const point = chart.seriesByType('map').pointByProp('iso-a3', args.source.countryCode);
 
              if (window.prevPoint2) {
                  window.prevPoint2.setSelected(false);
              }
 
             // const { grid: { gridView, provider } } = window;
 
              point.setSelected(true);
              chart.render();
 
              window.prevPoint2 = point;
 
              const { countryCode } = args.source;
 
              const searchResult = gridView.searchCell({
                  value: countryCode,
                  fields: dataProvider.getOrgFieldNames(),
              });
 
              gridView.setSelection({
                  style: 'singleRow',
                  startItem: searchResult.itemIndex,
                  endItem: searchResult.itemIndex,
              });
          },
      },
  ],
  exporting: {
      visible: true,
  },
};
 
var dataProvider, gridContainer, gridView, chart;
 
 async function createGrid(container) {
    chart = await RealMap.createChartAsync(document, 'realmap', config, true);
    ...