Class MapBubbleSettings

Represents the map bubble settings.

Inheritance

System.Object

MapBubbleSettings

Namespace: Syncfusion.Maui.Maps

Assembly: Syncfusion.Maui.Maps.dll

Syntax

public class MapBubbleSettings : BindableObject

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.

<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()