JavaScript (ES5)
Demos
Support
Forum
Download
Search results

Legend

A legend is a key used on a map that contains swatches of symbols with descriptions. It provides valuable information for interpreting what the map is displaying and can be represented in various colors, shapes or other identifiers based on the data. It gives a breakdown of what each symbol represents throughout the map.

Visibility

The Legends can be made visible by setting the visible property of legendSettings to true.

Positioning of the Legend

The legend can be positioned in two ways.

  • Absolute Position.

  • Dock Position.

Absolute Position

Based on the margin values of X and Y-axes, the Map legends can be positioned with the support of location.x and location.y properties available in legendSettings. For positioning the legend based on margins corresponding to a map, position value is set as ‘Float’.

Dock Position

The map legends can be positioned in following locations within the container. You can set this option by using position property in legendSettings.

1 Top

2 Left

3 Bottom

4 Right

above four positions can be aligned combination of ‘Near’, ‘Center’ and ‘Far’ using alignment in legendSettings. So legend can be aligned 12 positions.

Legend Mode

Legend had two type 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.

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. You can enable this option by setting mode property in legendSettings value as “Interactive” and default value of mode property is “Default” to enable the normal legend.

Legend Size

The map legend size can be modified by using the height and width properties in legendSettings.

Legend opacity

To specify the transparency for legend shape set opacity property in legendSettings.

Legend for Shapes

The Layer shape type legends can be generated for each color mappings in shape settings. Note: Below code snippet demonstrate the equal colormapping legends for the shapes.

Create the electiondata.ts file with following data for layer dataSource.

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

Import the ‘electionData’ and assign for the layer dataSource. Provide the shapePropertyPath value as ‘name and shapeDataPath value as ‘State’.

To enable the equal colormapping refer the shapeSettings.colorMapping code snippet.

Finally set legendSettings.visible as true and Inject the Legend Module into Maps using Maps.Inject(Legend) Method.

Source
Preview
index.html
index.css
<!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="../../maps.min.js"></script>
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="height: 500px; width: 500px">
        <div id="element"></div>
    </div>
    <script src="app.js"></script>
    <script>
        let loader = document.getElementById('loader');
        let container = document.getElementById('container');
        if (loader) {
            loader.style.display = "none";
        }
        if (container) {
            container.style.visibility = "visible";
        }
    </script> 


<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

To get the legend shape value for legendSettings by using shape property. You can customize the shape by using the shapeWidth and shapeHeight property.

Legend for items excluded from color mapping

Based on the ranges in data source, get the excluded ranges from color mapping, and then show the legend with excluded range values are bound to the specific legend.

The following code example shows legends for the items excluded from color mapping.

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
    }
    ...
    ];

Bind the population_density value to dataSource layer, and then specify the colorValuePath as ‘density’ to map the range values for shapes. Refer to the following the code example for more details.

Source
Preview
index.html
index.css
<!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="../../maps.min.js"></script>
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="height: 500px; width: 500px">
        <div id="element"></div>
    </div>
    <script src="app.js"></script>
    <script>
        let loader = document.getElementById('loader');
        let container = document.getElementById('container');
        if (loader) {
            loader.style.display = "none";
        }
        if (container) {
            container.style.visibility = "visible";
        }
    </script> 


<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

To enable or disable the desired legend for each colormapping, set the showLegend property to true in colorMapping.

Source
Preview
index.html
index.css
<!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="../../maps.min.js"></script>
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="height: 500px; width: 500px">
        <div id="element"></div>
    </div>
    <script src="app.js"></script>
    <script>
        let loader = document.getElementById('loader');
        let container = document.getElementById('container');
        if (loader) {
            loader.style.display = "none";
        }
        if (container) {
            container.style.visibility = "visible";
        }
    </script> 


<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 data source value

To enable or disable the legend visibility for each item, bind the field name in the data source to the showLegendPath property in legendSettings.

The following code example shows how to hide the legend items based data source value.

Source
Preview
index.html
index.css
<!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="../../maps.min.js"></script>
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="height: 500px; width: 500px">
        <div id="element"></div>
    </div>
    <script src="app.js"></script>
    <script>
        let loader = document.getElementById('loader');
        let container = document.getElementById('container');
        if (loader) {
            loader.style.display = "none";
        }
        if (container) {
            container.style.visibility = "visible";
        }
    </script> 


<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 binding, the field name in the datasource should be set to the valuePath property in legendSettings.

Source
Preview
index.html
index.css
<!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="../../maps.min.js"></script>
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="height: 500px; width: 500px">
        <div id="element"></div>
    </div>
    <script src="app.js"></script>
    <script>
        let loader = document.getElementById('loader');
        let container = document.getElementById('container');
        if (loader) {
            loader.style.display = "none";
        }
        if (container) {
            container.style.visibility = "visible";
        }
    </script> 


<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 enable or disable the duplicate legend items, set the property removeDuplicateLegend property to true in legendSettings.

Source
Preview
index.html
index.css
<!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="../../maps.min.js"></script>
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container" style="height: 500px; width: 500px">
        <div id="element"></div>
    </div>
    <script src="app.js"></script>
    <script>
        let loader = document.getElementById('loader');
        let container = document.getElementById('container');
        if (loader) {
            loader.style.display = "none";
        }
        if (container) {
            container.style.visibility = "visible";
        }
    </script> 


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

Refer the API for Legend feature.

Previous
Next