How to visualize real-time data via multiple maps using React Maps component?
You can render multiple maps with real-time data using React Maps by setting unique id names to each Maps component. This section will explain how to visualize real-time data via multiple maps using the React Maps component.
In the following example, we have displayed multiple maps inside the panels of the dashboard layout by providing different id names to each Maps component. Each Maps component can have different data sources, which can be used to display different legends and color mapping. The below example shows the populations of different regions in Ireland for different years with legends. Additionally, it provides an attractive way to view demographic changes over time in Ireland with its interactive features.
The below code example demonstrates how to visualize real-time data via multiple maps using React Maps component:
index.js
import { createRoot } from 'react-dom/client';
import './index.css';
import * as React from 'react';
import { ireland } from './ireland.ts';
import { useRef } from 'react';
import {
MapsComponent,
LayersDirective,
LayerDirective,
Inject,
Zoom,
Legend,
} from '@syncfusion/ej2-react-maps';
import {
DashboardLayoutComponent,
PanelsDirective,
PanelDirective,
} from '@syncfusion/ej2-react-layouts';
const Default = () => {
const dashboardObj = useRef(null);
const cellSpace = [5, 5];
const mapIds = ['map_one', 'map_two', 'map_three', 'map_four'];
const mapTitles = ['1961', '1981', '2002', '2022'];
const dataSources = [
[
{
value: 90,
name: 'Waterford',
population: 8264070,
density: 99,
},
{
value: 257,
name: 'Tipperary',
population: 62041708,
density: 255,
},
{
value: 34,
name: 'Sligo',
population: 325020000,
density: 33,
},
],
[
{
value: 90,
name: 'Roscommon',
population: 8264070,
density: 99,
},
{
value: 257,
name: 'Offaly',
population: 62041708,
density: 255,
},
{
value: 34,
name: 'Monaghan',
population: 325020000,
density: 33,
},
],
[
{
value: 90,
name: 'Meath',
population: 8264070,
density: 99,
},
{
value: 257,
name: 'Mayo',
population: 62041708,
density: 255,
},
{
value: 34,
name: 'Louth',
population: 325020000,
density: 33,
},
],
[
{
value: 90,
name: 'Longford',
population: 8264070,
density: 99,
},
{
value: 257,
name: 'Limerick',
population: 62041708,
density: 255,
},
{
value: 34,
name: 'Leitrim',
population: 325020000,
density: 33,
},
],
];
const onPanelResize = (args) => {
if (
args.element &&
args.element.querySelector('.e-panel-container .e-panel-content div div')
) {
let mapObj = args.element.querySelector(
'.e-panel-container .e-panel-content div div'
).ej2_instances[0];
mapObj.height = '100%';
mapObj.width = '100%';
mapObj.refresh();
}
};
const mapTemplate = (index) => {
return (
<div className="map_container">
<MapsComponent
width="100%"
height="100%"
titleSettings={{
text: mapTitles[index],
textStyle: {
color: 'black',
fontStyle: 'bold',
fontWeight: 'bold',
fontFamily: 'arial',
size: '14px',
},
alignment: 'Center',
}}
legendSettings={{
visible: true,
mode: 'Interactive',
invertedPointer: true,
}}
zoomSettings={{
enable: true,
toolbarSettings: {
orientation: 'Vertical',
buttonSettings: {
toolbarItems: ['ZoomIn', 'ZoomOut'],
},
tooltipSettings: {
visible: false,
borderWidth: 2,
borderColor: 'green',
fontColor: 'black',
fill: 'violet',
fontFamily: 'Times New Roman',
fontWeight: 200,
fontSize: '22px',
fontOpacity: 1,
},
},
}}
>
<Inject services={[Zoom, Legend]} />
<LayersDirective>
<LayerDirective
shapeData={ireland}
shapeDataPath="name"
shapePropertyPath="NAME_1"
dataSource={dataSources[index]}
shapeSettings={{
colorValuePath: 'density',
fill: '#FDF2B0',
border: {
color: '#F2EBC7',
width: 1,
},
colorMapping: [
{
from: 0,
to: 100,
color: '#FC8B3B',
label: '0',
},
{
from: 100,
to: 500,
color: '#FEBA55',
label: '500',
},
{
from: 500,
to: 1000,
color: '#FF782F',
label: '1000',
},
{
from: 1000,
to: 1500,
color: '#FEE185',
label: '1500',
},
],
}}
></LayerDirective>
</LayersDirective>
</MapsComponent>
</div>
);
};
return (
<div>
<div
style={{
fontSize: '22px',
fontWeight: 'bold',
fontStyle: 'bold',
textAlign: 'center',
}}
>
Historical population of Ireland from 1961 to 2022
</div>
<div
style={{
fontSize: '12px',
fontWeight: 'bold',
fontStyle: 'bold',
textAlign: 'center',
}}
>
Source: <a href="https://en.wikipedia.org/wiki/Main_Page">Wikipedia</a>
</div>
<div id="default_target" className="control-section">
<DashboardLayoutComponent
id="api_dashboard"
columns={4}
resizeStop={onPanelResize.bind(this)}
cellSpacing={cellSpace}
ref={dashboardObj}
allowResizing={true}
>
<PanelsDirective>
{mapIds.map((id, index) => (
<PanelDirective
key={id}
content={() => mapTemplate(index)}
sizeX={2}
sizeY={2}
row={index % 2 === 0 ? index : index - 1}
col={index % 2 === 0 ? 0 : 2}
/>
))}
</PanelsDirective>
</DashboardLayoutComponent>
</div>
</div>
);
};
export default Default;
const root = createRoot(document.getElementById('sample'));
root.render(<Default />);
The following screenshot illustrates the output of the above code snippet.
View Sample 1 in Stackblitz
View Sample 2 in Stackblitz
Conclusion
I hope you enjoyed learning how to visualize real-time data via multiple maps using React Maps component.
You can refer to our React Maps feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React Maps example to understand how to create and visualize data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!
