HelpBot Assistant

How can I help you?

Legend in EJ2 TypeScript Maps component

6 Feb 202624 minutes to read

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 to true. To render Legend in Maps, the Legend module must be injected into the Maps using the Maps.Inject(Legend) method. Refer to the below code snippet to inject the Legend module into the Maps component.

import { Maps, Legend } from '@syncfusion/ej2-maps';
Maps.Inject(Legend);
let map: Maps = new Maps({ });

Legend modes

Legends support two display modes: Default mode and Interactive mode.

Default mode

Default mode legends display symbols with corresponding labels to identify shape, bubble, or marker colors. Enable this mode by setting the mode property of legendSettings to 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 to Interactive. The invertedPointer property controls the visibility of the inverted pointer in the interactive legend.

import { Maps, Legend } from '@syncfusion/ej2-maps';
import { world_map } from './world-map.ts';
Maps.Inject(Legend);
let map: Maps = new Maps({
    titleSettings: {
        text: 'USA Election Results'
    },
    layers: [
        {
            shapeData: world_map,
            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" }],
            shapePropertyPath: 'name',
            shapeDataPath: 'Country',
            shapeSettings: {
                colorValuePath: 'Membership',
                colorMapping: [
                    {  value: 'Permanent', color: '#D84444' },
                    { value: 'Non-Permanent', color: '#316DB5'}
                ]
            }
        }
    ],
    legendSettings: {
        visible: true,
        mode: 'Interactive',
        invertedPointer: true
    }
});
map.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Maps</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="world-map.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="height: 500px; width: 700px">
        <div id='element'></div>
    </div>

</body>

</html>

Positioning of the legend

The legend can be positioned in the following two ways:

  • Absolute position.

  • Dock position.

Absolute position

The legend of the Maps can be positioned using the location property in the legendSettings, which is based on the margin values of the X and Y axes. For positioning the legend based on margins corresponding to a Maps, the position property is set as 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 { Maps, Legend } from '@syncfusion/ej2-maps';
import { world_map } from './world-map.ts';
Maps.Inject(Legend);
let map: Maps = new Maps({
    titleSettings: {
        text: 'USA Election Results'
    },
    layers: [
        {
            shapeData: world_map,
            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" }],
            shapePropertyPath: 'name',
            shapeDataPath: 'Country',
            shapeSettings: {
                colorValuePath: 'Membership',
                colorMapping: [
                    {  value: 'Permanent', color: '#D84444' },
                    { value: 'Non-Permanent', color: '#316DB5'}
                ]
            }
        }
    ],
    legendSettings: {
        visible: true,
        position: 'Top',
        alignment: 'Near'
    }
});
map.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Maps</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="world-map.js"></script>

    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="height: 500px; width: 700px">
        <div id='element'></div>
    </div>

</body>

</html>

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.

export let unCountries: object[] = [
{ Country: 'China', Membership: 'Permanent' },
{ Country: 'France', Membership: 'Permanent' },
{ Country: 'Russia', Membership: 'Permanent' },
{ Country: 'United Kingdom', Membership: 'Permanent' },
{ Country: 'United States', Membership: 'Permanent' },
{ Country: 'Bolivia', Membership: 'Non-Permanent' },
{ Country: 'Eq. Guinea', Membership: 'Non-Permanent' },
{ Country: 'Ethiopia', Membership: 'Non-Permanent' },
{ Country: "Côte d'Ivoire", Membership: 'Permanent' },
{ Country: 'Kazakhstan', Membership: 'Non-Permanent' },
{ Country: 'Kuwait', Membership: 'Non-Permanent' },
{ Country: 'Netherlands', Membership: 'Non-Permanent' },
{ Country: 'Peru', Membership: 'Non-Permanent' },
{ Country: 'Poland', Membership: 'Non-Permanent' },
{ Country: 'Sweden', Membership: 'Non-Permanent' },
];

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 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 { Maps, Legend } from '@syncfusion/ej2-maps';
import { world_map } from './world-map.ts';
Maps.Inject(Legend);
let map: Maps = new Maps({
    titleSettings: {
        text: 'USA Election Results'
    },
    layers: [
        {
            shapeData: world_map,
            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" }
            ],
            shapePropertyPath: 'name',
            shapeDataPath: 'Country',
            shapeSettings: {
                colorValuePath: 'Membership',
                colorMapping: [
                    { value: 'Permanent', color: '#D84444' },
                    { value: 'Non-Permanent', color: '#316DB5'}
                ]
            }
        }
    ],
    legendSettings: {
        visible: true
    }
});
map.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Maps</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="world-map.js"></script>

    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="height: 500px; width: 700px">
        <div id='element'></div>
    </div>

</body>

</html>

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 { Maps, Legend } from '@syncfusion/ej2-maps';
import { world_map } from './world-map.ts';
Maps.Inject(Legend);
let map: Maps = new Maps({
    titleSettings: {
        text: 'USA Election Results'
    },
    layers: [
        {
            shapeData: world_map,
            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"}],
            shapePropertyPath: 'name',
            shapeDataPath: 'Country',
            shapeSettings: {
                colorValuePath: 'Membership',
                colorMapping: [
                {
                    value: 'Permanent', color: '#D84444'
                },
                {
                    value: 'Non-Permanent', color: '#316DB5'
                }]

            }
        }
    ],
    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'
        }
    }
});

 map.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Maps</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="world-map.js"></script>

    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="height: 500px; width: 700px">
        <div id='element'></div>
    </div>

</body>

</html>

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 colorMapping to 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 = [
    ...
    {
        '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 { Maps, Legend } from '@syncfusion/ej2-maps';
import { world_map } from './world-map.ts';
import { Population_Density } from './data.ts';
Maps.Inject(Legend);
let map: Maps = new Maps({
    legendSettings: {
        visible: true
    },
    layers: [{
        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)'
                },
            ]
        }
    }]
});

map.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Maps</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="world-map.js"></script>
    <script src="data.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="height: 500px; width: 700px">
        <div id='element'></div>
    </div>

</body>

</html>

Hide desired legend items

Control the visibility of individual legend items using the showLegend property 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 { Maps, Legend } from '@syncfusion/ej2-maps';
import { world_map } from './world-map.ts';
import { Population_Density } from './data.ts';
Maps.Inject(Legend);
let map: Maps = new Maps({
    legendSettings: {
        visible: true
    },
    layers: [{
        shapeData: world_map,
        shapeDataPath: 'name',
        shapePropertyPath: 'name',
        dataSource: Population_Density,
        shapeSettings: {
            colorValuePath: 'density',
            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
                }
            ]
        }
    }]
});

map.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Maps</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="world-map.js"></script>
    <script src="data.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="height: 500px; width: 700px">
        <div id='element'></div>
    </div>

</body>

</html>

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 { Maps, Legend } from '@syncfusion/ej2-maps';
import { world_map } from './world-map.ts';
import { default_data } from './data.ts';
Maps.Inject(Legend);
let map: Maps = new Maps({
    legendSettings: {
        visible: true,
        showLegendPath:'visibility'
    },
    layers: [{
        shapeData: world_map,
        shapeDataPath: 'continent',
        shapePropertyPath: 'continent',
        dataSource: default_data,
        shapeSettings:{
            colorValuePath:'color'
        }
    }]
});

map.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Maps</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="world-map.js"></script>
    <script src="data.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="height: 500px; width: 700px">
        <div id='element'></div>
    </div>

</body>

</html>

Bind 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 { Maps, Legend } from '@syncfusion/ej2-maps';
import { world_map } from './world-map.ts';
import { default_data } from './data.ts';
Maps.Inject(Legend);
let map: Maps = new Maps({
    legendSettings: {
        visible: true,
        valuePath:'continent'
    },
    layers: [{
        shapeData: world_map,
        shapeDataPath: 'continent',
        shapePropertyPath: 'continent',
        dataSource: default_data,
        shapeSettings: {
            colorValuePath:'color'
        }
    }]
});

map.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Maps</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="world-map.js"></script>
    <script src="data.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="height: 500px; width: 700px">
        <div id='element'></div>
    </div>

</body>

</html>

Hide duplicate legend items

To hide the duplicate legend items in Maps, set the removeDuplicateLegend property to true in the legendSettings.

import { Maps, Legend } from '@syncfusion/ej2-maps';
import { world_map } from './world-map.ts';
import { default_data } from './data.ts';
Maps.Inject(Legend);
let map: Maps = new Maps({
    legendSettings: {
        visible: true,
        valuePath: 'continent',
        removeDuplicateLegend: true
    },
    layers: [{
        shapeData: world_map,
        shapeDataPath: 'continent',
        shapePropertyPath: 'continent',
        dataSource: default_data,
        shapeSettings: {
            colorValuePath:'color'
        }
    }]
});

map.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Maps</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="world-map.js"></script>
    <script src="data.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="height: 500px; width: 700px">
        <div id='element'></div>
    </div>

</body>

</html>

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 are available to customize the toggle option in legend.

The following properties customize the appearance of toggled map elements:

  • applyShapeSettings – To apply the fill property value to the shape of the Maps when it is set to true.
  • 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 { Maps, Legend } from '@syncfusion/ej2-maps';
import { world_map } from './world-map.ts';
import { Population_Density } from './data.ts';
Maps.Inject(Legend);
let map: Maps = new Maps({
    legendSettings: {
        visible: true,
        toggleLegendSettings: {
            enable: true,
            applyShapeSettings: false,
            border: {
                color: 'green',
                width: 2
           }
        }
    },
    layers: [{
        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)'
                },
            ]
        }
    }]
});

map.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Maps</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="world-map.js"></script>
    <script src="data.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="height: 500px; width: 700px">
        <div id='element'></div>
    </div>
    
</body>

</html>

Enable legend for bubble

Display a legend for bubble visualizations by setting the visible property of legendSettings to true and the type property to Bubbles. This creates legend entries that represent the bubble data categories or value ranges.

import { world_map } from './world-map.ts';
import { Maps, Bubble, Legend} from '@syncfusion/ej2-maps';
Maps.Inject(Bubble, Legend);
let map: Maps = new Maps({
    legendSettings: {
        visible: true,
        type: 'Bubbles'
    },
    layers: [{
        shapeData: world_map,
        shapeDataPath: 'name',
        shapePropertyPath: 'name',
        bubbleSettings: [{
            visible: true,
            minRadius: 20,
            dataSource: [
                { color: 'green', name: 'India', population: '38332521' },
                { color: 'purple', name: 'New Zealand', population: '19651127' },
                { color: 'blue', name: 'Pakistan', population: '3090416' }
            ],
            maxRadius: 40,
            colorValuePath: 'color',
            valuePath: 'population'
        }]
    }]
});
map.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Maps</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="world-map.js"></script>
    <script src="data.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="height: 500px; width: 700px">
        <div id='element'></div>
    </div>

</body>

</html>

Enable legend for markers

Enable marker legends by setting the visible property of legendSettings to true and the type property to Markers. Use 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 { Maps, Marker, Legend} from '@syncfusion/ej2-maps';
Maps.Inject(Marker, Legend);
let map: Maps = new Maps({
    legendSettings: {
        visible: true,
        type: 'Markers'
    },
    layers: [{
        shapeData: world_map,
        markerSettings: [
            {
                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' }
                ]
            }
        ]
    }]
});
map.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Maps</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="world-map.js"></script>
    <script src="data.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="height: 500px; width: 700px">
        <div id='element'></div>
    </div>

</body>

</html>

Map marker shape to legend shape

To imitate or map the marker shape with its legend item shape, set the useMarkerShape property to true in the legendSettings property. Match the legend item shape with the actual marker shape displayed on the map by setting the useMarkerShape property to true in the legendSettings. 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 { Maps, Marker, Legend} from '@syncfusion/ej2-maps';
Maps.Inject(Marker, Legend);
let map: Maps = new Maps({
   legendSettings: {
    visible: true,
    type: 'Markers',
    useMarkerShape:true,
    toggleLegendSettings: {
      enable: true,
      applyShapeSettings: false,
      border: {
        color: 'green',
        width: 2
      }
    }
  },
  layers: [
    {
      shapeDataPath: 'name',
      shapePropertyPath: 'name',
      shapeData: world_map,
      shapeSettings: {
        fill: '#E5E5E5'
      },
      markerSettings: [
        {
          dataSource: markerDataSource,
          colorValuePath: 'color',
          shapeValuePath:'shape',
          legendText: 'country',
          visible: true
        }
      ]
    }
  ]
});
map.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Maps</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="world-map.js"></script>
    <script src="data.js"></script>
    <script src="markerdata.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container' style="height: 500px; width: 700px">
        <div id='element'></div>
    </div>

</body>

</html>