JavaScript (ES5)

Search results

Legend in JavaScript (ES5) Maps control

06 Jun 2023 / 8 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.

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 are positioned in the following locations within the container. The position property in legendSettings is used to set these options in Maps.

Top
Left
Bottom
Right

The above four positions can be aligned combination of Near, Center and Far using alignment property in legendSettings property. So, the legend can be aligned to 12 positions.

Source

Preview

index.js

index.html

var map = new ej.maps.Maps({
    titleSettings: {
        text: 'USA Election Results - 2016'
    },
    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="world-map.js"></script>
    <script src="usa.js"></script>
    <script src="data.js"></script>
    <script src="california.js"></script>
    <script src="texas.js"></script>
    <script src="africa_continent.js"></script>
    <script src="africa.js"></script>
    <script src="cluster.js"></script>
	<script src="markerdata.js"></script>
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="height: 500px; width: 700px">
        <div id="element"></div>
    </div>
    <svg height="150" width="400">
        <defs>
            <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" style="stop-color:#C5494B;stop-opacity:1"></stop>
                <stop offset="100%" style="stop-color:#4C134F;stop-opacity:1"></stop>
            </linearGradient>
        </defs>
    </svg>
    <!-- annotation content -->
    <div id="maps-annotation" style="display: none;">
        <div id="annotation">
            <div>
                <p style="margin-left:10px;font-size:13px;font-weight:500">Facts about Africa</p>
            </div>
            <hr style="margin-top:-3px;margin-bottom:10px;border:0.5px solid #DDDDDD">
            <div>
                <ul style="list-style-type:disc; margin-left:-20px;margin-bottom:2px; font-weight:400">
                    <li>Africa is the second largest and second most populated continent in the world.</li>
                    <li style="padding-top:5px;">Africa has 54 sovereign states and 10 non-sovereign territories.</li>
                    <li style="padding-top:5px;">Algeria is the largest country in Africa, where as Mayotte is the smallest.</li>
                </ul>
            </div>
        </div>
    </div>
    <div id="compass-maps" style="display: none;">
        <img src="templates/maps/how-to/annotation/compass.png" height="75px" width="75px">
    </div>
    <style>
        #annotation {
            color: #DDDDDD;
            font-size: 12px;
            font-family: Roboto;
            background: #3E464C;
            margin: 20px;
            padding: 10px;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
            width: 300px;
            -moz-box-shadow: 0px 2px 5px #666;
            -webkit-box-shadow: 0px 2px 5px #666;
            box-shadow: 0px 2px 5px #666;
        }
        .country-label {
            color: white;
            font-size: 25px;
        }
    </style>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Legend mode

Legend had two types of mode. 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

The legends can be made interactive with an arrow mark indicating the exact range color in the legend when the mouse hovers over the corresponding shapes. To enable this type of mode by setting the mode property of legendSettings as Interactive. The invertedPointer property is used to enable or disable the visibility of the inverted pointer in interactive legend in Maps.

Source

Preview

index.js

index.html

var map = new ej.maps.Maps({
    titleSettings: {
        text: 'USA Election Results - 2016'
    },
    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="world-map.js"></script>
    <script src="usa.js"></script>
    <script src="data.js"></script>
    <script src="california.js"></script>
    <script src="texas.js"></script>
    <script src="africa_continent.js"></script>
    <script src="africa.js"></script>
    <script src="cluster.js"></script>
	<script src="markerdata.js"></script>
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="height: 500px; width: 700px">
        <div id="element"></div>
    </div>
    <svg height="150" width="400">
        <defs>
            <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" style="stop-color:#C5494B;stop-opacity:1"></stop>
                <stop offset="100%" style="stop-color:#4C134F;stop-opacity:1"></stop>
            </linearGradient>
        </defs>
    </svg>
    <!-- annotation content -->
    <div id="maps-annotation" style="display: none;">
        <div id="annotation">
            <div>
                <p style="margin-left:10px;font-size:13px;font-weight:500">Facts about Africa</p>
            </div>
            <hr style="margin-top:-3px;margin-bottom:10px;border:0.5px solid #DDDDDD">
            <div>
                <ul style="list-style-type:disc; margin-left:-20px;margin-bottom:2px; font-weight:400">
                    <li>Africa is the second largest and second most populated continent in the world.</li>
                    <li style="padding-top:5px;">Africa has 54 sovereign states and 10 non-sovereign territories.</li>
                    <li style="padding-top:5px;">Algeria is the largest country in Africa, where as Mayotte is the smallest.</li>
                </ul>
            </div>
        </div>
    </div>
    <div id="compass-maps" style="display: none;">
        <img src="templates/maps/how-to/annotation/compass.png" height="75px" width="75px">
    </div>
    <style>
        #annotation {
            color: #DDDDDD;
            font-size: 12px;
            font-family: Roboto;
            background: #3E464C;
            margin: 20px;
            padding: 10px;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
            width: 300px;
            -moz-box-shadow: 0px 2px 5px #666;
            -webkit-box-shadow: 0px 2px 5px #666;
            box-shadow: 0px 2px 5px #666;
        }
        .country-label {
            color: white;
            font-size: 25px;
        }
    </style>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Legend for shapes

Legend for shapes can be generated from color mapping types such as equal color mapping, range color mapping and desaturation color mapping. Refer to the below data source which demonstrates the permanent and non-permanent countries in the UN security council.

export var 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 below code snippet demonstrate the equal color mapping legends for the shapes. To bind the given data source to the dataSource property of layerSettings. Set the value of shapePropertyPath to name and shapeDataPath to Country. To enable equal color mapping set the colorMapping as an array in shapeSettings. Finally, set the visible property of legendSettings as true. The label property in colorMapping property is used to set the text name for legend in Maps.

Source

Preview

index.js

index.html

var map = new ej.maps.Maps({
    titleSettings: {
        text: 'USA Election Results - 2016'
    },
    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="world-map.js"></script>
    <script src="usa.js"></script>
    <script src="data.js"></script>
    <script src="california.js"></script>
    <script src="texas.js"></script>
    <script src="africa_continent.js"></script>
    <script src="africa.js"></script>
    <script src="cluster.js"></script>
	<script src="markerdata.js"></script>
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="height: 500px; width: 700px">
        <div id="element"></div>
    </div>
    <svg height="150" width="400">
        <defs>
            <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" style="stop-color:#C5494B;stop-opacity:1"></stop>
                <stop offset="100%" style="stop-color:#4C134F;stop-opacity:1"></stop>
            </linearGradient>
        </defs>
    </svg>
    <!-- annotation content -->
    <div id="maps-annotation" style="display: none;">
        <div id="annotation">
            <div>
                <p style="margin-left:10px;font-size:13px;font-weight:500">Facts about Africa</p>
            </div>
            <hr style="margin-top:-3px;margin-bottom:10px;border:0.5px solid #DDDDDD">
            <div>
                <ul style="list-style-type:disc; margin-left:-20px;margin-bottom:2px; font-weight:400">
                    <li>Africa is the second largest and second most populated continent in the world.</li>
                    <li style="padding-top:5px;">Africa has 54 sovereign states and 10 non-sovereign territories.</li>
                    <li style="padding-top:5px;">Algeria is the largest country in Africa, where as Mayotte is the smallest.</li>
                </ul>
            </div>
        </div>
    </div>
    <div id="compass-maps" style="display: none;">
        <img src="templates/maps/how-to/annotation/compass.png" height="75px" width="75px">
    </div>
    <style>
        #annotation {
            color: #DDDDDD;
            font-size: 12px;
            font-family: Roboto;
            background: #3E464C;
            margin: 20px;
            padding: 10px;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
            width: 300px;
            -moz-box-shadow: 0px 2px 5px #666;
            -webkit-box-shadow: 0px 2px 5px #666;
            box-shadow: 0px 2px 5px #666;
        }
        .country-label {
            color: white;
            font-size: 25px;
        }
    </style>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Legend Shape

Maps supports the following types of legend shapes. The shape property in the legendSettings can be used to change the type of legend shapes.

Circle
Rectangle
Triangle
Diamond
Cross
Star
HorizontalLine
VerticalLine
Pentagon
InvertedTriangle

The shape of legends can be customized by using the shapeWidth,shapeHeight, shapeBorder and shapePadding properties.

Customization

The following properties are available in legend to customize the legend shape and legend text in Maps.

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.

Source

Preview

index.js

index.html

var map = new ej.maps.Maps({
    titleSettings: {
        text: 'USA Election Results - 2016'
    },
    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="world-map.js"></script>
    <script src="usa.js"></script>
    <script src="data.js"></script>
    <script src="california.js"></script>
    <script src="texas.js"></script>
    <script src="africa_continent.js"></script>
    <script src="africa.js"></script>
    <script src="cluster.js"></script>
	<script src="markerdata.js"></script>
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="height: 500px; width: 700px">
        <div id="element"></div>
    </div>
    <svg height="150" width="400">
        <defs>
            <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" style="stop-color:#C5494B;stop-opacity:1"></stop>
                <stop offset="100%" style="stop-color:#4C134F;stop-opacity:1"></stop>
            </linearGradient>
        </defs>
    </svg>
    <!-- annotation content -->
    <div id="maps-annotation" style="display: none;">
        <div id="annotation">
            <div>
                <p style="margin-left:10px;font-size:13px;font-weight:500">Facts about Africa</p>
            </div>
            <hr style="margin-top:-3px;margin-bottom:10px;border:0.5px solid #DDDDDD">
            <div>
                <ul style="list-style-type:disc; margin-left:-20px;margin-bottom:2px; font-weight:400">
                    <li>Africa is the second largest and second most populated continent in the world.</li>
                    <li style="padding-top:5px;">Africa has 54 sovereign states and 10 non-sovereign territories.</li>
                    <li style="padding-top:5px;">Algeria is the largest country in Africa, where as Mayotte is the smallest.</li>
                </ul>
            </div>
        </div>
    </div>
    <div id="compass-maps" style="display: none;">
        <img src="templates/maps/how-to/annotation/compass.png" height="75px" width="75px">
    </div>
    <style>
        #annotation {
            color: #DDDDDD;
            font-size: 12px;
            font-family: Roboto;
            background: #3E464C;
            margin: 20px;
            padding: 10px;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
            width: 300px;
            -moz-box-shadow: 0px 2px 5px #666;
            -webkit-box-shadow: 0px 2px 5px #666;
            box-shadow: 0px 2px 5px #666;
        }
        .country-label {
            color: white;
            font-size: 25px;
        }
    </style>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Legend for items excluded from color mapping

The legend can be enabled for items excluded from the color mapping using the color property in colorMapping property. Refer to the population_density data which demonstrates the population density of some countries.

export var 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 shows how to enable legend for items excluded from the color mapping. In the following example, color mapping is added for the ranges from 0 to 200. If there are any records in the data source that are outside of this range, the color mapping will not be applied. To apply the color for these excluded items, set the color property alone in the colorMapping. To enable legend for these items, set the visible property of legendSettings to true.

Source

Preview

index.js

index.html

var map = new ej.maps.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="world-map.js"></script>
    <script src="usa.js"></script>
    <script src="data.js"></script>
    <script src="california.js"></script>
    <script src="texas.js"></script>
    <script src="africa_continent.js"></script>
    <script src="africa.js"></script>
    <script src="cluster.js"></script>
	<script src="markerdata.js"></script>
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="height: 500px; width: 700px">
        <div id="element"></div>
    </div>
    <svg height="150" width="400">
        <defs>
            <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" style="stop-color:#C5494B;stop-opacity:1"></stop>
                <stop offset="100%" style="stop-color:#4C134F;stop-opacity:1"></stop>
            </linearGradient>
        </defs>
    </svg>
    <!-- annotation content -->
    <div id="maps-annotation" style="display: none;">
        <div id="annotation">
            <div>
                <p style="margin-left:10px;font-size:13px;font-weight:500">Facts about Africa</p>
            </div>
            <hr style="margin-top:-3px;margin-bottom:10px;border:0.5px solid #DDDDDD">
            <div>
                <ul style="list-style-type:disc; margin-left:-20px;margin-bottom:2px; font-weight:400">
                    <li>Africa is the second largest and second most populated continent in the world.</li>
                    <li style="padding-top:5px;">Africa has 54 sovereign states and 10 non-sovereign territories.</li>
                    <li style="padding-top:5px;">Algeria is the largest country in Africa, where as Mayotte is the smallest.</li>
                </ul>
            </div>
        </div>
    </div>
    <div id="compass-maps" style="display: none;">
        <img src="templates/maps/how-to/annotation/compass.png" height="75px" width="75px">
    </div>
    <style>
        #annotation {
            color: #DDDDDD;
            font-size: 12px;
            font-family: Roboto;
            background: #3E464C;
            margin: 20px;
            padding: 10px;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
            width: 300px;
            -moz-box-shadow: 0px 2px 5px #666;
            -webkit-box-shadow: 0px 2px 5px #666;
            box-shadow: 0px 2px 5px #666;
        }
        .country-label {
            color: white;
            font-size: 25px;
        }
    </style>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Hide desired legend items

Use the showLegend property in the colorMapping to show or hide the desired legend items in Maps. If the showLegend property is set to false, the legend item will be hidden. otherwise, it will be visible.

Source

Preview

index.js

index.html

var map = new ej.maps.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="world-map.js"></script>
    <script src="usa.js"></script>
    <script src="data.js"></script>
    <script src="california.js"></script>
    <script src="texas.js"></script>
    <script src="africa_continent.js"></script>
    <script src="africa.js"></script>
    <script src="cluster.js"></script>
	<script src="markerdata.js"></script>
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="height: 500px; width: 700px">
        <div id="element"></div>
    </div>
    <svg height="150" width="400">
        <defs>
            <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" style="stop-color:#C5494B;stop-opacity:1"></stop>
                <stop offset="100%" style="stop-color:#4C134F;stop-opacity:1"></stop>
            </linearGradient>
        </defs>
    </svg>
    <!-- annotation content -->
    <div id="maps-annotation" style="display: none;">
        <div id="annotation">
            <div>
                <p style="margin-left:10px;font-size:13px;font-weight:500">Facts about Africa</p>
            </div>
            <hr style="margin-top:-3px;margin-bottom:10px;border:0.5px solid #DDDDDD">
            <div>
                <ul style="list-style-type:disc; margin-left:-20px;margin-bottom:2px; font-weight:400">
                    <li>Africa is the second largest and second most populated continent in the world.</li>
                    <li style="padding-top:5px;">Africa has 54 sovereign states and 10 non-sovereign territories.</li>
                    <li style="padding-top:5px;">Algeria is the largest country in Africa, where as Mayotte is the smallest.</li>
                </ul>
            </div>
        </div>
    </div>
    <div id="compass-maps" style="display: none;">
        <img src="templates/maps/how-to/annotation/compass.png" height="75px" width="75px">
    </div>
    <style>
        #annotation {
            color: #DDDDDD;
            font-size: 12px;
            font-family: Roboto;
            background: #3E464C;
            margin: 20px;
            padding: 10px;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
            width: 300px;
            -moz-box-shadow: 0px 2px 5px #666;
            -webkit-box-shadow: 0px 2px 5px #666;
            box-shadow: 0px 2px 5px #666;
        }
        .country-label {
            color: white;
            font-size: 25px;
        }
    </style>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Hide legend items based on data source value

Depending on the values provided in the data source, the legend items will be hidden or visible. Bind the field name that contains the visibility state in the data source to the showLegendPath property of the legendSettings to achieve this.

Source

Preview

index.js

index.html

var map = new ej.maps.Maps({
    legendSettings:{
        visible:true,
        showLegendPath:'visibility'
    },
    layers: [
        {
            shapeData: world_map,
            dataSource: default_data,            
            shapePropertyPath: 'continent',
            shapeDataPath: 'continent',
            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="world-map.js"></script>
    <script src="usa.js"></script>
    <script src="data.js"></script>
    <script src="california.js"></script>
    <script src="texas.js"></script>
    <script src="africa_continent.js"></script>
    <script src="africa.js"></script>
    <script src="cluster.js"></script>
	<script src="markerdata.js"></script>
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="height: 500px; width: 700px">
        <div id="element"></div>
    </div>
    <svg height="150" width="400">
        <defs>
            <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" style="stop-color:#C5494B;stop-opacity:1"></stop>
                <stop offset="100%" style="stop-color:#4C134F;stop-opacity:1"></stop>
            </linearGradient>
        </defs>
    </svg>
    <!-- annotation content -->
    <div id="maps-annotation" style="display: none;">
        <div id="annotation">
            <div>
                <p style="margin-left:10px;font-size:13px;font-weight:500">Facts about Africa</p>
            </div>
            <hr style="margin-top:-3px;margin-bottom:10px;border:0.5px solid #DDDDDD">
            <div>
                <ul style="list-style-type:disc; margin-left:-20px;margin-bottom:2px; font-weight:400">
                    <li>Africa is the second largest and second most populated continent in the world.</li>
                    <li style="padding-top:5px;">Africa has 54 sovereign states and 10 non-sovereign territories.</li>
                    <li style="padding-top:5px;">Algeria is the largest country in Africa, where as Mayotte is the smallest.</li>
                </ul>
            </div>
        </div>
    </div>
    <div id="compass-maps" style="display: none;">
        <img src="templates/maps/how-to/annotation/compass.png" height="75px" width="75px">
    </div>
    <style>
        #annotation {
            color: #DDDDDD;
            font-size: 12px;
            font-family: Roboto;
            background: #3E464C;
            margin: 20px;
            padding: 10px;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
            width: 300px;
            -moz-box-shadow: 0px 2px 5px #666;
            -webkit-box-shadow: 0px 2px 5px #666;
            box-shadow: 0px 2px 5px #666;
        }
        .country-label {
            color: white;
            font-size: 25px;
        }
    </style>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Bind legend item text from data source

To show the legend text based on values provided in the data source, use the valuePath property in the legendSettings.

Source

Preview

index.js

index.html

var map = new ej.maps.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="world-map.js"></script>
    <script src="usa.js"></script>
    <script src="data.js"></script>
    <script src="california.js"></script>
    <script src="texas.js"></script>
    <script src="africa_continent.js"></script>
    <script src="africa.js"></script>
    <script src="cluster.js"></script>
	<script src="markerdata.js"></script>
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="height: 500px; width: 700px">
        <div id="element"></div>
    </div>
    <svg height="150" width="400">
        <defs>
            <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" style="stop-color:#C5494B;stop-opacity:1"></stop>
                <stop offset="100%" style="stop-color:#4C134F;stop-opacity:1"></stop>
            </linearGradient>
        </defs>
    </svg>
    <!-- annotation content -->
    <div id="maps-annotation" style="display: none;">
        <div id="annotation">
            <div>
                <p style="margin-left:10px;font-size:13px;font-weight:500">Facts about Africa</p>
            </div>
            <hr style="margin-top:-3px;margin-bottom:10px;border:0.5px solid #DDDDDD">
            <div>
                <ul style="list-style-type:disc; margin-left:-20px;margin-bottom:2px; font-weight:400">
                    <li>Africa is the second largest and second most populated continent in the world.</li>
                    <li style="padding-top:5px;">Africa has 54 sovereign states and 10 non-sovereign territories.</li>
                    <li style="padding-top:5px;">Algeria is the largest country in Africa, where as Mayotte is the smallest.</li>
                </ul>
            </div>
        </div>
    </div>
    <div id="compass-maps" style="display: none;">
        <img src="templates/maps/how-to/annotation/compass.png" height="75px" width="75px">
    </div>
    <style>
        #annotation {
            color: #DDDDDD;
            font-size: 12px;
            font-family: Roboto;
            background: #3E464C;
            margin: 20px;
            padding: 10px;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
            width: 300px;
            -moz-box-shadow: 0px 2px 5px #666;
            -webkit-box-shadow: 0px 2px 5px #666;
            box-shadow: 0px 2px 5px #666;
        }
        .country-label {
            color: white;
            font-size: 25px;
        }
    </style>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Hide duplicate legend items

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

Source

Preview

index.js

index.html

var map = new ej.maps.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="world-map.js"></script>
    <script src="usa.js"></script>
    <script src="data.js"></script>
    <script src="california.js"></script>
    <script src="texas.js"></script>
    <script src="africa_continent.js"></script>
    <script src="africa.js"></script>
    <script src="cluster.js"></script>
	<script src="markerdata.js"></script>
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="height: 500px; width: 700px">
        <div id="element"></div>
    </div>
    <svg height="150" width="400">
        <defs>
            <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" style="stop-color:#C5494B;stop-opacity:1"></stop>
                <stop offset="100%" style="stop-color:#4C134F;stop-opacity:1"></stop>
            </linearGradient>
        </defs>
    </svg>
    <!-- annotation content -->
    <div id="maps-annotation" style="display: none;">
        <div id="annotation">
            <div>
                <p style="margin-left:10px;font-size:13px;font-weight:500">Facts about Africa</p>
            </div>
            <hr style="margin-top:-3px;margin-bottom:10px;border:0.5px solid #DDDDDD">
            <div>
                <ul style="list-style-type:disc; margin-left:-20px;margin-bottom:2px; font-weight:400">
                    <li>Africa is the second largest and second most populated continent in the world.</li>
                    <li style="padding-top:5px;">Africa has 54 sovereign states and 10 non-sovereign territories.</li>
                    <li style="padding-top:5px;">Algeria is the largest country in Africa, where as Mayotte is the smallest.</li>
                </ul>
            </div>
        </div>
    </div>
    <div id="compass-maps" style="display: none;">
        <img src="templates/maps/how-to/annotation/compass.png" height="75px" width="75px">
    </div>
    <style>
        #annotation {
            color: #DDDDDD;
            font-size: 12px;
            font-family: Roboto;
            background: #3E464C;
            margin: 20px;
            padding: 10px;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
            width: 300px;
            -moz-box-shadow: 0px 2px 5px #666;
            -webkit-box-shadow: 0px 2px 5px #666;
            box-shadow: 0px 2px 5px #666;
        }
        .country-label {
            color: white;
            font-size: 25px;
        }
    </style>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Toggle option in legend

The toggle option has been provided for legend. If the legend can be toggled, the given color will be changed to the corresponding map shape item. To enable the toggle options in Legend, set the enable property of the toggleLegendSettings to true.

The following properties are available to customize the toggle option in legend.

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.

Source

Preview

index.js

index.html

var map = new ej.maps.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="world-map.js"></script>
    <script src="usa.js"></script>
    <script src="data.js"></script>
    <script src="california.js"></script>
    <script src="texas.js"></script>
    <script src="africa_continent.js"></script>
    <script src="africa.js"></script>
    <script src="cluster.js"></script>
	<script src="markerdata.js"></script>
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="height: 500px; width: 700px">
        <div id="element"></div>
    </div>
    <svg height="150" width="400">
        <defs>
            <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" style="stop-color:#C5494B;stop-opacity:1"></stop>
                <stop offset="100%" style="stop-color:#4C134F;stop-opacity:1"></stop>
            </linearGradient>
        </defs>
    </svg>
    <!-- annotation content -->
    <div id="maps-annotation" style="display: none;">
        <div id="annotation">
            <div>
                <p style="margin-left:10px;font-size:13px;font-weight:500">Facts about Africa</p>
            </div>
            <hr style="margin-top:-3px;margin-bottom:10px;border:0.5px solid #DDDDDD">
            <div>
                <ul style="list-style-type:disc; margin-left:-20px;margin-bottom:2px; font-weight:400">
                    <li>Africa is the second largest and second most populated continent in the world.</li>
                    <li style="padding-top:5px;">Africa has 54 sovereign states and 10 non-sovereign territories.</li>
                    <li style="padding-top:5px;">Algeria is the largest country in Africa, where as Mayotte is the smallest.</li>
                </ul>
            </div>
        </div>
    </div>
    <div id="compass-maps" style="display: none;">
        <img src="templates/maps/how-to/annotation/compass.png" height="75px" width="75px">
    </div>
    <style>
        #annotation {
            color: #DDDDDD;
            font-size: 12px;
            font-family: Roboto;
            background: #3E464C;
            margin: 20px;
            padding: 10px;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
            width: 300px;
            -moz-box-shadow: 0px 2px 5px #666;
            -webkit-box-shadow: 0px 2px 5px #666;
            box-shadow: 0px 2px 5px #666;
        }
        .country-label {
            color: white;
            font-size: 25px;
        }
    </style>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Enable legend for bubble

To enable the legend for the bubble by setting the visible property of legendSettings property as true and type property of legendSettings as Bubbles.

Source

Preview

index.js

index.html

var map = new ej.maps.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: 'Burundi', population: '10524117' },
                { 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="world-map.js"></script>
    <script src="usa.js"></script>
    <script src="data.js"></script>
    <script src="california.js"></script>
    <script src="texas.js"></script>
    <script src="africa_continent.js"></script>
    <script src="africa.js"></script>
    <script src="cluster.js"></script>
	<script src="markerdata.js"></script>
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="height: 500px; width: 700px">
        <div id="element"></div>
    </div>
    <svg height="150" width="400">
        <defs>
            <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" style="stop-color:#C5494B;stop-opacity:1"></stop>
                <stop offset="100%" style="stop-color:#4C134F;stop-opacity:1"></stop>
            </linearGradient>
        </defs>
    </svg>
    <!-- annotation content -->
    <div id="maps-annotation" style="display: none;">
        <div id="annotation">
            <div>
                <p style="margin-left:10px;font-size:13px;font-weight:500">Facts about Africa</p>
            </div>
            <hr style="margin-top:-3px;margin-bottom:10px;border:0.5px solid #DDDDDD">
            <div>
                <ul style="list-style-type:disc; margin-left:-20px;margin-bottom:2px; font-weight:400">
                    <li>Africa is the second largest and second most populated continent in the world.</li>
                    <li style="padding-top:5px;">Africa has 54 sovereign states and 10 non-sovereign territories.</li>
                    <li style="padding-top:5px;">Algeria is the largest country in Africa, where as Mayotte is the smallest.</li>
                </ul>
            </div>
        </div>
    </div>
    <div id="compass-maps" style="display: none;">
        <img src="templates/maps/how-to/annotation/compass.png" height="75px" width="75px">
    </div>
    <style>
        #annotation {
            color: #DDDDDD;
            font-size: 12px;
            font-family: Roboto;
            background: #3E464C;
            margin: 20px;
            padding: 10px;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
            width: 300px;
            -moz-box-shadow: 0px 2px 5px #666;
            -webkit-box-shadow: 0px 2px 5px #666;
            box-shadow: 0px 2px 5px #666;
        }
        .country-label {
            color: white;
            font-size: 25px;
        }
    </style>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Enable legend for markers

To enable legend for marker by setting the visible property of legendSettings as true and type property of legendSettings as Markers. The legendText property in the markerSettings property can be used to show the legend text based on values provided in the data source.

Source

Preview

index.js

index.html

var map = new ej.maps.Maps({
    legendSettings: {
        visible: true,
        type: 'Markers'
    },
    layers: [
        {
            shapeData: world_map,
            markerSettings: [
                {
                    visible: true,
                    legendText: 'name',
                    dataSource: [
                        { latitude: 37.6276571, longitude: -122.4276688, name: 'San Bruno' },
                        { latitude: 33.5302186, longitude: -117.7418381, name: 'Laguna Niguel' },
                        { latitude: 40.7424509, longitude: -74.0081468, name: 'New York' }
                    ],
                    shape: 'Circle'
                }
			]
        }
    ]
});
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="world-map.js"></script>
    <script src="usa.js"></script>
    <script src="data.js"></script>
    <script src="california.js"></script>
    <script src="texas.js"></script>
    <script src="africa_continent.js"></script>
    <script src="africa.js"></script>
    <script src="cluster.js"></script>
	<script src="markerdata.js"></script>
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="height: 500px; width: 700px">
        <div id="element"></div>
    </div>
    <svg height="150" width="400">
        <defs>
            <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" style="stop-color:#C5494B;stop-opacity:1"></stop>
                <stop offset="100%" style="stop-color:#4C134F;stop-opacity:1"></stop>
            </linearGradient>
        </defs>
    </svg>
    <!-- annotation content -->
    <div id="maps-annotation" style="display: none;">
        <div id="annotation">
            <div>
                <p style="margin-left:10px;font-size:13px;font-weight:500">Facts about Africa</p>
            </div>
            <hr style="margin-top:-3px;margin-bottom:10px;border:0.5px solid #DDDDDD">
            <div>
                <ul style="list-style-type:disc; margin-left:-20px;margin-bottom:2px; font-weight:400">
                    <li>Africa is the second largest and second most populated continent in the world.</li>
                    <li style="padding-top:5px;">Africa has 54 sovereign states and 10 non-sovereign territories.</li>
                    <li style="padding-top:5px;">Algeria is the largest country in Africa, where as Mayotte is the smallest.</li>
                </ul>
            </div>
        </div>
    </div>
    <div id="compass-maps" style="display: none;">
        <img src="templates/maps/how-to/annotation/compass.png" height="75px" width="75px">
    </div>
    <style>
        #annotation {
            color: #DDDDDD;
            font-size: 12px;
            font-family: Roboto;
            background: #3E464C;
            margin: 20px;
            padding: 10px;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
            width: 300px;
            -moz-box-shadow: 0px 2px 5px #666;
            -webkit-box-shadow: 0px 2px 5px #666;
            box-shadow: 0px 2px 5px #666;
        }
        .country-label {
            color: white;
            font-size: 25px;
        }
    </style>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Imitate/Map marker shape to the legend shape

To imitate or map the marker shape with its legend item shape, set the useMarkerShape property to true in the legendSettings property.

Source

Preview

index.js

index.html

var map = new ej.maps.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="world-map.js"></script>
    <script src="usa.js"></script>
    <script src="data.js"></script>
    <script src="california.js"></script>
    <script src="texas.js"></script>
    <script src="africa_continent.js"></script>
    <script src="africa.js"></script>
    <script src="cluster.js"></script>
	<script src="markerdata.js"></script>
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="height: 500px; width: 700px">
        <div id="element"></div>
    </div>
    <svg height="150" width="400">
        <defs>
            <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" style="stop-color:#C5494B;stop-opacity:1"></stop>
                <stop offset="100%" style="stop-color:#4C134F;stop-opacity:1"></stop>
            </linearGradient>
        </defs>
    </svg>
    <!-- annotation content -->
    <div id="maps-annotation" style="display: none;">
        <div id="annotation">
            <div>
                <p style="margin-left:10px;font-size:13px;font-weight:500">Facts about Africa</p>
            </div>
            <hr style="margin-top:-3px;margin-bottom:10px;border:0.5px solid #DDDDDD">
            <div>
                <ul style="list-style-type:disc; margin-left:-20px;margin-bottom:2px; font-weight:400">
                    <li>Africa is the second largest and second most populated continent in the world.</li>
                    <li style="padding-top:5px;">Africa has 54 sovereign states and 10 non-sovereign territories.</li>
                    <li style="padding-top:5px;">Algeria is the largest country in Africa, where as Mayotte is the smallest.</li>
                </ul>
            </div>
        </div>
    </div>
    <div id="compass-maps" style="display: none;">
        <img src="templates/maps/how-to/annotation/compass.png" height="75px" width="75px">
    </div>
    <style>
        #annotation {
            color: #DDDDDD;
            font-size: 12px;
            font-family: Roboto;
            background: #3E464C;
            margin: 20px;
            padding: 10px;
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            border-radius: 2px;
            width: 300px;
            -moz-box-shadow: 0px 2px 5px #666;
            -webkit-box-shadow: 0px 2px 5px #666;
            box-shadow: 0px 2px 5px #666;
        }
        .country-label {
            color: white;
            font-size: 25px;
        }
    </style>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Contents

Positioning of the legend
Legend mode
Legend for shapes
Legend Shape
Customization
Legend for items excluded from color mapping
Hide desired legend items
Hide legend items based on data source value
Bind legend item text from data source
Hide duplicate legend items
Toggle option in legend
Enable legend for bubble
Enable legend for markers
ImitateMap marker shape to the legend shape

Contents

Positioning of the legend
Legend mode
Legend for shapes
Legend Shape
Customization
Legend for items excluded from color mapping
Hide desired legend items
Hide legend items based on data source value
Bind legend item text from data source
Hide duplicate legend items
Toggle option in legend
Enable legend for bubble
Enable legend for markers
ImitateMap marker shape to the legend shape

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!