Gujido RealMap Linking
This is an example of linking RealGrid2 and RealMap (opens in a new tab). Clicking on an area of the old map selects the grid row, and conversely, clicking on a row of the grid selects the area. You can rotate the map by dragging the mouse. The gray area is an area without data, and you can apply styles to empty areas in bulk with 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: 'Rotate spherical map',
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 Growth: <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);
...