menu

MAUI

  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class MapBubbleSettings - MAUI API Reference | Syncfusion

    Show / Hide Table of Contents

    Class MapBubbleSettings

    Represents the map bubble settings.

    Inheritance
    System.Object
    MapBubbleSettings
    Namespace: Syncfusion.Maui.Maps
    Assembly: Syncfusion.Maui.Maps.dll
    Syntax
    public class MapBubbleSettings : Element, IThemeElement
    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"
                             ShowBubbleTooltip="True">
    
             <map:MapShapeLayer.BubbleSettings>
                 <map:MapBubbleSettings SizeValuePath="UsersCount"
                                         MinSize="20"
                                         MaxSize="80"
                                         Opacity="0.5"
                                         Fill="#0f3bb1"
                                         Stroke="White"
                                         StrokeThickness="1"
                                         ColorValuePath="UserCount"
                                         HoverFill="#396EDA"
                                         HoverStroke="#0F3BB1"
                                         HoverStrokeThickness="1.5">
    
                    <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 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;
    layer.ShowBubbleTooltip = true;
    MapBubbleSettings bubbleSetting = new MapBubbleSettings()
    {
       SizeValuePath = "UsersCount",
       MinSize = 20,
       MaxSize = 80,
       Fill = Color.FromRgb(15, 59, 177),
       Stroke = Colors.White,
       StrokeThickness = 1,
       ColorValuePath = "UsersCount",
       HoverFill = Color.FromRgb(57, 110, 218)
    };
    layer.BubbleSettings = bubbleSetting;
    RangeColorMapping colorMapping1 = new RangeColorMapping();
    colorMapping1.Color =Color.FromRgb(128, 159, 255);
    colorMapping1.From = 0;
    colorMapping1.To = 100;
    colorMapping1.Text = "0-100";
    RangeColorMapping colorMapping2 = new RangeColorMapping();
    colorMapping2.Color = Color.FromRgb(51, 102, 255);
    colorMapping2.From = 100;
    colorMapping2.To = 200;
    colorMapping2.Text = "100-200";
    RangeColorMapping colorMapping3 = new RangeColorMapping();
    colorMapping3.Color = Color.FromRgb(0, 57, 230);
    colorMapping3.From = 200;
    colorMapping3.To = 300;
    colorMapping3.Text = "200-300";
    layer.ColorMappings.Add(colorMapping1);
    layer.ColorMappings.Add(colorMapping2);
    layer.ColorMappings.Add(colorMapping3);
    MapLegend legendSet = new MapLegend();
    legendSet.SourceType = LegendSourceType.Bubble;
    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

    MapBubbleSettings()

    Initializes a new instance of the MapBubbleSettings class.

    Declaration
    public MapBubbleSettings()

    Fields

    ColorMappingsProperty

    Identifies the ColorMappings bindable property.

    Declaration
    public static readonly BindableProperty ColorMappingsProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for ColorMappings bindable property.

    ColorValuePathProperty

    Identifies the ColorValuePath dependency property.

    Declaration
    public static readonly BindableProperty ColorValuePathProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for ColorValuePath dependency property.

    FillProperty

    Identifies the Fill bindable property.

    Declaration
    public static readonly BindableProperty FillProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for Fill bindable property.

    HoverFillProperty

    Identifies the HoverFill bindable property.

    Declaration
    public static readonly BindableProperty HoverFillProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for HoverFill bindable property.

    HoverStrokeProperty

    Identifies the HoverStroke bindable property.

    Declaration
    public static readonly BindableProperty HoverStrokeProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for HoverStroke bindable property.

    HoverStrokeThicknessProperty

    Identifies the HoverStrokeThickness bindable property.

    Declaration
    public static readonly BindableProperty HoverStrokeThicknessProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for HoverStrokeThickness bindable property.

    MaxSizeProperty

    Identifies the MaxSize bindable property.

    Declaration
    public static readonly BindableProperty MaxSizeProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for MaxSize bindable property.

    MinSizeProperty

    Identifies the MinSize bindable property.

    Declaration
    public static readonly BindableProperty MinSizeProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for MinSize bindable property.

    OpacityProperty

    Identifies the Opacity bindable property.

    Declaration
    public static readonly BindableProperty OpacityProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for Opacity bindable property.

    SizeValuePathProperty

    Identifies the SizeValuePath bindable property.

    Declaration
    public static readonly BindableProperty SizeValuePathProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for SizeValuePath bindable property.

    StrokeProperty

    Identifies the Stroke bindable property.

    Declaration
    public static readonly BindableProperty StrokeProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for Stroke bindable property.

    StrokeThicknessProperty

    Identifies the StrokeThickness bindable property.

    Declaration
    public static readonly BindableProperty StrokeThicknessProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    The identifier for StrokeThickness bindable property.

    Properties

    ColorMappings

    Gets or sets the list of ColorMapping to apply color for map bubble with certain constrains.

    Declaration
    public ObservableCollection<ColorMapping> ColorMappings { get; set; }
    Property Value
    Type Description
    System.Collections.ObjectModel.ObservableCollection<ColorMapping>

    ObservableCollection of ColorMapping.

    Remarks

    This property contain collection of ColorMapping which contains value/range and the corresponding color for it.

    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"
                             ShowBubbleTooltip="True">
    
             <map:MapShapeLayer.BubbleSettings>
                 <map:MapBubbleSettings SizeValuePath="UsersCount"
                                         MinSize="20"
                                         MaxSize="80"
                                         Opacity="0.5"
                                         Fill="#0f3bb1"
                                         Stroke="White"
                                         StrokeThickness="1"
                                         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>
       </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;
    layer.ShowBubbleTooltip = true;
    MapBubbleSettings bubbleSetting = new MapBubbleSettings()
    {
       SizeValuePath = "UsersCount",
       MinSize = 20,
       MaxSize = 80,
       Fill = Color.FromRgb(15, 59, 177),
       Stroke = Colors.White,
       StrokeThickness = 1,
       ColorValuePath = "UsersCount"
    };
    layer.BubbleSettings = bubbleSetting;
    RangeColorMapping colorMapping1 = new RangeColorMapping();
    colorMapping1.Color =Color.FromRgb(128, 159, 255);
    colorMapping1.From = 0;
    colorMapping1.To = 100;
    colorMapping1.Text = "0-100";
    RangeColorMapping colorMapping2 = new RangeColorMapping();
    colorMapping2.Color = Color.FromRgb(51, 102, 255);
    colorMapping2.From = 100;
    colorMapping2.To = 200;
    colorMapping2.Text = "100-200";
    RangeColorMapping colorMapping3 = new RangeColorMapping();
    colorMapping3.Color = Color.FromRgb(0, 57, 230);
    colorMapping3.From = 200;
    colorMapping3.To = 300;
    colorMapping3.Text = "200-300";
    layer.ColorMappings.Add(colorMapping1);
    layer.ColorMappings.Add(colorMapping2);
    layer.ColorMappings.Add(colorMapping3);
    maps.Layer = layer;
    this.Content = maps;

    ColorValuePath

    Gets or sets the field value to be fetched from data for each shape used to determine the bubble color in the shape layer of the maps.

    Declaration
    public string ColorValuePath { get; set; }
    Property Value
    Type Description
    System.String

    The color value path of the bubbles. The default value is string.Empty.

    Remarks

    If the field represents direct color value, then the color is applied to bubble; otherwise, the bubble color applied based on the specific Value or the range of values which falls between From and To in the ColorMappings.

    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"
                             ShowBubbleTooltip="True">
    
             <map:MapShapeLayer.BubbleSettings>
                 <map:MapBubbleSettings SizeValuePath="UsersCount"
                                         MinSize="20"
                                         MaxSize="80"
                                         Opacity="0.5"
                                         Fill="#0f3bb1"
                                         Stroke="White"
                                         StrokeThickness="1"
                                         ColorValuePath="UserCount" />
             </map:MapShapeLayer.BubbleSettings>
    
          </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;
    layer.ShowBubbleTooltip = true;
    MapBubbleSettings bubbleSetting = new MapBubbleSettings()
    {
       SizeValuePath = "UsersCount",
       MinSize = 20,
       MaxSize = 80,
       Fill = Color.FromRgb(15, 59, 177),
       Stroke = Colors.White,
       StrokeThickness = 1,
       ColorValuePath = "UsersCount"
    };
    layer.BubbleSettings = bubbleSetting;
    maps.Layer = layer;
    this.Content = maps;

    Fill

    Gets or sets the Brush that paints the interior of the bubble.

    Declaration
    public Brush Fill { get; set; }
    Property Value
    Type Description
    Microsoft.Maui.Controls.Brush

    A Brush that specifies how the map bubble interior is painted.

    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"
                             ShowBubbleTooltip="True">
    
             <map:MapShapeLayer.BubbleSettings>
                 <map:MapBubbleSettings SizeValuePath="UsersCount"
                                         MinSize="20"
                                         MaxSize="80"
                                         Opacity="0.5"
                                         Fill="#0f3bb1" />
             </map:MapShapeLayer.BubbleSettings>
    
          </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;
    layer.ShowBubbleTooltip = true;
    MapBubbleSettings bubbleSetting = new MapBubbleSettings()
    {
       SizeValuePath = "UsersCount",
       MinSize = 20,
       MaxSize = 80,
       Fill = Color.FromRgb(15, 59, 177)
    };
    layer.BubbleSettings = bubbleSetting;
    maps.Layer = layer;
    this.Content = maps;

    HoverFill

    Gets or sets the brush that paints the interior of the mouse hovered bubble in desktop.

    Declaration
    public Brush HoverFill { get; set; }
    Property Value
    Type Description
    Microsoft.Maui.Controls.Brush

    A Brush that specifies how the map bubble interior is painted while hovered.

    Remarks
    • If HoverFill is Microsoft.Maui.Graphics.Colors.Transparent, then the hover effect will be disabled.
    • If HoverFill is null, then the saturated Fill color will be applied when hovering the bubble.
    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"
                             ShowBubbleTooltip="True">
    
             <map:MapShapeLayer.BubbleSettings>
                 <map:MapBubbleSettings SizeValuePath="UsersCount"
                                         MinSize="20"
                                         MaxSize="80"
                                         Opacity="0.5"
                                         Fill="#0f3bb1"
                                         Stroke="White"
                                         StrokeThickness="1"
                                         ColorValuePath="UserCount"
                                         HoverFill="#396EDA">
    
                    <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>
       </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;
    layer.ShowBubbleTooltip = true;
    MapBubbleSettings bubbleSetting = new MapBubbleSettings()
    {
       SizeValuePath = "UsersCount",
       MinSize = 20,
       MaxSize = 80,
       Fill = Color.FromRgb(15, 59, 177),
       Stroke = Colors.White,
       StrokeThickness = 1,
       ColorValuePath = "UsersCount",
       HoverFill = Color.FromRgb(57, 110, 218)
    };
    layer.BubbleSettings = bubbleSetting;
    RangeColorMapping colorMapping1 = new RangeColorMapping();
    colorMapping1.Color =Color.FromRgb(128, 159, 255);
    colorMapping1.From = 0;
    colorMapping1.To = 100;
    colorMapping1.Text = "0-100";
    RangeColorMapping colorMapping2 = new RangeColorMapping();
    colorMapping2.Color = Color.FromRgb(51, 102, 255);
    colorMapping2.From = 100;
    colorMapping2.To = 200;
    colorMapping2.Text = "100-200";
    RangeColorMapping colorMapping3 = new RangeColorMapping();
    colorMapping3.Color = Color.FromRgb(0, 57, 230);
    colorMapping3.From = 200;
    colorMapping3.To = 300;
    colorMapping3.Text = "200-300";
    layer.ColorMappings.Add(colorMapping1);
    layer.ColorMappings.Add(colorMapping2);
    layer.ColorMappings.Add(colorMapping3);
    maps.Layer = layer;
    this.Content = maps;

    HoverStroke

    Gets or sets the Brush that specifies how the mouse hovered bubble outline to be painted on desktop.

    Declaration
    public Brush HoverStroke { get; set; }
    Property Value
    Type Description
    Microsoft.Maui.Controls.Brush

    A Brush that specifies how the map bubble outline is painted while hovered.

    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"
                             ShowBubbleTooltip="True">
    
             <map:MapShapeLayer.BubbleSettings>
                 <map:MapBubbleSettings SizeValuePath="UsersCount"
                                         MinSize="20"
                                         MaxSize="80"
                                         Opacity="0.5"
                                         Fill="#0f3bb1"
                                         Stroke="White"
                                         StrokeThickness="1"
                                         ColorValuePath="UserCount"
                                         HoverFill="#396EDA"
                                         HoverStroke="#0F3BB1">
    
                    <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>
       </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;
    layer.ShowBubbleTooltip = true;
    MapBubbleSettings bubbleSetting = new MapBubbleSettings()
    {
       SizeValuePath = "UsersCount",
       MinSize = 20,
       MaxSize = 80,
       Fill = Color.FromRgb(15, 59, 177),
       Stroke = Colors.White,
       StrokeThickness = 1,
       ColorValuePath = "UsersCount",
       HoverFill = Color.FromRgb(57, 110, 218),
       HoverStroke = Color.FromRgb(15, 59, 177)
    };
    layer.BubbleSettings = bubbleSetting;
    RangeColorMapping colorMapping1 = new RangeColorMapping();
    colorMapping1.Color =Color.FromRgb(128, 159, 255);
    colorMapping1.From = 0;
    colorMapping1.To = 100;
    colorMapping1.Text = "0-100";
    RangeColorMapping colorMapping2 = new RangeColorMapping();
    colorMapping2.Color = Color.FromRgb(51, 102, 255);
    colorMapping2.From = 100;
    colorMapping2.To = 200;
    colorMapping2.Text = "100-200";
    RangeColorMapping colorMapping3 = new RangeColorMapping();
    colorMapping3.Color = Color.FromRgb(0, 57, 230);
    colorMapping3.From = 200;
    colorMapping3.To = 300;
    colorMapping3.Text = "200-300";
    layer.ColorMappings.Add(colorMapping1);
    layer.ColorMappings.Add(colorMapping2);
    layer.ColorMappings.Add(colorMapping3);
    maps.Layer = layer;
    this.Content = maps;

    HoverStrokeThickness

    Gets or sets the value that specifies the width of the mouse hovered bubble stroke outline on desktop.

    Declaration
    public double HoverStrokeThickness { get; set; }
    Property Value
    Type Description
    System.Double

    It specifies the width of the map bubble stroke outline while hovered. The default value is double.NaN.

    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"
                             ShowBubbleTooltip="True">
    
             <map:MapShapeLayer.BubbleSettings>
                 <map:MapBubbleSettings SizeValuePath="UsersCount"
                                         MinSize="20"
                                         MaxSize="80"
                                         Opacity="0.5"
                                         Fill="#0f3bb1"
                                         Stroke="White"
                                         StrokeThickness="1"
                                         ColorValuePath="UserCount"
                                         HoverFill="#396EDA"
                                         HoverStroke="#0F3BB1"
                                         HoverStrokeThickness="1.5">
    
                    <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>
       </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;
    layer.ShowBubbleTooltip = true;
    MapBubbleSettings bubbleSetting = new MapBubbleSettings()
    {
       SizeValuePath = "UsersCount",
       MinSize = 20,
       MaxSize = 80,
       Fill = Color.FromRgb(15, 59, 177),
       Stroke = Colors.White,
       StrokeThickness = 1,
       ColorValuePath = "UsersCount",
       HoverFill = Color.FromRgb(57, 110, 218),
       HoverStroke = Color.FromRgb(15, 59, 177),
       HoverStrokeThickness = 1
    };
    layer.BubbleSettings = bubbleSetting;
    RangeColorMapping colorMapping1 = new RangeColorMapping();
    colorMapping1.Color =Color.FromRgb(128, 159, 255);
    colorMapping1.From = 0;
    colorMapping1.To = 100;
    colorMapping1.Text = "0-100";
    RangeColorMapping colorMapping2 = new RangeColorMapping();
    colorMapping2.Color = Color.FromRgb(51, 102, 255);
    colorMapping2.From = 100;
    colorMapping2.To = 200;
    colorMapping2.Text = "100-200";
    RangeColorMapping colorMapping3 = new RangeColorMapping();
    colorMapping3.Color = Color.FromRgb(0, 57, 230);
    colorMapping3.From = 200;
    colorMapping3.To = 300;
    colorMapping3.Text = "200-300";
    layer.ColorMappings.Add(colorMapping1);
    layer.ColorMappings.Add(colorMapping2);
    layer.ColorMappings.Add(colorMapping3);
    maps.Layer = layer;
    this.Content = maps;

    MaxSize

    Gets or sets the maximum bubble size.

    Declaration
    public double MaxSize { get; set; }
    Property Value
    Type Description
    System.Double

    The maximum size of the bubble. The default value is 50.

    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"
                             ShowBubbleTooltip="True">
    
             <map:MapShapeLayer.BubbleSettings>
                 <map:MapBubbleSettings SizeValuePath="UsersCount"
                                         MinSize="20"
                                         MaxSize="80" />
             </map:MapShapeLayer.BubbleSettings>
    
          </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;
    layer.ShowBubbleTooltip = true;
    MapBubbleSettings bubbleSetting = new MapBubbleSettings()
    {
       SizeValuePath = "UsersCount",
       MinSize = 20,
       MaxSize = 80
    };
    layer.BubbleSettings = bubbleSetting;
    maps.Layer = layer;
    this.Content = maps;

    MinSize

    Gets or sets the minimum bubble size.

    Declaration
    public double MinSize { get; set; }
    Property Value
    Type Description
    System.Double

    The minimum size of the bubble. The default value is 20.

    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"
                             ShowBubbleTooltip="True">
    
             <map:MapShapeLayer.BubbleSettings>
                 <map:MapBubbleSettings SizeValuePath="UsersCount"
                                         MinSize="20" />
             </map:MapShapeLayer.BubbleSettings>
    
          </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;
    layer.ShowBubbleTooltip = true;
    MapBubbleSettings bubbleSetting = new MapBubbleSettings()
    {
       SizeValuePath = "UsersCount",
       MinSize = 20
    };
    layer.BubbleSettings = bubbleSetting;
    maps.Layer = layer;
    this.Content = maps;

    Opacity

    Gets or sets the opacity for the map bubble.

    Declaration
    public double Opacity { get; set; }
    Property Value
    Type Description
    System.Double

    The bubbles opacity. The default value is 0.4.

    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"
                             ShowBubbleTooltip="True">
    
             <map:MapShapeLayer.BubbleSettings>
                 <map:MapBubbleSettings SizeValuePath="UsersCount"
                                         MinSize="20"
                                         MaxSize="80"
                                         Opacity="0.5" />
             </map:MapShapeLayer.BubbleSettings>
    
          </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;
    layer.ShowBubbleTooltip = true;
    MapBubbleSettings bubbleSetting = new MapBubbleSettings()
    {
       SizeValuePath = "UsersCount",
       MinSize = 20,
       MaxSize = 80,
       Opacity = 0.5
    };
    layer.BubbleSettings = bubbleSetting;
    maps.Layer = layer;
    this.Content = maps;

    SizeValuePath

    Gets or sets the field value to be fetched from data for each shape used to determine the bubble size in the shape layer of the maps.

    Declaration
    public string SizeValuePath { get; set; }
    Property Value
    Type Description
    System.String

    The size value path of the bubbles. The default value is string.Empty.

    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"
                             ShowBubbleTooltip="True">
    
             <map:MapShapeLayer.BubbleSettings>
                 <map:MapBubbleSettings SizeValuePath="UsersCount" />
             </map:MapShapeLayer.BubbleSettings>
    
          </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;
    layer.ShowBubbleTooltip = true;
    MapBubbleSettings bubbleSetting = new MapBubbleSettings()
    {
       SizeValuePath = "UsersCount"
    };
    layer.BubbleSettings = bubbleSetting;
    maps.Layer = layer;
    this.Content = maps;

    Stroke

    Gets or sets the Brush that specifies how the bubble outline to be painted.

    Declaration
    public Brush Stroke { get; set; }
    Property Value
    Type Description
    Microsoft.Maui.Controls.Brush

    A Brush that specifies how the map bubble outline is painted.

    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"
                             ShowBubbleTooltip="True">
    
             <map:MapShapeLayer.BubbleSettings>
                 <map:MapBubbleSettings SizeValuePath="UsersCount"
                                         MinSize="20"
                                         MaxSize="80"
                                         Opacity="0.5"
                                         Fill="#0f3bb1"
                                         Stroke="White" />
             </map:MapShapeLayer.BubbleSettings>
    
          </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;
    layer.ShowBubbleTooltip = true;
    MapBubbleSettings bubbleSetting = new MapBubbleSettings()
    {
       SizeValuePath = "UsersCount",
       MinSize = 20,
       MaxSize = 80,
       Fill = Color.FromRgb(15, 59, 177),
       Stroke = Colors.White
    };
    layer.BubbleSettings = bubbleSetting;
    maps.Layer = layer;
    this.Content = maps;

    StrokeThickness

    Gets or sets the value that specifies the width of the bubble stroke outline.

    Declaration
    public double StrokeThickness { get; set; }
    Property Value
    Type Description
    System.Double

    It specifies the width of the map bubble stroke outline. The default value is 1.

    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"
                             ShowBubbleTooltip="True">
    
             <map:MapShapeLayer.BubbleSettings>
                 <map:MapBubbleSettings SizeValuePath="UsersCount"
                                         MinSize="20"
                                         MaxSize="80"
                                         Opacity="0.5"
                                         Fill="#0f3bb1"
                                         Stroke="White"
                                         StrokeThickness="1" />
             </map:MapShapeLayer.BubbleSettings>
    
          </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;
    layer.ShowBubbleTooltip = true;
    MapBubbleSettings bubbleSetting = new MapBubbleSettings()
    {
       SizeValuePath = "UsersCount",
       MinSize = 20,
       MaxSize = 80,
       Fill = Color.FromRgb(15, 59, 177),
       Stroke = Colors.White,
       StrokeThickness = 1
    };
    layer.BubbleSettings = bubbleSetting;
    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 - 2025 Syncfusion Inc. All Rights Reserved