Search results

Legend

A legend is a key used on a map that contains swatches of symbols with descriptions. Legends provide valuable information for interpreting what the map displays, and they 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 maps.

Visibility

The legends can be made visible by setting the Visible property of MapsLegendSettings to true.

Legend mode

The Maps component contains the following two types of legend modes: The Default mode and the Interactive mode.

Default mode

The default mode legends have symbols with legend labels. They are used to identify the shapes, bubbles, or marker color.

Interactive mode

The legends can be made interactive with an arrow mark that indicates the exact range color in legend when the mouse hovers over a shape. You can enable this option by setting the value of Mode property in MapsLegendSettings to “Interactive”. The default value of the Mode property is “Default”.

@using Syncfusion.EJ2.Blazor.Maps

<EjsMaps>
    @*  To set legend mode as interactive  *@
    <MapsLegendSettings Visible="true" Mode="LegendMode.Interactive">
    </MapsLegendSettings>
    <MapsLayers>
        <MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/world-map.json"}'
                   DataSource="@securityCouncilDetails"
                   ShapePropertyPath='@("name")'
                   ShapeDataPath="Name">
            <MapsShapeSettings ColorValuePath="Membership">
                <MapsShapeColorMappings>
                    <MapsShapeColorMapping Value="Permanent" Color='@("#D84444")' />
                    <MapsShapeColorMapping Value="Non-Permanent" Color='@("#316DB5")' />
                </MapsShapeColorMappings>
            </MapsShapeSettings>
        </MapsLayer>
    </MapsLayers>
</EjsMaps>

@code {
    private List<UNCouncilCountry> securityCouncilDetails = new List<UNCouncilCountry>{
         new UNCouncilCountry { Name= "China", Membership= "Permanent"},
         new UNCouncilCountry { Name= "France", Membership= "Permanent" },
         new UNCouncilCountry { Name= "Russia", Membership= "Permanent"},
         new UNCouncilCountry { Name= "Kazakhstan", Membership= "Non-Permanent"},
         new UNCouncilCountry { Name= "Poland", Membership= "Non-Permanent"},
         new UNCouncilCountry { Name= "Sweden", Membership= "Non-Permanent"},
         new UNCouncilCountry { Name= "United Kingdom", Membership= "Permanent"},
         new UNCouncilCountry { Name= "United States", Membership= "Permanent"}
    };

    public class UNCouncilCountry
    {
        public string Name;
        public string Membership;
    };
}

Maps with interactive legend

Positioning the legends

The legends can be positioned in the following two ways:

  • Absolute position
  • Dock position

Absolute position

Based on the margin values of x and y-axes, the maps legends can be positioned using the X and Y properties available in the Location property of MapsLegendSettings. For positioning the legends based on margins corresponding to map, the value of Position is set to ‘Float’.

Dock position

You can set the position for legend using the Position property in MapsLegendSettings.

The map legends can be positioned in following locations within the container:

  • Top
  • Left
  • Bottom
  • Right

The above four positions can be aligned with combination of ‘Near’, ‘Center’, and ‘Far’ using Alignment in MapsLegendSettings. So, the legends can be aligned to 12 positions.

@using Syncfusion.EJ2.Blazor.Maps

<EjsMaps>
    @*  To position the legend  *@
    <MapsLegendSettings Visible="true" Position="LegendPosition.Top" Alignment="Alignment.Near">
    </MapsLegendSettings>
    <MapsLayers>
        <MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/world-map.json"}'
                   DataSource="@securityCouncilDetails"
                   ShapePropertyPath='@("name")'
                   ShapeDataPath="Name">
            <MapsShapeSettings ColorValuePath="Membership">
                <MapsShapeColorMappings>
                    <MapsShapeColorMapping Value="Permanent" Color='@("#D84444")' />
                    <MapsShapeColorMapping Value="Non-Permanent" Color='@("#316DB5")' />
                </MapsShapeColorMappings>
            </MapsShapeSettings>
        </MapsLayer>
    </MapsLayers>
</EjsMaps>

Refer code block to know the property value of securityCouncilDetails.

Positioning Maps legend

Customization

Appearance

Legend size

The legend size can be modified using the Height and Width properties in MapsLegendSettings.

Legend opacity

To specify the transparency for legend shapes, set the Opacity property in MapsLegendSettings.

Legend for shapes

The layer shape type legends can be generated for each color mappings in shape settings.

To load United Nations Council related data source, bind the memberShipDetails to the DataSource of MapsLayer, set the value of ShapePropertyPath to ‘name’, and then set the value of shapeDataPath to ‘Country’.

To enable equal color mapping, refer to the MapsShapeSettings code snippet. Set Visible to true in MapsLegendSettings.

@using Syncfusion.EJ2.Blazor.Maps

<EjsMaps>
    <MapsLegendSettings Visible="true">
    </MapsLegendSettings>
    <MapsLayers>
        <MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/world-map.json"}'
                   DataSource="@membershipDetails"
                   ShapeDataPath="Country"
                   ShapePropertyPath='@("name")'>
            <MapsShapeSettings ColorValuePath="Membership">
                <MapsShapeColorMappings>
                    <MapsShapeColorMapping Value="Permanent" Color='@("#D84444")' />
                    <MapsShapeColorMapping Value="Non-Permanent" Color='@("#316DB5")' />
                </MapsShapeColorMappings>
            </MapsShapeSettings>
        </MapsLayer>
    </MapsLayers>
</EjsMaps>

@code{

    public class UNCouncil
    {
        public string Country { get; set; }
        public string Membership { get; set; }
    }
    private List<UNCouncil> membershipDetails = new List<UNCouncil> {
        new UNCouncil { Country= "China", Membership= "Permanent" },
        new UNCouncil { Country= "France",Membership= "Permanent" },
        new UNCouncil { Country= "Russia",Membership= "Permanent" },
        new UNCouncil { Country= "Kazakhstan",Membership= "Non-Permanent" },
        new UNCouncil { Country= "Poland",Membership= "Non-Permanent" },
        new UNCouncil { Country= "Sweden",Membership= "Non-Permanent" }
    };
}

Maps with legend

Custom shape for legend

To get the legend shape value for MapsLegendSettings, use the Shape property. You can customize the shape using the ShapeWidth and ShapeHeight properties.

@using Syncfusion.EJ2.Blazor.Maps

<EjsMaps>
    @*  To customize the legend  *@
    <MapsLegendSettings Visible="true"
                        Shape="LegendShape.Star"
                        ShapeHeight="30"
                        ShapeWidth="30"
                        ShapePadding="10">
        <MapsLegendShapeBorder Color="blue"
                               Width="0.5">
        </MapsLegendShapeBorder>
    </MapsLegendSettings>
    <MapsLayers>
        <MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/world-map.json"}'
                   DataSource="@memberShipDetails"
                   ShapeDataPath="Country"
                   ShapePropertyPath='@("name")'>
            <MapsShapeSettings ColorValuePath="Membership">
                <MapsShapeColorMappings>
                    <MapsShapeColorMapping Value="Permanent" Color='@("#D84444")' />
                    <MapsShapeColorMapping Value="Non-Permanent" Color='@("#316DB5")' />
                </MapsShapeColorMappings>
            </MapsShapeSettings>
        </MapsLayer>
    </MapsLayers>
</EjsMaps>

@code{

    public class UNCouncil
    {
        public string Country { get; set; }
        public string Membership { get; set; }
    }
    private List<UNCouncil> memberShipDetails = new List<UNCouncil> {
        new UNCouncil { Country= "China", Membership= "Permanent" },
        new UNCouncil { Country= "France",Membership= "Permanent" },
        new UNCouncil { Country= "Russia",Membership= "Permanent" },
        new UNCouncil { Country= "Kazakhstan",Membership= "Non-Permanent" },
        new UNCouncil { Country= "Poland",Membership= "Non-Permanent" },
        new UNCouncil { Country= "Sweden",Membership= "Non-Permanent" }
    };
}

Maps with custom legend

Legend for items excluded from color mapping

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

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

Bind the populationDetails value to the DataSource property, and specify the ColorValuePath as ‘Density’ to map the range values for shapes. Refer to the following the code example for more details.

@using Syncfusion.EJ2.Blazor.Maps

<EjsMaps>
    <MapsLegendSettings Visible="true"></MapsLegendSettings>
    <MapsLayers>
        <MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/world-map.json"}'
                   DataSource="@populationDetails"
                   ShapeDataPath="Name"
                   ShapePropertyPath='@("name")'>
            <MapsShapeSettings ColorValuePath="Density">
                <MapsShapeColorMappings>
                    <MapsShapeColorMapping From="0.0001" To="100" Color='@("yellow")' />
                    <MapsShapeColorMapping From="101" To="200" Color='@("orange")' />
                    <MapsShapeColorMapping Color='@("blue")' />
                </MapsShapeColorMappings>
            </MapsShapeSettings>
        </MapsLayer>
    </MapsLayers>
</EjsMaps>

@code{
    public class PopulationDetails
    {
        public string Name;
        public double Population;
        public double Density;
    };
    private List<PopulationDetails> populationDetails = new List<PopulationDetails> {
       new PopulationDetails
       {
           Name ="United States",
           Population = 325020000,
           Density = 33
       },
       new PopulationDetails
       {
           Name = "Russia",
           Population = 142905208,
           Density = 8.3
       },
       new PopulationDetails
        {
           Name="India",
           Population=1198003000,
           Density=364
        },
       new PopulationDetails
       {
           Name="China",
           Population=1389750000,
           Density=144
       }
    };
}

Maps legend for excluded color mapping range

Hiding desired legend items

To enable or disable the desired legend for each color mapping, set the ShowLegend property to true in MapsShapeColorMapping.

@using Syncfusion.EJ2.Blazor.Maps

<EjsMaps>
    <MapsLegendSettings Visible="true"></MapsLegendSettings>
    <MapsLayers>
        <MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/world-map.json"}'
                   DataSource="@populationDetails"
                   ShapeDataPath="Name"
                   ShapePropertyPath='@("name")'>
            <MapsShapeSettings ColorValuePath="Density">
                <MapsShapeColorMappings>
                    <MapsShapeColorMapping From="0.0001"
                                      To="100"
                                      Color='@("yellow")'
                                      ShowLegend="true" />
                    @*  hide legend for this range  *@
                    <MapsShapeColorMapping From="101"
                                      To="200"
                                      Color='@("orange")'
                                      ShowLegend="false" />
                    <MapsShapeColorMapping Color='@("blue")'
                                      ShowLegend="true" />
                </MapsShapeColorMappings>
            </MapsShapeSettings>
        </MapsLayer>
    </MapsLayers>
</EjsMaps>

Refer code block to know the property value of populationDetails.

Maps with specific legend hide option

Hiding desired items based on data source value

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

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

@using Syncfusion.EJ2.Blazor.Maps

<EjsMaps>
    @*  To hide legend based in data source fields  *@
    <MapsLegendSettings Visible="true"
                        LegendPath="LegendVisibility">
    </MapsLegendSettings>
    <MapsLayers>
        <MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/world-map.json"}'
                   DataSource="@populationDetails"
                   ShapeDataPath="Name"
                   ShapePropertyPath='@("name")'>
            <MapsShapeSettings ColorValuePath="Color">
            </MapsShapeSettings>
        </MapsLayer>
    </MapsLayers>
</EjsMaps>

@code{
    public class PopulationDetails
    {
        public string Name;
        public double Population;
        public double Density;
        public bool LegendVisibility;
        public string Color;

    };
    private List<PopulationDetails> populationDetails = new List<PopulationDetails> {
       new PopulationDetails
       {
           Name ="United States",
           Population = 325020000,
           Density = 33,
           LegendVisibility = true,
           Color = "green"
       },
       new PopulationDetails
       {
           Name = "Russia",
           Population = 142905208,
           Density = 8.3,
           LegendVisibility = false,
           Color = "red"
       },
       new PopulationDetails
        {
           Name="India",
           Population=1198003000,
           Density=364,
           LegendVisibility = true,
           Color = "blue"
        },
       new PopulationDetails
       {
           Name="China",
           Population=1389750000,
           Density=144,
           LegendVisibility = false,
           Color = "orange"
       }
    };
}

Hide desired legends in maps using data source

Binding legend item text from data source

To show the legend text based on binding, the field name in the data source should be set to the ValuePath property in MapsLegendSettings.

@using Syncfusion.EJ2.Blazor.Maps

<EjsMaps>
    <MapsLegendSettings Visible="true" ValuePath="Color"></MapsLegendSettings>
    <MapsLayers>
        <MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/world-map.json"}'
                   DataSource="@populationDetails"
                   ShapeDataPath="Name"
                   ShapePropertyPath='@("name")'>
            <MapsShapeSettings ColorValuePath="Color">
            </MapsShapeSettings>
        </MapsLayer>
    </MapsLayers>
</EjsMaps>

@code{
    public class PopulationDetails
    {
        public string Name;
        public double Population;
        public double Density;
        public string Color;
    };
    private List<PopulationDetails> populationDetails = new List<PopulationDetails> {
       new PopulationDetails
       {
           Name ="United States",
           Population = 325020000,
           Density = 33,
           Color="yellow"
       },
       new PopulationDetails
       {
           Name = "Russia",
           Population = 142905208,
           Density = 8.3,
           Color="red"
       },
       new PopulationDetails
        {
           Name="India",
           Population=1198003000,
           Density=364,
           Color="blue"
        },
       new PopulationDetails
       {
           Name="China",
           Population=1389750000,
           Density=144,
           Color="orange"
       }
    };
}

Maps with legend item text from datasource

Hiding duplicate legend items

To enable or disable the duplicate legend items, set the RemoveDuplicateLegend property to true in MapsLegendSettings.

@using Syncfusion.EJ2.Blazor.Maps

<EjsMaps>
    <MapsLegendSettings Visible="true" RemoveDuplicateLegend="true"></MapsLegendSettings>
    <MapsLayers>
        <MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/world-map.json"}'
                   DataSource="@populationDetails"
                   ShapeDataPath="Name"
                   ShapePropertyPath='@("name")'>
            <MapsShapeSettings ColorValuePath="Color">
            </MapsShapeSettings>
        </MapsLayer>
    </MapsLayers>
</EjsMaps>

@code{
    public class PopulationDetails
    {
        public string Name;
        public double Population;
        public double Density;
        public string Color;
    };
    private List<PopulationDetails> populationDetails = new List<PopulationDetails> {
       new PopulationDetails
       {
           Name ="United States",
           Population = 325020000,
           Density = 33,
           Color="yellow"
       },
       new PopulationDetails
       {
           Name ="United States",
           Population = 325020000,
           Density = 33,
           Color="yellow"
       },
       new PopulationDetails
       {
           Name = "Russia",
           Population = 142905208,
           Density = 8.3,
           Color="red"
       },
       new PopulationDetails
        {
           Name="India",
           Population=1198003000,
           Density=364,
           Color="blue"
        },
       new PopulationDetails
       {
           Name="China",
           Population=1389750000,
           Density=144,
           Color="orange"
       }
    };
}

Maps with duplicate legend hide option

Toggle option in legend

The toggle option has been provided for legend. So, if you toggle a legend, the given color will be changed to the corresponding maps shape item. You can enable the toggle options using the ToggleLegendSettings property.

The following options are available to customize the shape of the map:

  • ApplyShapeSettings – Applies the fill property value in shapeSettings to a shape of the maps if it is true and a legend item is clicked.
  • Fill- Specifies the color to the shape of the maps.
  • Opacity – Specifies the transparency of the legend.
  • Border – Specifies the border color and width.

The following code example demonstrates how to add the toggle option to legend.

@using Syncfusion.EJ2.Blazor.Maps

<EjsMaps>
    @*  To hide legend based in data source fields  *@
    <MapsLegendSettings Visible="true">
    <MapsToggleLegendSettings Enable="true" ApplyShapeSettings="false">
    <MapsLegendBorder Width="2" Color="green"></MapsLegendBorder></MapsToggleLegendSettings>
    </MapsLegendSettings>
    <MapsLayers>
        <MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/world-map.json"}'
                   DataSource="@populationDetails"
                   ShapeDataPath="Name"
                   ShapePropertyPath='@("name")'>
            <MapsShapeSettings ColorValuePath="Color">
            </MapsShapeSettings>
        </MapsLayer>
    </MapsLayers>
</EjsMaps>

@code{
    public class PopulationDetails
    {
        public string Name;
        public double Population;
        public double Density;
        public bool LegendVisibility;
        public string Color;

    };
    private List<PopulationDetails> populationDetails = new List<PopulationDetails> {
       new PopulationDetails
       {
           Name ="United States",
           Population = 325020000,
           Density = 33,
           LegendVisibility = true,
           Color = "green"
       },
       new PopulationDetails
       {
           Name = "Russia",
           Population = 142905208,
           Density = 8.3,
           LegendVisibility = false,
           Color = "red"
       },
       new PopulationDetails
        {
           Name="India",
           Population=1198003000,
           Density=364,
           LegendVisibility = true,
           Color = "blue"
        },
       new PopulationDetails
       {
           Name="China",
           Population=1389750000,
           Density=144,
           LegendVisibility = false,
           Color = "orange"
       }
    };
}

Hide desired legends in maps using data source

See also