
# Linking Real Maps

This is an example of linking RealGrid2 and [RealMap](https://www.realmap.co.kr/). 
Clicking on a region in the map chart selects the grid row, and conversely, clicking on a row in the grid selects the region.


```js
const config = {
  title: false,
  asset: [
    {
      type: 'pattern',
      id: 'pattern-3',
      pattern: 3,
      style: {
        fill: '#F87986',
      },
      backgroundStyle: {
        fill: '#FFE8E2',
      },
    },
  ],
  map: [
    {
      url: '/data/en/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',
    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/en/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);
        }
        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,
  },
};

const fields = [
  { fieldName: 'countryCode', dataType: 'text' },
  { fieldName: 'countryName', dataType: 'text' },
  { fieldName: 'gdp', dataType: 'number' },
  { fieldName: 'gdpGrowth', dataType: 'number' },
  { fieldName: 'gdpPerCapita', dataType: 'number' },
  { fieldName: 'currentAccount', dataType: 'number' },
  { fieldName: 'inflation', dataType: 'number' },
  { fieldName: 'unemployment', dataType: 'number' },
  { fieldName: 'industrialProduction', dataType: 'number' },
  { fieldName: 'exports', dataType: 'number' },
  { fieldName: 'imports', dataType: 'number' },
];

const columns = [
  { name: 'countryCode', fieldName: 'countryCode', header: { text: 'Country Code' }, width: 70 },
  { name: 'countryName', fieldName: 'countryName', header: { text: 'Country Name' }, width: 130 },
  { name: 'gdp', fieldName: 'gdp', header: { text: 'GDP' }, width: 130 },
  { name: 'gdpGrowth', fieldName: 'gdpGrowth', header: { text: 'GDP Growth' }, width: 70 },
  { name: 'gdpPerCapita', fieldName: 'gdpPerCapita', header: { text: 'GDP per Capita' }, width: 70 },
  { name: 'currentAccount', fieldName: 'currentAccount', header: { text: 'Current Account Balance' }, width: 70 },
  { name: 'inflation', fieldName: 'inflation', header: { text: 'Inflation Rate' }, width: 70 },
  { name: 'unemployment', fieldName: 'unemployment', header: { text: 'Unemployment Rate' }, width: 70 },
  { name: 'industrialProduction', fieldName: 'industrialProduction', header: { text: 'Industrial Production' }, width: 70 },
  { name: 'exports', fieldName: 'exports', header: { text: 'Export' }, width: 70 },
  { name: 'imports', fieldName: 'imports', header: { text: 'Import' }, width: 70 },
];

var dataProvider, gridView, chart;

async function createGrid(container) {
  dataProvider = new RealGrid.LocalDataProvider();
  gridView = new RealGrid.GridView(container);
  gridView.setDataSource(dataProvider);
  dataProvider.setFields(fields);
  gridView.setColumns(columns);

  gridView.displayOptions.emptyMessage = 'No data to display.';
  gridView.header.height = 40;
  gridView.displayOptions.rowHeight = 36;
  gridView.footer.height = 40;
  gridView.stateBar.width = 16;
  gridView.editOptions.insertable = true;
  gridView.editOptions.appendable = true;
  gridView.displayOptions.fitStyle = 'fill';
  gridView.displayOptions.selectionStyle = 'singleRow';

  fetch('/data/en/world-economic2.json')
    .then(response => response.json())
    .then(data => {
      dataProvider.setRows(data);
      gridView.refresh();
    });

  chart = await RealMap.createChartAsync(document, 'realmap', config, true);

  let prevSelection = null;
  gridView.onSelectionChanged = (_, clickData) => {
    const { startItem } = clickData;
    const code = gridView.getValue(startItem, 'countryCode');
    const point = chart.seriesByType('map').pointByProp('iso-a3', code);
    if (point) {
      if (prevSelection) {
        prevSelection.setSelected(false);
      }
      point.setSelected(true);
      prevSelection = point;
      chart.body.zoomToArea(point.area.id, 0.3);
    }
  };

  gridView.setEditOptions({
    editable: true,
    commitByCell: true,
  });

  gridView.orderBy('gdp', 'descending');

  dataProvider.onRowUpdated = (provider, row) => {
    const code = provider.getValue(row, 'countryCode');
    const gdpGrowth = provider.getValue(row, 'gdpGrowth');
    const mapSeries = chart.seriesByType('map');
    const point = mapSeries.pointByProp('iso-a3', code);
    point.updateValues(mapSeries, { gdpGrowth: gdpGrowth });
    chart.render();
  };
}

createGrid('realgrid');
```

```js
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);
    ...
```