How can I help you?
Legend in React Maps component
20 Feb 202624 minutes to read
This section shows how to add legends in the Maps component. The below video demonstrates the same.
A Legend is a key on a Maps that contains descriptions for swatches of symbols. It can be represented in various colors, shapes or other identifiers based on the data and provides valuable information for interpreting what the Maps are displaying. It explains what each symbol in the Maps represents. Legends are enabled by setting the visible property of legendSettings property to true.
Positioning of the legend
The legend can be positioned in the following two ways:
- Absolute position
- Dock position
Absolute position
The legend can be positioned at specific coordinates using the location property in the legendSettings, based on the X and Y axis values. For positioning the legend using absolute coordinates, set the position property to Float.
Dock position
Legends can be docked to specific locations within the map container. The position property in legendSettings is used to set these options.
- Top
- Left
- Bottom
- Right
Each of these four positions can be further aligned using Near, Center, or Far through the alignment property in legendSettings. This provides 12 possible alignment combinations for precise legend placement.
import { world_map } from 'world-map.ts';
import { uncountries } from 'data.ts'
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, Legend } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent legendSettings={ {
visible: true,
position: 'Top',
alignment: 'Near'
} } >
<Inject services={[Legend]} />
<LayersDirective>
<LayerDirective shapeData={world_map} shapeDataPath='Country' shapePropertyPath='name' dataSource={uncountries}
shapeSettings={ {
colorValuePath: 'Membership',
colorMapping: [
{ value: 'Permanent', color: '#D84444' },
{ value: 'Non-Permanent', color: '#316DB5'}
]
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import { world_map } from 'world-map.ts';
import { uncountries } from 'data.ts'
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, Legend } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent legendSettings={ {
visible: true,
position: 'Top',
alignment: 'Near'
} } >
<Inject services={[Legend]} />
<LayersDirective>
<LayerDirective shapeData={world_map} shapeDataPath='Country' shapePropertyPath='name' dataSource={uncountries}
shapeSettings={ {
colorValuePath: 'Membership',
colorMapping: [
{ value: 'Permanent', color: '#D84444' },
{ value: 'Non-Permanent', color: '#316DB5'}
]
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Legend modes
Legends support two display modes: Default mode and Interactive mode.
Default mode
Default mode legends having symbols with legend labels, used to identify the shape or bubble or marker color. To enable this option by setting the mode property of legendSettings as Default.
Interactive mode
Interactive mode enhances user experience by displaying an arrow pointer that indicates the exact range color in the legend when hovering over corresponding map shapes. Enable this mode by setting the mode property of legendSettings as Interactive. The invertedPointer property controls the visibility of the inverted pointer in the interactive legend.
import { world_map } from 'world-map.ts';
import { uncountries } from 'data.ts'
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, Legend } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent legendSettings={ {
visible: true,
mode: 'Interactive',
invertedPointer: true
} } >
<Inject services={[Legend]} />
<LayersDirective>
<LayerDirective shapeData={world_map} shapeDataPath='Country' shapePropertyPath='name' dataSource={uncountries}
shapeSettings={ {
colorValuePath: 'Membership',
colorMapping: [
{ value: 'Permanent', color: '#D84444' },
{ value: 'Non-Permanent', color: '#316DB5'}
]
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import { world_map } from 'world-map.ts';
import { uncountries } from 'data.ts'
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, Legend } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent legendSettings={ {
visible: true,
mode: 'Interactive',
invertedPointer: true
} } >
<Inject services={[Legend]} />
<LayersDirective>
<LayerDirective shapeData={world_map} shapeDataPath='Country' shapePropertyPath='name' dataSource={uncountries}
shapeSettings={ {
colorValuePath: 'Membership',
colorMapping: [
{ value: 'Permanent', color: '#D84444' },
{ value: 'Non-Permanent', color: '#316DB5'}
]
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Legend for shapes
Legends for map shapes can be generated from various color mapping types, including equal color mapping, range color mapping, and desaturation color mapping. The following data source demonstrates permanent and non-permanent member countries in the UN Security Council.
The following code snippet demonstrates how to configure equal color mapping legends for shapes. Bind the data source to the dataSource property of layerSettings. Set the value of shapePropertyPath to name and shapeDataPath to Country. Configure equal color mapping by setting the colorMapping as an array in shapeSettings. Finally, enable the legend by setting the visible property of legendSettings to true. The label property in colorMapping is used to define the text displayed in the legend.
import { world_map } from 'world-map.ts';
import { uncountries } from 'data.ts'
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, Legend } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent legendSettings={ { visible: true } } >
<Inject services={[Legend]} />
<LayersDirective>
<LayerDirective shapeData={world_map} shapeDataPath='Country' shapePropertyPath='name' dataSource={uncountries}
shapeSettings={ {
colorValuePath: 'Membership',
colorMapping: [
{ value: 'Permanent', color: '#D84444' },
{ value: 'Non-Permanent', color: '#316DB5'}
]
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import { world_map } from 'world-map.ts';
import { uncountries } from 'data.ts'
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, Legend } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent legendSettings={ { visible: true } } >
<Inject services={[Legend]} />
<LayersDirective>
<LayerDirective shapeData={world_map} shapeDataPath='Country' shapePropertyPath='name' dataSource={uncountries}
shapeSettings={ {
colorValuePath: 'Membership',
colorMapping: [
{ value: 'Permanent', color: '#D84444' },
{ value: 'Non-Permanent', color: '#316DB5'}
]
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Legend shape
The Maps component supports various legend shape types to match different visualization needs. Use the shape property in the legendSettings to specify the desired shape.
Available legend shapes:
- Circle
- Rectangle
- Triangle
- Diamond
- Cross
- Star
- HorizontalLine
- VerticalLine
- Pentagon
- InvertedTriangle
Customize legend shape dimensions and appearance using the shapeWidth, shapeHeight, shapeBorder and shapePadding properties.
Customization
The legend appearance and behavior can be extensively customized using the following properties in legendSettings.
Appearance properties:
-
background- To customize the background color of the Legend. -
border- To customize the color, width and opacity of the border for the Legend. -
fill- To apply the color for the Legend. -
labelDisplayMode- To customize the display mode for the Legend text. -
labelPosition- To customize the position of the Legend text. -
orientation- To customize the orientation of the Legend. -
textStyle- To customize the text style for Legend. -
title- To apply the title for the Legend. -
titleStyle- To customize the style of the title for the Legend. -
height- To customize the height of the Legend. -
width- To customize the width of the Legend. -
opacity- To apply the opacity to the Legend.
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, Legend } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent legendSettings={ {
visible: true,
background: 'green',
border: {
color: 'blue',
width: 2
},
fill: 'orange',
labelPosition: 'Before',
orientation: 'Vertical',
textStyle: {
size: '12px',
color: 'red',
fontStyle: 'italic'
},
title: {
description: 'Legend title',
text: 'Legend'
},
titleStyle: {
size: '12px',
color: '#d6e341',
fontStyle: 'italic'
}
} } >
<Inject services={[Legend]} />
<LayersDirective>
<LayerDirective shapeData={world_map} shapeDataPath='Country' shapePropertyPath='name' dataSource={[
{ "Country": "China", "Membership": "Permanent" },
{ "Country": "France", "Membership": "Permanent" },
{ "Country": "Russia", "Membership": "Permanent" },
{ "Country": "Kazakhstan", "Membership": "Non-Permanent" },
{ "Country": "Poland", "Membership": "Non-Permanent" },
{ "Country": "Sweden", "Membership": "Non-Permanent" }
]}
shapeSettings={ {
colorValuePath: 'Membership',
colorMapping: [
{ value: 'Permanent', color: '#D84444' },
{ value: 'Non-Permanent', color: '#316DB5' }]
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, Legend } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent legendSettings={ {
visible: true,
background: 'green',
border: {
color: 'blue',
width: 2
},
fill: 'orange',
labelPosition: 'Before',
orientation: 'Vertical',
textStyle: {
size: '12px',
color: 'red',
fontStyle: 'italic'
},
title: {
description: 'Legend title',
text: 'Legend'
},
titleStyle: {
size: '12px',
color: '#d6e341',
fontStyle: 'italic'
}
} } >
<Inject services={[Legend]} />
<LayersDirective>
<LayerDirective shapeData={world_map} shapeDataPath='Country' shapePropertyPath='name' dataSource={[
{ "Country": "China", "Membership": "Permanent" },
{ "Country": "France", "Membership": "Permanent" },
{ "Country": "Russia", "Membership": "Permanent" },
{ "Country": "Kazakhstan", "Membership": "Non-Permanent" },
{ "Country": "Poland", "Membership": "Non-Permanent" },
{ "Country": "Sweden", "Membership": "Non-Permanent" }
]}
shapeSettings={ {
colorValuePath: 'Membership',
colorMapping: [
{ value: 'Permanent', color: '#D84444' },
{ value: 'Non-Permanent', color: '#316DB5' }]
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Legend for items excluded from color mapping
Legends can display items that fall outside the defined color mapping ranges. This is useful when the data contains values that do not match any specified color mapping criteria. Use the color property in colorMappingto assign colors to these excluded items. The following example uses population_density data that demonstrates the population density of various countries.
export let population_density = [
https://ej2.syncfusion.com/react/documentation.
{
'code': 'AE',
'value': 90,
'name': 'United Arab Emirates',
'population': 8264070,
'density': 99
},
{
'code': 'GB',
'value': 257,
'name': 'United Kingdom',
'population': 62041708,
'density': 255
},
{
'code': 'US',
'value': 34,
'name': 'United States',
'population': 325020000,
'density': 33
}
...
];The following example demonstrates how to display legends for items excluded from color mapping. In this example, color mapping is configured for density values ranging from 0 to 200. Any records with values outside this range will not match the defined color mappings. To assign a color to these excluded items, set only the color property in the colorMapping without specifying range values. Enable the legend by setting the visible property of legendSettings to true.
import { world_map } from 'world-map.ts';
import { uncountries } from 'data.ts'
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, Legend } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent legendSettings={ { visible: true } } >
<Inject services={[Legend]} />
<LayersDirective>
<LayerDirective shapeData={world_map} shapeDataPath='Country' shapePropertyPath='name' dataSource={uncountries}
shapeSettings={ {
colorValuePath: 'Membership',
colorMapping: [
{ from: 0, to: 100, color: 'rgb(153,174,214)' },
{ from: 101, to: 200, color: 'rgb(115,143,199)' },
{ color: 'rgb(77,112,184)' }
]
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import { world_map } from 'world-map.ts';
import { uncountries } from 'data.ts'
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, Legend } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent legendSettings={ { visible: true } } >
<Inject services={[Legend]} />
<LayersDirective>
<LayerDirective shapeData={world_map} shapeDataPath='Country' shapePropertyPath='name' dataSource={uncountries}
shapeSettings={ {
colorValuePath: 'Membership',
colorMapping: [
{ from: 0, to: 100, color: 'rgb(153,174,214)' },
{ from: 101, to: 200, color: 'rgb(115,143,199)' },
{ color: 'rgb(77,112,184)' }
]
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Hide desired legend items
Control the visibility of individual legend items using the showLegend in the colorMapping. Setting this property to false hides the corresponding legend item, while true keeps it visible. This is useful for simplifying legends by removing unnecessary or redundant entries.
import { world_map } from 'world-map.ts';
import { uncountries } from 'data.ts'
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, Legend } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent legendSettings={ { visible: true } } >
<Inject services={[Legend]} />
<LayersDirective>
<LayerDirective shapeData={world_map} shapeDataPath='Country' shapePropertyPath='name' dataSource={uncountries}
shapeSettings={ {
colorValuePath: 'Membership',
colorMapping: [
{
from: 0, to: 100, color: 'rgb(153,174,214)', showLegend: true
},
{
from: 101, to: 200, color: 'rgb(115,143,199)', showLegend: false
},
{
color: 'rgb(77,112,184)', showLegend: false
}
]
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import { world_map } from 'world-map.ts';
import { uncountries } from 'data.ts'
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, Legend } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent legendSettings={ { visible: true } } >
<Inject services={[Legend]} />
<LayersDirective>
<LayerDirective shapeData={world_map} shapeDataPath='Country' shapePropertyPath='name' dataSource={uncountries}
shapeSettings={ {
colorValuePath: 'Membership',
colorMapping: [
{
from: 0, to: 100, color: 'rgb(153,174,214)', showLegend: true
},
{
from: 101, to: 200, color: 'rgb(115,143,199)', showLegend: false
},
{
color: 'rgb(77,112,184)', showLegend: false
}
]
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Hide legend items based on data source value
Legend item visibility can be controlled dynamically based on values in the data source. This allows data-driven control over which legend items appear. Bind the data source field that contains the visibility state to the showLegendPath property of the legendSettings to enable this functionality.
import { world_map } from 'world-map.ts';
import { dafaultData } from 'data.ts'
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, Legend } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent legendSettings={ { visible: true , showLegendPath: 'visibility'} } >
<Inject services={[Legend]} />
<LayersDirective>
<LayerDirective shapeData={world_map} shapeDataPath='continent' shapePropertyPath='continent' dataSource={dafaultData}
shapeSettings={ {
colorValuePath: 'color',
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import { world_map } from 'world-map.ts';
import { dafaultData } from 'data.ts'
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, Legend } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent legendSettings={ { visible: true , showLegendPath: 'visibility'} } >
<Inject services={[Legend]} />
<LayersDirective>
<LayerDirective shapeData={world_map} shapeDataPath='continent' shapePropertyPath='continent' dataSource={dafaultData}
shapeSettings={ {
colorValuePath: 'color',
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Binding legend item text from data source
Display dynamic legend text based on data source values using the valuePath property in the legendSettings. This property binds a field from the data source to the legend text, allowing for data-driven legend labels.
import { world_map } from 'world-map.ts';
import { dafaultData } from 'data.ts'
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, Legend } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent legendSettings={ { visible: true , valuePath: 'continent' } } >
<Inject services={[Legend]} />
<LayersDirective>
<LayerDirective shapeData={world_map} shapeDataPath='continent' shapePropertyPath='continent' dataSource={dafaultData}
shapeSettings={ {
colorValuePath: 'color',
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import { world_map } from 'world-map.ts';
import { dafaultData } from 'data.ts'
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, Legend } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent legendSettings={ { visible: true , valuePath: 'continent' } } >
<Inject services={[Legend]} />
<LayersDirective>
<LayerDirective shapeData={world_map} shapeDataPath='continent' shapePropertyPath='continent' dataSource={dafaultData}
shapeSettings={ {
colorValuePath: 'color',
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Hide duplicate legend items
To hide the duplicate legend items in Maps, set the removeDuplicateLegend property to true in the legendSettings.
import { world_map } from 'world-map.ts';
import { dafaultData } from 'data.ts'
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, Legend } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent legendSettings={ { visible: true, valuePath: 'continent', removeDuplicateLegend: true} } >
<Inject services={[Legend]} />
<LayersDirective>
<LayerDirective shapeData={world_map} shapeDataPath='continent' shapePropertyPath='continent' dataSource={dafaultData}
shapeSettings={ {
colorValuePath: 'color',
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import { world_map } from 'world-map.ts';
import { dafaultData } from 'data.ts'
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, Legend } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent legendSettings={ { visible: true, valuePath: 'continent', removeDuplicateLegend: true} } >
<Inject services={[Legend]} />
<LayersDirective>
<LayerDirective shapeData={world_map} shapeDataPath='continent' shapePropertyPath='continent' dataSource={dafaultData}
shapeSettings={ {
colorValuePath: 'color',
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Toggle option in legend
The toggle feature allows users to interactively show or hide map elements by clicking legend items. When a legend item is toggled, the corresponding map shapes change appearance to indicate their toggled state. Enable legend toggling by setting the enable property of the toggleLegendSettings to true.
The following properties customize the appearance of toggled Maps elements:
-
applyShapeSettings– To apply thefillproperty value to the shape of the Maps when toggling the legend items. -
fill- To apply the color to the shape of the Maps for which legend item is toggled. -
opacity– To customize the transparency for the shapes for which legend item is toggled. -
border– To customize the color, width and opacity of the border of the shapes in Maps.
import { world_map } from 'world-map.ts';
import { population_density } from 'data.ts'
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, Legend } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent legendSettings={ { visible: true, toggleLegendSettings: { enable: true } } } >
<Inject services={[Legend]} />
<LayersDirective>
<LayerDirective shapeData={world_map} shapeDataPath='name' shapePropertyPath='name'
dataSource={population_density}
shapeSettings={ {
colorValuePath: 'density',
colorMapping: [
{
from: 0, to: 100, color: 'rgb(153,174,214)',
},
{
from: 101, to: 200, color: 'rgb(115,143,199)',
},
{
color: 'rgb(77,112,184)'
}
]
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import { world_map } from 'world-map.ts';
import { population_density } from 'data.ts'
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, Legend } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent legendSettings={ { visible: true, toggleLegendSettings: { enable: true } } } >
<Inject services={[Legend]} />
<LayersDirective>
<LayerDirective shapeData={world_map} shapeDataPath='name' shapePropertyPath='name'
dataSource={population_density}
shapeSettings={ {
colorValuePath: 'density',
colorMapping: [
{
from: 0, to: 100, color: 'rgb(153,174,214)',
},
{
from: 101, to: 200, color: 'rgb(115,143,199)',
},
{
color: 'rgb(77,112,184)'
}
]
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Enable Legend for bubbles
Display a legend for bubble visualizations by setting the visible property of legendSettings to true and the type property of legendSettings to Bubbles. This creates legend entries that represent the bubble data categories or value ranges.
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject } from '@syncfusion/ej2-react-maps';
import { BubblesDirective, BubbleDirective, Bubble, Legend } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent legendSettings= >
<Inject services={[Bubble, Legend]}/>
<LayersDirective>
<LayerDirective shapeData={world_map} shapeDataPath="name" shapePropertyPath="name">
<BubblesDirective>
<BubbleDirective visible={true}
valuePath="population"
colorValuePath="color"
dataSource= {[
{ color: 'green', name: 'India', population: '38332521' },
{ color: 'purple', name: 'New Zealand', population: '19651127' },
{ color: 'blue', name: 'Pakistan', population: '3090416' }
]}
minRadius={20} maxRadius={40} />
</BubblesDirective>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject } from '@syncfusion/ej2-react-maps';
import { BubblesDirective, BubbleDirective, Bubble, Legend } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent legendSettings= >
<Inject services={[Bubble, Legend]}/>
<LayersDirective>
<LayerDirective shapeData={world_map} shapeDataPath="name" shapePropertyPath="name">
<BubblesDirective>
<BubbleDirective visible={true}
valuePath="population"
colorValuePath="color"
dataSource= {[
{ color: 'green', name: 'India', population: '38332521' },
{ color: 'purple', name: 'New Zealand', population: '19651127' },
{ color: 'blue', name: 'Pakistan', population: '3090416' }
]}
minRadius={20} maxRadius={40} />
</BubblesDirective>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Enable legend for markers
Enable marker legends by setting the visible property of legendSettings to true and the type property of legendSettings to Markers. The legendText property in the markerSettings to define legend text based on data source values, providing clear identification for different marker categories.
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, MarkersDirective, Legend,MarkerDirective, Marker, Inject } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent legendSettings= >
<Inject services={[Marker, Legend]} />
<LayersDirective>
<LayerDirective shapeData={world_map}>
<MarkersDirective>
<MarkerDirective
visible={true}
legendText= 'city'
dataSource={[
{ latitude: 37.0000, longitude: -120.0000, city: 'California' },
{ latitude: 40.7127, longitude: -74.0059, city: 'New York' },
{ latitude: 42, longitude: -93, city: 'Iowa' }
]}>
</MarkerDirective>
</MarkersDirective>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, MarkersDirective, Legend,MarkerDirective, Marker, Inject } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent legendSettings= >
<Inject services={[Marker, Legend]} />
<LayersDirective>
<LayerDirective shapeData={world_map}>
<MarkersDirective>
<MarkerDirective
visible={true}
legendText= 'city'
dataSource={[
{ latitude: 37.0000, longitude: -120.0000, city: 'California' },
{ latitude: 40.7127, longitude: -74.0059, city: 'New York' },
{ latitude: 42, longitude: -93, city: 'Iowa' }
]}>
</MarkerDirective>
</MarkersDirective>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Map marker shape to legend shape
Match the legend item shape with the actual marker shape displayed on the map by setting the useMarkerShape property to true in the legendSettings property. This creates a consistent visual relationship between markers and their legend representations, improving map readability.
import { world_map } from 'world-map.ts';
import { markerDataSource } from 'markerdata.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, MarkersDirective, Legend, MarkerDirective, Marker, Inject } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent
legendSettings={{
visible: true,
type: 'Markers',
useMarkerShape: true,
toggleLegendSettings: {
enable: true,
applyShapeSettings: false,
border: {
color: 'green',
width: 2,
},
},
}}
>
<Inject services={[Marker, Legend]} />
<LayersDirective>
<LayerDirective
shapeData={world_map}
shapeSettings={{
fill: '#E5E5E5',
}}
>
<MarkersDirective>
<MarkerDirective
visible={true}
dataSource={markerDataSource}
colorValuePath="color"
shapeValuePath="shape"
legendText="country"
></MarkerDirective>
</MarkersDirective>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import { world_map } from 'world-map.ts';
import { markerDataSource } from 'markerdata.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, MarkersDirective, Legend, MarkerDirective, Marker, Inject } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent
legendSettings={{
visible: true,
type: 'Markers',
useMarkerShape: true,
toggleLegendSettings: {
enable: true,
applyShapeSettings: false,
border: {
color: 'green',
width: 2,
},
},
}}
>
<Inject services={[Marker, Legend]} />
<LayersDirective>
<LayerDirective
shapeData={world_map}
shapeSettings={{
fill: '#E5E5E5',
}}
>
<MarkersDirective>
<MarkerDirective
visible={true}
dataSource={markerDataSource}
colorValuePath="color"
shapeValuePath="shape"
legendText="country"
></MarkerDirective>
</MarkersDirective>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);