Class MapLegend

Represents the map legend to show legend for the bubbles or shapes.

Information provided in the legend helps to identify the data rendered in the map shapes or bubbles.

Inheritance

System.Object

MapLegend

Namespace: Syncfusion.Maui.Maps

Assembly: Syncfusion.Maui.Maps.dll

Syntax

public class MapLegend : BindableObject, ILegend

Examples

XAML
C#

<map:SfMaps>
   <map:SfMaps.BindingContext>
       <local:BubbleViewModel/>
   </map:SfMaps.BindingContext>

   <map:SfMaps.Layer>
      <map:MapShapeLayer x:Name="layer"
                         ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json"
                         DataSource="{Binding Details}"
                         ShapeDataField="name"
                         PrimaryValuePath="CountryName"
                         ShowBubbles="True">

         <map:MapShapeLayer.BubbleSettings>
             <map:MapBubbleSettings SizeValuePath="UsersCount"
                                     ColorValuePath="UserCount">

                <map:MapBubbleSettings.ColorMappings>
                    <map:RangeColorMapping Color="#809fff" From="0" To="100" Text="0-100" />
                    <map:RangeColorMapping Color="#3366ff" From="100" To="200" Text="100-200" />
                    <map:RangeColorMapping Color="#0039e6" From="200" To="300" Text="200-300" />
                </map:MapBubbleSettings.ColorMappings>

         </map:MapShapeLayer.BubbleSettings>

         <map:MapShapeLayer.Legend>
             <map:MapLegend Placement="Bottom" 
                            SourceType="Bubble">

                <map:MapLegend.TextStyle>
                    <map:MapLabelStyle TextColor="Green" 
                                       FontSize="12" 
                                       FontAttributes="Bold" />
                </map:MapLegend.TextStyle>

             </map:MapLegend>
         </map:MapShapeLayer.Legend>

      </map:MapShapeLayer>
   </map:SfMaps.Layer>
</map:SfMaps>

SfMaps maps = new SfMaps();
MapShapeLayer layer = new MapShapeLayer();
RangeViewModel rangeViewModel = new RangeViewModel();
this.BindingContext = new RangeViewModel();
layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
layer.DataSource = rangeViewModel.WorldPopulationDensity;
layer.ShapeDataField = "name";
layer.PrimaryValuePath="CountryName";
layer.ShowBubbles = true;
MapBubbleSettings bubbleSetting = new MapBubbleSettings()
{
    ColorValuePath = "Population",
    SizeValuePath = "Population"
};
bubbleSetting.ColorMappings.Add(new RangeColorMapping()
{
    Color = Color.FromRgb(128, 159, 255),
    From = 0,
    To = 100,
    Text = "0-100"
});
bubbleSetting.ColorMappings.Add(new RangeColorMapping()
{
    Color = Color.FromRgb(51, 102, 255),
    From = 100,
    To = 200,
    Text = "100-200"
});
bubbleSetting.ColorMappings.Add(new RangeColorMapping()
{
    Color = Color.FromRgb(0, 57, 230),
    From = 200,
    To = 300,
    Text = "200-300"
});
MapLegend legendSet = new MapLegend();
legendSet.SourceType = LegendSourceType.Bubble;
legendSet.Placement = Syncfusion.Maui.Core.LegendPlacement.Bottom;
MapLabelStyle mapLabelStyle = new MapLabelStyle();
mapLabelStyle.TextColor = Colors.Green;
mapLabelStyle.FontSize = 12;
mapLabelStyle.FontAttributes = FontAttributes.Bold;
legendSet.TextStyle = mapLabelStyle;
layer.Legend = legendSet;
maps.Layer = layer;
this.Content = maps;
// **Model**

public class UserDetails
{
    public string CountryName { get; set; }
    public double UsersCount { get; set; }
    public UserDetails(string countryName, double usersCount)
    {
        this.CountryName = countryName;
        this.UsersCount = usersCount;
    }
}

// **View Model**

public class BubbleViewModel 
{
	public ObservableCollection<UserDetails> Details { get; set; }
    public BubbleViewModel()
    {
        Details = new ObservableCollection<UserDetails>()
        {
             new UserDetails("India", 280),
             new UserDetails("United States of America", 190),
             new UserDetails("Indonesia", 130),
             new UserDetails("Brazil", 120),
             new UserDetails("Mexico", 86),
             new UserDetails("Philippines", 72),
             new UserDetails("Vietnam", 63),
             new UserDetails("Thailand", 48),
             new UserDetails("Egypt", 41),
             new UserDetails("Bangladesh", 37),
             new UserDetails("Pakistan", 37),
             new UserDetails("Turkey", 37),
             new UserDetails("United Kingdom", 37),
             new UserDetails("Colombia", 33),
             new UserDetails("France", 32),
        };
    }
}

Constructors

MapLegend()

Initializes a new instance of the MapLegend class.

Declaration

public MapLegend()

Fields

IconSizeProperty

Identifies the IconSize dependency property.

Declaration

public static readonly BindableProperty IconSizeProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for IconSize dependency property.

IconTypeProperty

Identifies the IconType dependency property.

Declaration

public static readonly BindableProperty IconTypeProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for IconType dependency property.

PlacementProperty

Identifies the Placement dependency property.

Declaration

public static readonly BindableProperty PlacementProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for Placement dependency property.

SourceTypeProperty

Identifies the SourceType dependency property.

Declaration

public static readonly BindableProperty SourceTypeProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for SourceType dependency property.

TextStyleProperty

Identifies the TextStyle dependency property.

Declaration

public static readonly BindableProperty TextStyleProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	The identifier for TextStyle dependency property.

Properties

IconSize

Gets or sets the icon size of legend.

Declaration

public Size IconSize { get; set; }

Property Value

Type	Description
Microsoft.Maui.Graphics.Size	It specifies the size of the legend.The default value is Height=12, Width=12.

<map:SfMaps>
   <map:SfMaps.Layer>
      <map:MapShapeLayer x:Name="layer"
                         ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json"
                         DataSource="{Binding Details}"
                         ShapeDataField="name"
                         PrimaryValuePath="CountryName"
                         ShowBubbles="True">

         <map:MapShapeLayer.BubbleSettings>
             <map:MapBubbleSettings SizeValuePath="UsersCount"
                                     ColorValuePath="UserCount">

                <map:MapBubbleSettings.ColorMappings>
                    <map:RangeColorMapping Color="#809fff" From="0" To="100" Text="0-100" />
                    <map:RangeColorMapping Color="#3366ff" From="100" To="200" Text="100-200" />
                    <map:RangeColorMapping Color="#0039e6" From="200" To="300" Text="200-300" />
                </map:MapBubbleSettings.ColorMappings>

         </map:MapShapeLayer.BubbleSettings>

         <map:MapShapeLayer.Legend>
             <map:MapLegend Placement="Bottom" 
                            SourceType="Bubble"     
                            IconSize="20,20"/>
         </map:MapShapeLayer.Legend>

      </map:MapShapeLayer>
   </map:SfMaps.Layer>
</map:SfMaps>

SfMaps maps = new SfMaps();
MapShapeLayer layer = new MapShapeLayer();
RangeViewModel rangeViewModel = new RangeViewModel();
this.BindingContext = new RangeViewModel();
layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
layer.DataSource = rangeViewModel.WorldPopulationDensity;
layer.ShapeDataField = "name";
layer.PrimaryValuePath="CountryName";
layer.ShowBubbles = true;
MapBubbleSettings bubbleSetting = new MapBubbleSettings()
{
    ColorValuePath = "Population",
    SizeValuePath = "Population"
};
bubbleSetting.ColorMappings.Add(new RangeColorMapping()
{
    Color = Color.FromRgb(128, 159, 255),
    From = 0,
    To = 100,
    Text = "0-100"
});
bubbleSetting.ColorMappings.Add(new RangeColorMapping()
{
    Color = Color.FromRgb(51, 102, 255),
    From = 100,
    To = 200,
    Text = "100-200"
});
bubbleSetting.ColorMappings.Add(new RangeColorMapping()
{
    Color = Color.FromRgb(0, 57, 230),
    From = 200,
    To = 300,
    Text = "200-300"
});
MapLegend legendSet = new MapLegend();
legendSet.SourceType = LegendSourceType.Bubble;
legendSet.Placement = Syncfusion.Maui.Core.LegendPlacement.Bottom;
legendSet.IconSize = new Size(20, 20);
layer.Legend = legendSet;
maps.Layer = layer;
this.Content = maps;

IconType

Gets or sets the icon type of legend.

Declaration

public ShapeType IconType { get; set; }

Property Value

Type	Description
ShapeType	One of the enumeration values that specifies the icon type of legend. The default is Rectangle.

Examples

XAML
C#

<map:SfMaps>
   <map:SfMaps.Layer>
      <map:MapShapeLayer x:Name="layer"
                         ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json"
                         DataSource="{Binding Details}"
                         ShapeDataField="name"
                         PrimaryValuePath="CountryName"
                         ShowBubbles="True">

         <map:MapShapeLayer.BubbleSettings>
             <map:MapBubbleSettings SizeValuePath="UsersCount"
                                     ColorValuePath="UserCount">

                <map:MapBubbleSettings.ColorMappings>
                    <map:RangeColorMapping Color="#809fff" From="0" To="100" Text="0-100" />
                    <map:RangeColorMapping Color="#3366ff" From="100" To="200" Text="100-200" />
                    <map:RangeColorMapping Color="#0039e6" From="200" To="300" Text="200-300" />
                </map:MapBubbleSettings.ColorMappings>

         </map:MapShapeLayer.BubbleSettings>

         <map:MapShapeLayer.Legend>
             <map:MapLegend Placement="Bottom" 
                            SourceType="Bubble" 
                            IconSize="20,20"
                            IconType="Diamond"/>
         </map:MapShapeLayer.Legend>

      </map:MapShapeLayer>
   </map:SfMaps.Layer>
</map:SfMaps>

SfMaps maps = new SfMaps();
MapShapeLayer layer = new MapShapeLayer();
RangeViewModel rangeViewModel = new RangeViewModel();
this.BindingContext = new RangeViewModel();
layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
layer.DataSource = rangeViewModel.WorldPopulationDensity;
layer.ShapeDataField = "name";
layer.PrimaryValuePath="CountryName";
layer.ShowBubbles = true;
MapBubbleSettings bubbleSetting = new MapBubbleSettings()
{
    ColorValuePath = "Population",
    SizeValuePath = "Population"
};
bubbleSetting.ColorMappings.Add(new RangeColorMapping()
{
    Color = Color.FromRgb(128, 159, 255),
    From = 0,
    To = 100,
    Text = "0-100"
});
bubbleSetting.ColorMappings.Add(new RangeColorMapping()
{
    Color = Color.FromRgb(51, 102, 255),
    From = 100,
    To = 200,
    Text = "100-200"
});
bubbleSetting.ColorMappings.Add(new RangeColorMapping()
{
    Color = Color.FromRgb(0, 57, 230),
    From = 200,
    To = 300,
    Text = "200-300"
});
MapLegend legendSet = new MapLegend();
legendSet.SourceType = LegendSourceType.Bubble;
legendSet.Placement = Syncfusion.Maui.Core.LegendPlacement.Bottom;
legendSet.IconSize = new Size(20, 20);
legendSet.IconType = Syncfusion.Maui.Core.ShapeType.Circle;
layer.Legend = legendSet;
maps.Layer = layer;
this.Content = maps;

Placement

Gets or sets the placement position of the legend.

Declaration

public LegendPlacement Placement { get; set; }

Property Value

Type	Description
LegendPlacement	One of the enumeration values that specifies the placement of legend. The default is Top.

Examples

XAML
C#

<map:SfMaps>
   <map:SfMaps.Layer>
      <map:MapShapeLayer x:Name="layer"
                         ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json"
                         DataSource="{Binding Details}"
                         ShapeDataField="name"
                         PrimaryValuePath="CountryName"
                         ShowBubbles="True">

         <map:MapShapeLayer.BubbleSettings>
             <map:MapBubbleSettings SizeValuePath="UsersCount"
                                     ColorValuePath="UserCount">

                <map:MapBubbleSettings.ColorMappings>
                    <map:RangeColorMapping Color="#809fff" From="0" To="100" Text="0-100" />
                    <map:RangeColorMapping Color="#3366ff" From="100" To="200" Text="100-200" />
                    <map:RangeColorMapping Color="#0039e6" From="200" To="300" Text="200-300" />
                </map:MapBubbleSettings.ColorMappings>

         </map:MapShapeLayer.BubbleSettings>

         <map:MapShapeLayer.Legend>
             <map:MapLegend Placement="Bottom" 
                            SourceType="Bubble" />
         </map:MapShapeLayer.Legend>

      </map:MapShapeLayer>
   </map:SfMaps.Layer>
</map:SfMaps>

SfMaps maps = new SfMaps();
MapShapeLayer layer = new MapShapeLayer();
RangeViewModel rangeViewModel = new RangeViewModel();
this.BindingContext = new RangeViewModel();
layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
layer.DataSource = rangeViewModel.WorldPopulationDensity;
layer.ShapeDataField = "name";
layer.PrimaryValuePath="CountryName";
layer.ShowBubbles = true;
MapBubbleSettings bubbleSetting = new MapBubbleSettings()
{
    ColorValuePath = "Population",
    SizeValuePath = "Population"
};
bubbleSetting.ColorMappings.Add(new RangeColorMapping()
{
    Color = Color.FromRgb(128, 159, 255),
    From = 0,
    To = 100,
    Text = "0-100"
});
bubbleSetting.ColorMappings.Add(new RangeColorMapping()
{
    Color = Color.FromRgb(51, 102, 255),
    From = 100,
    To = 200,
    Text = "100-200"
});
bubbleSetting.ColorMappings.Add(new RangeColorMapping()
{
    Color = Color.FromRgb(0, 57, 230),
    From = 200,
    To = 300,
    Text = "200-300"
});
MapLegend legendSet = new MapLegend();
legendSet.SourceType = LegendSourceType.Bubble;
legendSet.Placement = Syncfusion.Maui.Core.LegendPlacement.Bottom;
layer.Legend = legendSet;
maps.Layer = layer;
this.Content = maps;

SourceType

Gets or sets the source type of the legend that determines for which map element the legend need to be render.

Declaration

public LegendSourceType SourceType { get; set; }

Property Value

Type	Description
LegendSourceType	One of the enumeration values that specifies the source type of map legend. The default is Shape.

Examples

XAML
C#

<map:SfMaps>
   <map:SfMaps.Layer>
      <map:MapShapeLayer x:Name="layer"
                         ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json"
                         DataSource="{Binding Details}"
                         ShapeDataField="name"
                         PrimaryValuePath="CountryName"
                         ShowBubbles="True">

         <map:MapShapeLayer.BubbleSettings>
             <map:MapBubbleSettings SizeValuePath="UsersCount"
                                     ColorValuePath="UserCount">

                <map:MapBubbleSettings.ColorMappings>
                    <map:RangeColorMapping Color="#809fff" From="0" To="100" Text="0-100" />
                    <map:RangeColorMapping Color="#3366ff" From="100" To="200" Text="100-200" />
                    <map:RangeColorMapping Color="#0039e6" From="200" To="300" Text="200-300" />
                </map:MapBubbleSettings.ColorMappings>

         </map:MapShapeLayer.BubbleSettings>

         <map:MapShapeLayer.Legend>
             <map:MapLegend Placement="Bottom" 
                            SourceType="Bubble" />
         </map:MapShapeLayer.Legend>

      </map:MapShapeLayer>
   </map:SfMaps.Layer>
</map:SfMaps>

SfMaps maps = new SfMaps();
MapShapeLayer layer = new MapShapeLayer();
RangeViewModel rangeViewModel = new RangeViewModel();
this.BindingContext = new RangeViewModel();
layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
layer.DataSource = rangeViewModel.WorldPopulationDensity;
layer.ShapeDataField = "name";
layer.PrimaryValuePath="CountryName";
layer.ShowBubbles = true;
MapBubbleSettings bubbleSetting = new MapBubbleSettings()
{
    ColorValuePath = "Population",
    SizeValuePath = "Population"
};
bubbleSetting.ColorMappings.Add(new RangeColorMapping()
{
    Color = Color.FromRgb(128, 159, 255),
    From = 0,
    To = 100,
    Text = "0-100"
});
bubbleSetting.ColorMappings.Add(new RangeColorMapping()
{
    Color = Color.FromRgb(51, 102, 255),
    From = 100,
    To = 200,
    Text = "100-200"
});
bubbleSetting.ColorMappings.Add(new RangeColorMapping()
{
    Color = Color.FromRgb(0, 57, 230),
    From = 200,
    To = 300,
    Text = "200-300"
});
MapLegend legendSet = new MapLegend();
legendSet.SourceType = LegendSourceType.Bubble;
legendSet.Placement = Syncfusion.Maui.Core.LegendPlacement.Bottom;
layer.Legend = legendSet;
maps.Layer = layer;
this.Content = maps;

TextStyle

Gets or sets the label style to customize the appearance of the legend labels.

Declaration

public MapLabelStyle TextStyle { get; set; }

Property Value

Type	Description
MapLabelStyle	Apply when customization required for legend labels.

Examples

XAML
C#

<map:SfMaps>
   <map:SfMaps.Layer>
      <map:MapShapeLayer x:Name="layer"
                         ShapesSource="https://cdn.syncfusion.com/maps/map-data/world-map.json">
                         DataSource="{Binding Details}"
                         ShapeDataField="name"
                         PrimaryValuePath="CountryName"
                         ShowBubbles="True">

         <map:MapShapeLayer.BubbleSettings>
             <map:MapBubbleSettings SizeValuePath="UsersCount"
                                     ColorValuePath="UserCount">

                <map:MapBubbleSettings.ColorMappings>
                    <map:RangeColorMapping Color="#809fff" From="0" To="100" Text="0-100" />
                    <map:RangeColorMapping Color="#3366ff" From="100" To="200" Text="100-200" />
                    <map:RangeColorMapping Color="#0039e6" From="200" To="300" Text="200-300" />
                </map:MapBubbleSettings.ColorMappings>
         </map:MapShapeLayer.BubbleSettings>

         <map:MapShapeLayer.Legend>
             <map:MapLegend Placement="Bottom" 
                            SourceType="Bubble"
                            IconSize="20,20"
                            IconType="Diamond">
                <map:MapLegend.TextStyle>
                    <map:MapLabelStyle TextColor="Green" 
                                       FontSize="12" 
                                       FontAttributes="Bold" />
                </map:MapLegend.TextStyle>
             </map:MapLegend>
         </map:MapShapeLayer.Legend>

      </map:MapShapeLayer>
   </map:SfMaps.Layer>
</map:SfMaps>

SfMaps maps = new SfMaps();
MapShapeLayer layer = new MapShapeLayer();
RangeViewModel rangeViewModel = new RangeViewModel();
this.BindingContext = new RangeViewModel();
layer.ShapesSource = MapSource.FromUri(new Uri("https://cdn.syncfusion.com/maps/map-data/world-map.json"));
layer.DataSource = rangeViewModel.WorldPopulationDensity;
layer.ShapeDataField = "name";
layer.PrimaryValuePath="CountryName";
layer.ShowBubbles = true;
MapBubbleSettings bubbleSetting = new MapBubbleSettings()
{
    ColorValuePath = "Population",
    SizeValuePath = "Population"
};
bubbleSetting.ColorMappings.Add(new RangeColorMapping()
{
    Color = Color.FromRgb(128, 159, 255),
    From = 0,
    To = 100,
    Text = "0-100"
});
bubbleSetting.ColorMappings.Add(new RangeColorMapping()
{
    Color = Color.FromRgb(51, 102, 255),
    From = 100,
    To = 200,
    Text = "100-200"
});
bubbleSetting.ColorMappings.Add(new RangeColorMapping()
{
    Color = Color.FromRgb(0, 57, 230),
    From = 200,
    To = 300,
    Text = "200-300"
});
MapLegend legendSet = new MapLegend();
legendSet.SourceType = LegendSourceType.Bubble;
legendSet.Placement = Syncfusion.Maui.Core.LegendPlacement.Bottom;
MapLabelStyle mapLabelStyle = new MapLabelStyle();
mapLabelStyle.TextColor = Colors.Green;
mapLabelStyle.FontSize = 12;
mapLabelStyle.FontAttributes = FontAttributes.Bold;
legendSet.TextStyle = mapLabelStyle;
layer.Legend = legendSet;
maps.Layer = layer;
this.Content = maps;

Methods

OnBindingContextChanged()

Invoked whenever the binding context of the View changes.

Declaration

protected override void OnBindingContextChanged()