MAUI

  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class MapLegend

    Show / Hide Table of Contents

    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.

    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"/>
             </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()
    Back to top Generated by DocFX
    Copyright © 2001 - 2023 Syncfusion Inc. All Rights Reserved