menu

UWP

  • Code Examples
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class BubbleMarkerSetting - UWP API Reference | Syncfusion

    Show / Hide Table of Contents

    Class BubbleMarkerSetting

    Represent the BubbleMarkerSettings in the SfMap.

    Inheritance
    System.Object
    BubbleMarkerSetting
    Namespace: Syncfusion.UI.Xaml.Maps
    Assembly: Syncfusion.SfMaps.UWP.dll
    Syntax
    public class BubbleMarkerSetting : DependencyObject
    Remarks

    BubbleMarkerSetting class is used to set setting for the bubbles in the map.This class is used to set MaxSize, MinSize, Fill, Stoke, StokeThickness and the ValuePath for the Bubble.

    Examples
    using Syncfusion.UI.Xaml.Maps;
    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using Windows.Foundation;
    using Windows.Foundation.Collections;
    using Windows.UI;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Controls.Primitives;
    using Windows.UI.Xaml.Data;
    using Windows.UI.Xaml.Input;
    using Windows.UI.Xaml.Media;
    using Windows.UI.Xaml.Navigation;
    
    
    namespace MapApp
    {
        public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();
                SfMap syncMap = new SfMap();
                ViewModel viewModel = new ViewModel();
                ShapeFileLayer layer = new ShapeFileLayer();
                layer.Uri = "MapApp.world1.shp";
                layer.ItemsSource = viewModel.Models;
                layer.ShapeIDPath = "Country";
                layer.ShapeIDTableField = "NAME";
                BubbleMarkerSetting bubbleSetting = new BubbleMarkerSetting();
                bubbleSetting.AutoFillColor = true;
                bubbleSetting.Fill = new SolidColorBrush(Colors.Red);
                bubbleSetting.ValuePath = "AverageHighTemperature";
                bubbleSetting.Stroke = new SolidColorBrush(Colors.Black);
                bubbleSetting.StrokeThickness = 5;
                bubbleSetting.MaxSize = 500;
                bubbleSetting.MinSize = 100;
                layer.BubbleMarkerSetting = bubbleSetting;
                syncMap.Layers.Add(layer);
    
    
            }
    
        }
        public class Weather
        {
    
            public int CurrentTemperature { get; set; }
            public int AverageHighTemperature { get; set; }
            public int AverageLowTemperature { get; set; }
            public string Country { get; set; }
            public string Continent { get; set; }
            public string City { get; set; }
            public string WeatherDescription { get; set; }
            public int Humidity { get; set; }
            public string Longitude { get; set; }
            public string Latitude { get; set; }
    
            public static List<Weather> GetWeatherData()
            {
                List<Weather> weatherCollection = new List<Weather>();
                weatherCollection.Add(new Weather() { Humidity = 86, CurrentTemperature = 44, AverageHighTemperature = 63, AverageLowTemperature = 46, City = "Chicago", Continent = "North America", Country = "United States", WeatherDescription = "Partly Cloudy", Latitude = "41.8500N", Longitude = "87.6500W" });
                weatherCollection.Add(new Weather() { Humidity = 94, CurrentTemperature = 77, AverageHighTemperature = 89, AverageLowTemperature = 75, City = "Chennai", Continent = "Asia", Country = "India", WeatherDescription = "Rainy", Latitude = "12.5810N", Longitude = "76.0740E" });
                weatherCollection.Add(new Weather() { Humidity = 63, CurrentTemperature = 59, AverageHighTemperature = 66, AverageLowTemperature = 45, City = "Beiging", Continent = "Asia", Country = "China", WeatherDescription = "Partly Cloudy", Longitude = "39.9100N", Latitude = "116.4000E" });
                weatherCollection.Add(new Weather() { Humidity = 60, CurrentTemperature = 70, AverageHighTemperature = 70, AverageLowTemperature = 57, City = "Tokyo", Continent = "Asia", Country = "Japan", WeatherDescription = "Partly Cloudy", Latitude = "35.6833N", Longitude = "139.7667E" });
                weatherCollection.Add(new Weather() { Humidity = 72, CurrentTemperature = 55, AverageHighTemperature = 47, AverageLowTemperature = 38, City = "Moscow", Continent = "Asia", Country = "Russia", WeatherDescription = "Clear", Latitude = "55.7517N", Longitude = "37.6178E" });
                weatherCollection.Add(new Weather() { Humidity = 70, CurrentTemperature = 53, AverageHighTemperature = 69, AverageLowTemperature = 54, City = "Cape Town", Continent = "Africa", Country = "South Africa", WeatherDescription = "Partly Cloudy", Latitude = "33.9767S", Longitude = "18.4244E" });
                weatherCollection.Add(new Weather() { Humidity = 77, CurrentTemperature = 64, AverageHighTemperature = 69, AverageLowTemperature = 56, City = "Anchorage", Continent = "North America", Country = "United States", WeatherDescription = "Mostly Cloudy", Latitude = "61.1919N", Longitude = "149.7621W" });
                weatherCollection.Add(new Weather() { Humidity = 55, CurrentTemperature = 91, AverageHighTemperature = 95, AverageLowTemperature = 74, City = "Panama", Continent = "South America", Country = "Republic Of  Panama", WeatherDescription = "Fair", Latitude = "8.7515N", Longitude = "79.8772W" });
                weatherCollection.Add(new Weather() { Humidity = 88, CurrentTemperature = 61, AverageHighTemperature = 76, AverageLowTemperature = 59, City = "Sao Paulo", Continent = "South America", Country = "Brazil", WeatherDescription = "Fair", Latitude = "23.5000S", Longitude = "46.6167W" });
                weatherCollection.Add(new Weather() { Humidity = 83, CurrentTemperature = 70, AverageHighTemperature = 85, AverageLowTemperature = 72, City = "Cairo", Continent = "Africa", Country = "Egypt", WeatherDescription = "Mostly Cloudy", Latitude = "31.2262E", Longitude = "30.0566N" });
                weatherCollection.Add(new Weather() { Humidity = 78, CurrentTemperature = 70, AverageHighTemperature = 85, AverageLowTemperature = 72, City = "Melbourne", Continent = "Oceania", Country = "Australia", WeatherDescription = "Cloudy", Latitude = "35.0833S", Longitude = "142.0667E" });
                return weatherCollection;
            }
        }
        public class ViewModel
        {
            public List<Weather> Models
            {
                get;
                set;
            }
    
            public ViewModel()
            {
    
                this.Models = new List<Weather>();
                this.Models = Weather.GetWeatherData();
    
            }
        }
    
    }

    Constructors

    BubbleMarkerSetting()

    Initializes a new instance of the BubbleMarkerSetting class.

    Declaration
    public BubbleMarkerSetting()
    Remarks

    Initialize the object value for the BubbleMarkerSettings and it's property values.

    Fields

    AutoFillColorProperty

    // Using a DependencyProperty as the backing store for AutoFillColor. This enables animation, styling, binding, etc...

    Declaration
    public static readonly DependencyProperty AutoFillColorProperty
    Field Value
    Type
    Windows.UI.Xaml.DependencyProperty

    BubbleTypeProperty

    // Using a DependencyProperty as the backing store for BubbleType. This enables animation, styling, binding, etc...

    Declaration
    public static readonly DependencyProperty BubbleTypeProperty
    Field Value
    Type
    Windows.UI.Xaml.DependencyProperty

    ColorMappingsProperty

    // Using a DependencyProperty as the backing store for ColorMappings. This enables animation, styling, binding, etc...

    Declaration
    public static readonly DependencyProperty ColorMappingsProperty
    Field Value
    Type
    Windows.UI.Xaml.DependencyProperty

    ColorValuePathProperty

    // Using a DependencyProperty as the backing store for ShapeValuePath. This enables animation, styling, binding, etc...

    Declaration
    public static readonly DependencyProperty ColorValuePathProperty
    Field Value
    Type
    Windows.UI.Xaml.DependencyProperty

    CustomTemplateProperty

    // Using a DependencyProperty as the backing store for CustomTemplate. This enables animation, styling, binding, etc...

    Declaration
    public static readonly DependencyProperty CustomTemplateProperty
    Field Value
    Type
    Windows.UI.Xaml.DependencyProperty

    FillProperty

    // Using a DependencyProperty as the backing store for Fill. This enables animation, styling, binding, etc...

    Declaration
    public static readonly DependencyProperty FillProperty
    Field Value
    Type
    Windows.UI.Xaml.DependencyProperty

    MaxSizeProperty

    // Using a DependencyProperty as the backing store for MaxSize. This enables animation, styling, binding, etc...

    Declaration
    public static readonly DependencyProperty MaxSizeProperty
    Field Value
    Type
    Windows.UI.Xaml.DependencyProperty

    MinSizeProperty

    // Using a DependencyProperty as the backing store for MinSize. This enables animation, styling, binding, etc...

    Declaration
    public static readonly DependencyProperty MinSizeProperty
    Field Value
    Type
    Windows.UI.Xaml.DependencyProperty

    OpacityProperty

    // Using a DependencyProperty as the backing store for BubbleOpacity. This enables animation, styling, binding, etc...

    Declaration
    public static readonly DependencyProperty OpacityProperty
    Field Value
    Type
    Windows.UI.Xaml.DependencyProperty

    SizeRatioProperty

    // Using a DependencyProperty as the backing store for ValueRatio. This enables animation, styling, binding, etc...

    Declaration
    public static readonly DependencyProperty SizeRatioProperty
    Field Value
    Type
    Windows.UI.Xaml.DependencyProperty

    StrokeProperty

    // Using a DependencyProperty as the backing store for Stroke. This enables animation, styling, binding, etc...

    Declaration
    public static readonly DependencyProperty StrokeProperty
    Field Value
    Type
    Windows.UI.Xaml.DependencyProperty

    StrokeThicknessProperty

    // Using a DependencyProperty as the backing store for StrokeThickness. This enables animation, styling, binding, etc...

    Declaration
    public static readonly DependencyProperty StrokeThicknessProperty
    Field Value
    Type
    Windows.UI.Xaml.DependencyProperty

    TooltipSettingsProperty

    Using a DependencyProperty as the backing store for TooltipSettings. This enables animation, styling, binding, etc...

    Declaration
    public static readonly DependencyProperty TooltipSettingsProperty
    Field Value
    Type
    Windows.UI.Xaml.DependencyProperty

    ValuePathProperty

    // Using a DependencyProperty as the backing store for ValuePath. This enables animation, styling, binding, etc...

    Declaration
    public static readonly DependencyProperty ValuePathProperty
    Field Value
    Type
    Windows.UI.Xaml.DependencyProperty

    Properties

    AutoFillColor

    Gets or sets a value indicating whether fill color of bubbles from "Fill" property or "ColorMapping".

    Declaration
    public bool AutoFillColor { get; set; }
    Property Value
    Type Description
    System.Boolean

    Type :System.Boolean

    Remarks

    This property is used to determine fill of the bubble. Bubbles fill color will be determined by "Fill" property if "True" or determined by ColorMappings if "False".

    Examples
    using Syncfusion.UI.Xaml.Maps;
    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using Windows.Foundation;
    using Windows.Foundation.Collections;
    using Windows.UI;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Controls.Primitives;
    using Windows.UI.Xaml.Data;
    using Windows.UI.Xaml.Input;
    using Windows.UI.Xaml.Media;
    using Windows.UI.Xaml.Navigation;
    
    
    namespace MapApp
    {
        public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();
                SfMap syncMap = new SfMap();
                ViewModel viewModel = new ViewModel();
                ShapeFileLayer layer = new ShapeFileLayer();
                layer.Uri = "MapApp.world1.shp";
                layer.ItemsSource = viewModel.Models;
                layer.ShapeIDPath = "Country";
                layer.ShapeIDTableField = "NAME";
                BubbleMarkerSetting bubbleSetting = new BubbleMarkerSetting();
                bubbleSetting.AutoFillColor = true;          
                bubbleSetting.ValuePath = "AverageHighTemperature";
                bubbleSetting.Stroke = new SolidColorBrush(Colors.Black);
                bubbleSetting.StrokeThickness = 5;
                bubbleSetting.MaxSize = 500;
                bubbleSetting.MinSize = 100;
                layer.BubbleMarkerSetting = bubbleSetting;
                syncMap.Layers.Add(layer);
    
    
            }       
    
        }
        public class Weather
        {
    
            public int CurrentTemperature { get; set; }
            public int AverageHighTemperature { get; set; }
            public int AverageLowTemperature { get; set; }
            public string Country { get; set; }
            public string Continent { get; set; }
            public string City { get; set; }
            public string WeatherDescription { get; set; }
            public int Humidity { get; set; }
            public string Longitude { get; set; }
            public string Latitude { get; set; }
    
            public static List<Weather> GetWeatherData()
            {
                List<Weather> weatherCollection = new List<Weather>();
                weatherCollection.Add(new Weather() { Humidity = 86, CurrentTemperature = 44, AverageHighTemperature = 63, AverageLowTemperature = 46, City = "Chicago", Continent = "North America", Country = "United States", WeatherDescription = "Partly Cloudy", Latitude = "41.8500N", Longitude = "87.6500W" });
                weatherCollection.Add(new Weather() { Humidity = 94, CurrentTemperature = 77, AverageHighTemperature = 89, AverageLowTemperature = 75, City = "Chennai", Continent = "Asia", Country = "India", WeatherDescription = "Rainy", Latitude = "12.5810N", Longitude = "76.0740E" });
                weatherCollection.Add(new Weather() { Humidity = 63, CurrentTemperature = 59, AverageHighTemperature = 66, AverageLowTemperature = 45, City = "Beiging", Continent = "Asia", Country = "China", WeatherDescription = "Partly Cloudy", Longitude = "39.9100N", Latitude = "116.4000E" });
                weatherCollection.Add(new Weather() { Humidity = 60, CurrentTemperature = 70, AverageHighTemperature = 70, AverageLowTemperature = 57, City = "Tokyo", Continent = "Asia", Country = "Japan", WeatherDescription = "Partly Cloudy", Latitude = "35.6833N", Longitude = "139.7667E" });
                weatherCollection.Add(new Weather() { Humidity = 72, CurrentTemperature = 55, AverageHighTemperature = 47, AverageLowTemperature = 38, City = "Moscow", Continent = "Asia", Country = "Russia", WeatherDescription = "Clear", Latitude = "55.7517N", Longitude = "37.6178E" });
                weatherCollection.Add(new Weather() { Humidity = 70, CurrentTemperature = 53, AverageHighTemperature = 69, AverageLowTemperature = 54, City = "Cape Town", Continent = "Africa", Country = "South Africa", WeatherDescription = "Partly Cloudy", Latitude = "33.9767S", Longitude = "18.4244E" });
                weatherCollection.Add(new Weather() { Humidity = 77, CurrentTemperature = 64, AverageHighTemperature = 69, AverageLowTemperature = 56, City = "Anchorage", Continent = "North America", Country = "United States", WeatherDescription = "Mostly Cloudy", Latitude = "61.1919N", Longitude = "149.7621W" });
                weatherCollection.Add(new Weather() { Humidity = 55, CurrentTemperature = 91, AverageHighTemperature = 95, AverageLowTemperature = 74, City = "Panama", Continent = "South America", Country = "Republic Of  Panama", WeatherDescription = "Fair", Latitude = "8.7515N", Longitude = "79.8772W" });
                weatherCollection.Add(new Weather() { Humidity = 88, CurrentTemperature = 61, AverageHighTemperature = 76, AverageLowTemperature = 59, City = "Sao Paulo", Continent = "South America", Country = "Brazil", WeatherDescription = "Fair", Latitude = "23.5000S", Longitude = "46.6167W" });
                weatherCollection.Add(new Weather() { Humidity = 83, CurrentTemperature = 70, AverageHighTemperature = 85, AverageLowTemperature = 72, City = "Cairo", Continent = "Africa", Country = "Egypt", WeatherDescription = "Mostly Cloudy", Latitude = "31.2262E", Longitude = "30.0566N" });
                weatherCollection.Add(new Weather() { Humidity = 78, CurrentTemperature = 70, AverageHighTemperature = 85, AverageLowTemperature = 72, City = "Melbourne", Continent = "Oceania", Country = "Australia", WeatherDescription = "Cloudy", Latitude = "35.0833S", Longitude = "142.0667E" });
                return weatherCollection;
            }
        }
        public class ViewModel
        {
            public List<Weather> Models
            {
                get;
                set;
            }
    
            public ViewModel()
            {
    
                this.Models = new List<Weather>();
                this.Models = Weather.GetWeatherData();
    
            }
        }
    
    }

    BubbleType

    Gets or Sets BubbleType

    Declaration
    public BubbleType BubbleType { get; set; }
    Property Value
    Type
    BubbleType

    ColorMappings

    Gets or sets the list of RangeColorMapping to provide tree map like support for bubbles.

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

    ObservableCollection of RangeColorMapping.

    Remarks

    This property contain collection of RangeColorMapping which contains Range and the Corresponding color of the Range. This property is used to provide the Tree map like support for bubbles.

    Examples
    using Syncfusion.UI.Xaml.Maps;
    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using Windows.Foundation;
    using Windows.Foundation.Collections;
    using Windows.UI;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Controls.Primitives;
    using Windows.UI.Xaml.Data;
    using Windows.UI.Xaml.Input;
    using Windows.UI.Xaml.Media;
    using Windows.UI.Xaml.Navigation;
    
    
    namespace MapApp
    {
        public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();
                SfMap syncMap = new SfMap();
                ViewModel viewModel = new ViewModel();
                ShapeFileLayer layer = new ShapeFileLayer();
                layer.Uri = "MapApp.world1.shp";
                layer.ItemsSource = viewModel.Models;
                layer.ShapeIDPath = "Country";
                layer.ShapeIDTableField = "NAME";
                BubbleMarkerSetting bubbleSetting = new BubbleMarkerSetting();
                bubbleSetting.AutoFillColor = false;
                bubbleSetting.ColorMappings.Add(new RangeColorMapping { Range=0, Color=Colors.White });
                bubbleSetting.ColorMappings.Add(new RangeColorMapping { Range = 50, Color = Colors.Thistle });
                bubbleSetting.ColorMappings.Add(new RangeColorMapping { Range = 100, Color = Colors.Violet });
                bubbleSetting.ValuePath = "AverageHighTemperature";
                bubbleSetting.Stroke = new SolidColorBrush(Colors.Black);
                bubbleSetting.StrokeThickness = 5;
                bubbleSetting.MaxSize = 500;
                bubbleSetting.MinSize = 100;
                layer.BubbleMarkerSetting = bubbleSetting;
                syncMap.Layers.Add(layer);
    
    
            }       
    
        }
        public class Weather
        {
    
            public int CurrentTemperature { get; set; }
            public int AverageHighTemperature { get; set; }
            public int AverageLowTemperature { get; set; }
            public string Country { get; set; }
            public string Continent { get; set; }
            public string City { get; set; }
            public string WeatherDescription { get; set; }
            public int Humidity { get; set; }
            public string Longitude { get; set; }
            public string Latitude { get; set; }
    
            public static List<Weather> GetWeatherData()
            {
                List<Weather> weatherCollection = new List<Weather>();
                weatherCollection.Add(new Weather() { Humidity = 86, CurrentTemperature = 44, AverageHighTemperature = 63, AverageLowTemperature = 46, City = "Chicago", Continent = "North America", Country = "United States", WeatherDescription = "Partly Cloudy", Latitude = "41.8500N", Longitude = "87.6500W" });
                weatherCollection.Add(new Weather() { Humidity = 94, CurrentTemperature = 77, AverageHighTemperature = 89, AverageLowTemperature = 75, City = "Chennai", Continent = "Asia", Country = "India", WeatherDescription = "Rainy", Latitude = "12.5810N", Longitude = "76.0740E" });
                weatherCollection.Add(new Weather() { Humidity = 63, CurrentTemperature = 59, AverageHighTemperature = 66, AverageLowTemperature = 45, City = "Beiging", Continent = "Asia", Country = "China", WeatherDescription = "Partly Cloudy", Longitude = "39.9100N", Latitude = "116.4000E" });
                weatherCollection.Add(new Weather() { Humidity = 60, CurrentTemperature = 70, AverageHighTemperature = 70, AverageLowTemperature = 57, City = "Tokyo", Continent = "Asia", Country = "Japan", WeatherDescription = "Partly Cloudy", Latitude = "35.6833N", Longitude = "139.7667E" });
                weatherCollection.Add(new Weather() { Humidity = 72, CurrentTemperature = 55, AverageHighTemperature = 47, AverageLowTemperature = 38, City = "Moscow", Continent = "Asia", Country = "Russia", WeatherDescription = "Clear", Latitude = "55.7517N", Longitude = "37.6178E" });
                weatherCollection.Add(new Weather() { Humidity = 70, CurrentTemperature = 53, AverageHighTemperature = 69, AverageLowTemperature = 54, City = "Cape Town", Continent = "Africa", Country = "South Africa", WeatherDescription = "Partly Cloudy", Latitude = "33.9767S", Longitude = "18.4244E" });
                weatherCollection.Add(new Weather() { Humidity = 77, CurrentTemperature = 64, AverageHighTemperature = 69, AverageLowTemperature = 56, City = "Anchorage", Continent = "North America", Country = "United States", WeatherDescription = "Mostly Cloudy", Latitude = "61.1919N", Longitude = "149.7621W" });
                weatherCollection.Add(new Weather() { Humidity = 55, CurrentTemperature = 91, AverageHighTemperature = 95, AverageLowTemperature = 74, City = "Panama", Continent = "South America", Country = "Republic Of  Panama", WeatherDescription = "Fair", Latitude = "8.7515N", Longitude = "79.8772W" });
                weatherCollection.Add(new Weather() { Humidity = 88, CurrentTemperature = 61, AverageHighTemperature = 76, AverageLowTemperature = 59, City = "Sao Paulo", Continent = "South America", Country = "Brazil", WeatherDescription = "Fair", Latitude = "23.5000S", Longitude = "46.6167W" });
                weatherCollection.Add(new Weather() { Humidity = 83, CurrentTemperature = 70, AverageHighTemperature = 85, AverageLowTemperature = 72, City = "Cairo", Continent = "Africa", Country = "Egypt", WeatherDescription = "Mostly Cloudy", Latitude = "31.2262E", Longitude = "30.0566N" });
                weatherCollection.Add(new Weather() { Humidity = 78, CurrentTemperature = 70, AverageHighTemperature = 85, AverageLowTemperature = 72, City = "Melbourne", Continent = "Oceania", Country = "Australia", WeatherDescription = "Cloudy", Latitude = "35.0833S", Longitude = "142.0667E" });
                return weatherCollection;
            }
        }
        public class ViewModel
        {
            public List<Weather> Models
            {
                get;
                set;
            }
    
            public ViewModel()
            {
    
                this.Models = new List<Weather>();
                this.Models = Weather.GetWeatherData();
    
            }
        }
    
    }

    ColorValuePath

    ColorValuePath

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

    CustomTemplate

    Gets or Sets CustomTemplate for Bubble

    Declaration
    public DataTemplate CustomTemplate { get; set; }
    Property Value
    Type
    Windows.UI.Xaml.DataTemplate

    Fill

    Gets or sets the fill color of the bubbles when "AutoFillColor" of the BubbleMarkerSetting is True.

    Declaration
    public Brush Fill { get; set; }
    Property Value
    Type
    Windows.UI.Xaml.Media.Brush
    Remarks

    Use this property to set the fill color for the bubble when need not Tree map like support to the bubble fill. "AutoFillColor" of the BubbleMarkerSetting must set as true.

    Examples
    using Syncfusion.UI.Xaml.Maps;
    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using Windows.Foundation;
    using Windows.Foundation.Collections;
    using Windows.UI;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Controls.Primitives;
    using Windows.UI.Xaml.Data;
    using Windows.UI.Xaml.Input;
    using Windows.UI.Xaml.Media;
    using Windows.UI.Xaml.Navigation;
    
    
    namespace MapApp
    {
        public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();
                SfMap syncMap = new SfMap();
                ViewModel viewModel = new ViewModel();
                ShapeFileLayer layer = new ShapeFileLayer();
                layer.Uri = "MapApp.world1.shp";
                layer.ItemsSource = viewModel.Models;
                layer.ShapeIDPath = "Country";
                layer.ShapeIDTableField = "NAME";
                BubbleMarkerSetting bubbleSetting = new BubbleMarkerSetting();
                bubbleSetting.AutoFillColor = true;          
                bubbleSetting.ValuePath = "AverageHighTemperature";
                bubbleSetting.Stroke = new SolidColorBrush(Colors.Black);
                bubbleSetting.StrokeThickness = 5;
                bubbleSetting.MaxSize = 500;
                bubbleSetting.MinSize = 100;
                layer.BubbleMarkerSetting = bubbleSetting;
                syncMap.Layers.Add(layer);
    
    
            }       
    
        }
        public class Weather
        {
    
            public int CurrentTemperature { get; set; }
            public int AverageHighTemperature { get; set; }
            public int AverageLowTemperature { get; set; }
            public string Country { get; set; }
            public string Continent { get; set; }
            public string City { get; set; }
            public string WeatherDescription { get; set; }
            public int Humidity { get; set; }
            public string Longitude { get; set; }
            public string Latitude { get; set; }
    
            public static List<Weather> GetWeatherData()
            {
                List<Weather> weatherCollection = new List<Weather>();
                weatherCollection.Add(new Weather() { Humidity = 86, CurrentTemperature = 44, AverageHighTemperature = 63, AverageLowTemperature = 46, City = "Chicago", Continent = "North America", Country = "United States", WeatherDescription = "Partly Cloudy", Latitude = "41.8500N", Longitude = "87.6500W" });
                weatherCollection.Add(new Weather() { Humidity = 94, CurrentTemperature = 77, AverageHighTemperature = 89, AverageLowTemperature = 75, City = "Chennai", Continent = "Asia", Country = "India", WeatherDescription = "Rainy", Latitude = "12.5810N", Longitude = "76.0740E" });
                weatherCollection.Add(new Weather() { Humidity = 63, CurrentTemperature = 59, AverageHighTemperature = 66, AverageLowTemperature = 45, City = "Beiging", Continent = "Asia", Country = "China", WeatherDescription = "Partly Cloudy", Longitude = "39.9100N", Latitude = "116.4000E" });
                weatherCollection.Add(new Weather() { Humidity = 60, CurrentTemperature = 70, AverageHighTemperature = 70, AverageLowTemperature = 57, City = "Tokyo", Continent = "Asia", Country = "Japan", WeatherDescription = "Partly Cloudy", Latitude = "35.6833N", Longitude = "139.7667E" });
                weatherCollection.Add(new Weather() { Humidity = 72, CurrentTemperature = 55, AverageHighTemperature = 47, AverageLowTemperature = 38, City = "Moscow", Continent = "Asia", Country = "Russia", WeatherDescription = "Clear", Latitude = "55.7517N", Longitude = "37.6178E" });
                weatherCollection.Add(new Weather() { Humidity = 70, CurrentTemperature = 53, AverageHighTemperature = 69, AverageLowTemperature = 54, City = "Cape Town", Continent = "Africa", Country = "South Africa", WeatherDescription = "Partly Cloudy", Latitude = "33.9767S", Longitude = "18.4244E" });
                weatherCollection.Add(new Weather() { Humidity = 77, CurrentTemperature = 64, AverageHighTemperature = 69, AverageLowTemperature = 56, City = "Anchorage", Continent = "North America", Country = "United States", WeatherDescription = "Mostly Cloudy", Latitude = "61.1919N", Longitude = "149.7621W" });
                weatherCollection.Add(new Weather() { Humidity = 55, CurrentTemperature = 91, AverageHighTemperature = 95, AverageLowTemperature = 74, City = "Panama", Continent = "South America", Country = "Republic Of  Panama", WeatherDescription = "Fair", Latitude = "8.7515N", Longitude = "79.8772W" });
                weatherCollection.Add(new Weather() { Humidity = 88, CurrentTemperature = 61, AverageHighTemperature = 76, AverageLowTemperature = 59, City = "Sao Paulo", Continent = "South America", Country = "Brazil", WeatherDescription = "Fair", Latitude = "23.5000S", Longitude = "46.6167W" });
                weatherCollection.Add(new Weather() { Humidity = 83, CurrentTemperature = 70, AverageHighTemperature = 85, AverageLowTemperature = 72, City = "Cairo", Continent = "Africa", Country = "Egypt", WeatherDescription = "Mostly Cloudy", Latitude = "31.2262E", Longitude = "30.0566N" });
                weatherCollection.Add(new Weather() { Humidity = 78, CurrentTemperature = 70, AverageHighTemperature = 85, AverageLowTemperature = 72, City = "Melbourne", Continent = "Oceania", Country = "Australia", WeatherDescription = "Cloudy", Latitude = "35.0833S", Longitude = "142.0667E" });
                return weatherCollection;
            }
        }
        public class ViewModel
        {
            public List<Weather> Models
            {
                get;
                set;
            }
    
            public ViewModel()
            {
    
                this.Models = new List<Weather>();
                this.Models = Weather.GetWeatherData();
    
            }
        }
    
    }

    MaxSize

    Gets or sets the Maximum size of the bubble in the map.

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

    MaxSize property set the Maximum height and width for the bubble which a bubble has maximum "BubbleValue" in the map.

    Examples
    using Syncfusion.UI.Xaml.Maps;
    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using Windows.Foundation;
    using Windows.Foundation.Collections;
    using Windows.UI;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Controls.Primitives;
    using Windows.UI.Xaml.Data;
    using Windows.UI.Xaml.Input;
    using Windows.UI.Xaml.Media;
    using Windows.UI.Xaml.Navigation;
    
    
    namespace MapApp
    {
        public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();
                SfMap syncMap = new SfMap();
                ViewModel viewModel = new ViewModel();
                ShapeFileLayer layer = new ShapeFileLayer();
                layer.Uri = "MapApp.world1.shp";
                layer.ItemsSource = viewModel.Models;
                layer.ShapeIDPath = "Country";
                layer.ShapeIDTableField = "NAME";
                BubbleMarkerSetting bubbleSetting = new BubbleMarkerSetting();
                bubbleSetting.AutoFillColor = true;          
                bubbleSetting.ValuePath = "AverageHighTemperature";
                bubbleSetting.Stroke = new SolidColorBrush(Colors.Black);
                bubbleSetting.StrokeThickness = 5;
                bubbleSetting.MaxSize = 500;
                bubbleSetting.MinSize = 100;
                layer.BubbleMarkerSetting = bubbleSetting;
                syncMap.Layers.Add(layer);
    
    
            }       
    
        }
        public class Weather
        {
    
            public int CurrentTemperature { get; set; }
            public int AverageHighTemperature { get; set; }
            public int AverageLowTemperature { get; set; }
            public string Country { get; set; }
            public string Continent { get; set; }
            public string City { get; set; }
            public string WeatherDescription { get; set; }
            public int Humidity { get; set; }
            public string Longitude { get; set; }
            public string Latitude { get; set; }
    
            public static List<Weather> GetWeatherData()
            {
                List<Weather> weatherCollection = new List<Weather>();
                weatherCollection.Add(new Weather() { Humidity = 86, CurrentTemperature = 44, AverageHighTemperature = 63, AverageLowTemperature = 46, City = "Chicago", Continent = "North America", Country = "United States", WeatherDescription = "Partly Cloudy", Latitude = "41.8500N", Longitude = "87.6500W" });
                weatherCollection.Add(new Weather() { Humidity = 94, CurrentTemperature = 77, AverageHighTemperature = 89, AverageLowTemperature = 75, City = "Chennai", Continent = "Asia", Country = "India", WeatherDescription = "Rainy", Latitude = "12.5810N", Longitude = "76.0740E" });
                weatherCollection.Add(new Weather() { Humidity = 63, CurrentTemperature = 59, AverageHighTemperature = 66, AverageLowTemperature = 45, City = "Beiging", Continent = "Asia", Country = "China", WeatherDescription = "Partly Cloudy", Longitude = "39.9100N", Latitude = "116.4000E" });
                weatherCollection.Add(new Weather() { Humidity = 60, CurrentTemperature = 70, AverageHighTemperature = 70, AverageLowTemperature = 57, City = "Tokyo", Continent = "Asia", Country = "Japan", WeatherDescription = "Partly Cloudy", Latitude = "35.6833N", Longitude = "139.7667E" });
                weatherCollection.Add(new Weather() { Humidity = 72, CurrentTemperature = 55, AverageHighTemperature = 47, AverageLowTemperature = 38, City = "Moscow", Continent = "Asia", Country = "Russia", WeatherDescription = "Clear", Latitude = "55.7517N", Longitude = "37.6178E" });
                weatherCollection.Add(new Weather() { Humidity = 70, CurrentTemperature = 53, AverageHighTemperature = 69, AverageLowTemperature = 54, City = "Cape Town", Continent = "Africa", Country = "South Africa", WeatherDescription = "Partly Cloudy", Latitude = "33.9767S", Longitude = "18.4244E" });
                weatherCollection.Add(new Weather() { Humidity = 77, CurrentTemperature = 64, AverageHighTemperature = 69, AverageLowTemperature = 56, City = "Anchorage", Continent = "North America", Country = "United States", WeatherDescription = "Mostly Cloudy", Latitude = "61.1919N", Longitude = "149.7621W" });
                weatherCollection.Add(new Weather() { Humidity = 55, CurrentTemperature = 91, AverageHighTemperature = 95, AverageLowTemperature = 74, City = "Panama", Continent = "South America", Country = "Republic Of  Panama", WeatherDescription = "Fair", Latitude = "8.7515N", Longitude = "79.8772W" });
                weatherCollection.Add(new Weather() { Humidity = 88, CurrentTemperature = 61, AverageHighTemperature = 76, AverageLowTemperature = 59, City = "Sao Paulo", Continent = "South America", Country = "Brazil", WeatherDescription = "Fair", Latitude = "23.5000S", Longitude = "46.6167W" });
                weatherCollection.Add(new Weather() { Humidity = 83, CurrentTemperature = 70, AverageHighTemperature = 85, AverageLowTemperature = 72, City = "Cairo", Continent = "Africa", Country = "Egypt", WeatherDescription = "Mostly Cloudy", Latitude = "31.2262E", Longitude = "30.0566N" });
                weatherCollection.Add(new Weather() { Humidity = 78, CurrentTemperature = 70, AverageHighTemperature = 85, AverageLowTemperature = 72, City = "Melbourne", Continent = "Oceania", Country = "Australia", WeatherDescription = "Cloudy", Latitude = "35.0833S", Longitude = "142.0667E" });
                return weatherCollection;
            }
        }
        public class ViewModel
        {
            public List<Weather> Models
            {
                get;
                set;
            }
    
            public ViewModel()
            {
    
                this.Models = new List<Weather>();
                this.Models = Weather.GetWeatherData();
    
            }
        }
    
    }

    MinSize

    Gets or sets the Minimum size of the bubble in the map.

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

    MaxSize property set the Minimum height and width for the bubble which a bubble has minimum "BubbleValue" in the map.

    Examples
    using Syncfusion.UI.Xaml.Maps;
    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using Windows.Foundation;
    using Windows.Foundation.Collections;
    using Windows.UI;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Controls.Primitives;
    using Windows.UI.Xaml.Data;
    using Windows.UI.Xaml.Input;
    using Windows.UI.Xaml.Media;
    using Windows.UI.Xaml.Navigation;
    
    
    namespace MapApp
    {
        public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();
                SfMap syncMap = new SfMap();
                ViewModel viewModel = new ViewModel();
                ShapeFileLayer layer = new ShapeFileLayer();
                layer.Uri = "MapApp.world1.shp";
                layer.ItemsSource = viewModel.Models;
                layer.ShapeIDPath = "Country";
                layer.ShapeIDTableField = "NAME";
                BubbleMarkerSetting bubbleSetting = new BubbleMarkerSetting();
                bubbleSetting.AutoFillColor = true;          
                bubbleSetting.ValuePath = "AverageHighTemperature";
                bubbleSetting.Stroke = new SolidColorBrush(Colors.Black);
                bubbleSetting.StrokeThickness = 5;
                bubbleSetting.MaxSize = 500;
                bubbleSetting.MinSize = 100;
                layer.BubbleMarkerSetting = bubbleSetting;
                syncMap.Layers.Add(layer);
    
    
            }       
    
        }
        public class Weather
        {
    
            public int CurrentTemperature { get; set; }
            public int AverageHighTemperature { get; set; }
            public int AverageLowTemperature { get; set; }
            public string Country { get; set; }
            public string Continent { get; set; }
            public string City { get; set; }
            public string WeatherDescription { get; set; }
            public int Humidity { get; set; }
            public string Longitude { get; set; }
            public string Latitude { get; set; }
    
            public static List<Weather> GetWeatherData()
            {
                List<Weather> weatherCollection = new List<Weather>();
                weatherCollection.Add(new Weather() { Humidity = 86, CurrentTemperature = 44, AverageHighTemperature = 63, AverageLowTemperature = 46, City = "Chicago", Continent = "North America", Country = "United States", WeatherDescription = "Partly Cloudy", Latitude = "41.8500N", Longitude = "87.6500W" });
                weatherCollection.Add(new Weather() { Humidity = 94, CurrentTemperature = 77, AverageHighTemperature = 89, AverageLowTemperature = 75, City = "Chennai", Continent = "Asia", Country = "India", WeatherDescription = "Rainy", Latitude = "12.5810N", Longitude = "76.0740E" });
                weatherCollection.Add(new Weather() { Humidity = 63, CurrentTemperature = 59, AverageHighTemperature = 66, AverageLowTemperature = 45, City = "Beiging", Continent = "Asia", Country = "China", WeatherDescription = "Partly Cloudy", Longitude = "39.9100N", Latitude = "116.4000E" });
                weatherCollection.Add(new Weather() { Humidity = 60, CurrentTemperature = 70, AverageHighTemperature = 70, AverageLowTemperature = 57, City = "Tokyo", Continent = "Asia", Country = "Japan", WeatherDescription = "Partly Cloudy", Latitude = "35.6833N", Longitude = "139.7667E" });
                weatherCollection.Add(new Weather() { Humidity = 72, CurrentTemperature = 55, AverageHighTemperature = 47, AverageLowTemperature = 38, City = "Moscow", Continent = "Asia", Country = "Russia", WeatherDescription = "Clear", Latitude = "55.7517N", Longitude = "37.6178E" });
                weatherCollection.Add(new Weather() { Humidity = 70, CurrentTemperature = 53, AverageHighTemperature = 69, AverageLowTemperature = 54, City = "Cape Town", Continent = "Africa", Country = "South Africa", WeatherDescription = "Partly Cloudy", Latitude = "33.9767S", Longitude = "18.4244E" });
                weatherCollection.Add(new Weather() { Humidity = 77, CurrentTemperature = 64, AverageHighTemperature = 69, AverageLowTemperature = 56, City = "Anchorage", Continent = "North America", Country = "United States", WeatherDescription = "Mostly Cloudy", Latitude = "61.1919N", Longitude = "149.7621W" });
                weatherCollection.Add(new Weather() { Humidity = 55, CurrentTemperature = 91, AverageHighTemperature = 95, AverageLowTemperature = 74, City = "Panama", Continent = "South America", Country = "Republic Of  Panama", WeatherDescription = "Fair", Latitude = "8.7515N", Longitude = "79.8772W" });
                weatherCollection.Add(new Weather() { Humidity = 88, CurrentTemperature = 61, AverageHighTemperature = 76, AverageLowTemperature = 59, City = "Sao Paulo", Continent = "South America", Country = "Brazil", WeatherDescription = "Fair", Latitude = "23.5000S", Longitude = "46.6167W" });
                weatherCollection.Add(new Weather() { Humidity = 83, CurrentTemperature = 70, AverageHighTemperature = 85, AverageLowTemperature = 72, City = "Cairo", Continent = "Africa", Country = "Egypt", WeatherDescription = "Mostly Cloudy", Latitude = "31.2262E", Longitude = "30.0566N" });
                weatherCollection.Add(new Weather() { Humidity = 78, CurrentTemperature = 70, AverageHighTemperature = 85, AverageLowTemperature = 72, City = "Melbourne", Continent = "Oceania", Country = "Australia", WeatherDescription = "Cloudy", Latitude = "35.0833S", Longitude = "142.0667E" });
                return weatherCollection;
            }
        }
        public class ViewModel
        {
            public List<Weather> Models
            {
                get;
                set;
            }
    
            public ViewModel()
            {
    
                this.Models = new List<Weather>();
                this.Models = Weather.GetWeatherData();
    
            }
        }
    
    }

    Opacity

    Gets or Sets Opacity of Bubble

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

    SizeRatio

    Gets the Size ratio for the bubbles based on the MinSize and MaxSize

    Declaration
    public double SizeRatio { get; }
    Property Value
    Type
    System.Double
    Remarks

    This read only property get the ratio for the bubbles size. Ratio will be determined based on MinSize and MaxSize of the BubbleMarkerSetting.

    Stroke

    Gets or set the border color of the bubbles.

    Declaration
    public Brush Stroke { get; set; }
    Property Value
    Type Description
    Windows.UI.Xaml.Media.Brush

    Type :Windows.UI.Xaml.Media.Brush

    Remarks

    Use this property to set the border color of the bubbles in the map.

    Examples
    using Syncfusion.UI.Xaml.Maps;
    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using Windows.Foundation;
    using Windows.Foundation.Collections;
    using Windows.UI;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Controls.Primitives;
    using Windows.UI.Xaml.Data;
    using Windows.UI.Xaml.Input;
    using Windows.UI.Xaml.Media;
    using Windows.UI.Xaml.Navigation;
    
    
    namespace MapApp
    {
        public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();
                SfMap syncMap = new SfMap();
                ViewModel viewModel = new ViewModel();
                ShapeFileLayer layer = new ShapeFileLayer();
                layer.Uri = "MapApp.world1.shp";
                layer.ItemsSource = viewModel.Models;
                layer.ShapeIDPath = "Country";
                layer.ShapeIDTableField = "NAME";
                BubbleMarkerSetting bubbleSetting = new BubbleMarkerSetting();
                bubbleSetting.AutoFillColor = true;          
                bubbleSetting.ValuePath = "AverageHighTemperature";
                bubbleSetting.Stroke = new SolidColorBrush(Colors.Black);
                bubbleSetting.StrokeThickness = 5;
                bubbleSetting.MaxSize = 500;
                bubbleSetting.MinSize = 100;
                layer.BubbleMarkerSetting = bubbleSetting;
                syncMap.Layers.Add(layer);
    
    
            }       
    
        }
        public class Weather
        {
    
            public int CurrentTemperature { get; set; }
            public int AverageHighTemperature { get; set; }
            public int AverageLowTemperature { get; set; }
            public string Country { get; set; }
            public string Continent { get; set; }
            public string City { get; set; }
            public string WeatherDescription { get; set; }
            public int Humidity { get; set; }
            public string Longitude { get; set; }
            public string Latitude { get; set; }
    
            public static List<Weather> GetWeatherData()
            {
                List<Weather> weatherCollection = new List<Weather>();
                weatherCollection.Add(new Weather() { Humidity = 86, CurrentTemperature = 44, AverageHighTemperature = 63, AverageLowTemperature = 46, City = "Chicago", Continent = "North America", Country = "United States", WeatherDescription = "Partly Cloudy", Latitude = "41.8500N", Longitude = "87.6500W" });
                weatherCollection.Add(new Weather() { Humidity = 94, CurrentTemperature = 77, AverageHighTemperature = 89, AverageLowTemperature = 75, City = "Chennai", Continent = "Asia", Country = "India", WeatherDescription = "Rainy", Latitude = "12.5810N", Longitude = "76.0740E" });
                weatherCollection.Add(new Weather() { Humidity = 63, CurrentTemperature = 59, AverageHighTemperature = 66, AverageLowTemperature = 45, City = "Beiging", Continent = "Asia", Country = "China", WeatherDescription = "Partly Cloudy", Longitude = "39.9100N", Latitude = "116.4000E" });
                weatherCollection.Add(new Weather() { Humidity = 60, CurrentTemperature = 70, AverageHighTemperature = 70, AverageLowTemperature = 57, City = "Tokyo", Continent = "Asia", Country = "Japan", WeatherDescription = "Partly Cloudy", Latitude = "35.6833N", Longitude = "139.7667E" });
                weatherCollection.Add(new Weather() { Humidity = 72, CurrentTemperature = 55, AverageHighTemperature = 47, AverageLowTemperature = 38, City = "Moscow", Continent = "Asia", Country = "Russia", WeatherDescription = "Clear", Latitude = "55.7517N", Longitude = "37.6178E" });
                weatherCollection.Add(new Weather() { Humidity = 70, CurrentTemperature = 53, AverageHighTemperature = 69, AverageLowTemperature = 54, City = "Cape Town", Continent = "Africa", Country = "South Africa", WeatherDescription = "Partly Cloudy", Latitude = "33.9767S", Longitude = "18.4244E" });
                weatherCollection.Add(new Weather() { Humidity = 77, CurrentTemperature = 64, AverageHighTemperature = 69, AverageLowTemperature = 56, City = "Anchorage", Continent = "North America", Country = "United States", WeatherDescription = "Mostly Cloudy", Latitude = "61.1919N", Longitude = "149.7621W" });
                weatherCollection.Add(new Weather() { Humidity = 55, CurrentTemperature = 91, AverageHighTemperature = 95, AverageLowTemperature = 74, City = "Panama", Continent = "South America", Country = "Republic Of  Panama", WeatherDescription = "Fair", Latitude = "8.7515N", Longitude = "79.8772W" });
                weatherCollection.Add(new Weather() { Humidity = 88, CurrentTemperature = 61, AverageHighTemperature = 76, AverageLowTemperature = 59, City = "Sao Paulo", Continent = "South America", Country = "Brazil", WeatherDescription = "Fair", Latitude = "23.5000S", Longitude = "46.6167W" });
                weatherCollection.Add(new Weather() { Humidity = 83, CurrentTemperature = 70, AverageHighTemperature = 85, AverageLowTemperature = 72, City = "Cairo", Continent = "Africa", Country = "Egypt", WeatherDescription = "Mostly Cloudy", Latitude = "31.2262E", Longitude = "30.0566N" });
                weatherCollection.Add(new Weather() { Humidity = 78, CurrentTemperature = 70, AverageHighTemperature = 85, AverageLowTemperature = 72, City = "Melbourne", Continent = "Oceania", Country = "Australia", WeatherDescription = "Cloudy", Latitude = "35.0833S", Longitude = "142.0667E" });
                return weatherCollection;
            }
        }
        public class ViewModel
        {
            public List<Weather> Models
            {
                get;
                set;
            }
    
            public ViewModel()
            {
    
                this.Models = new List<Weather>();
                this.Models = Weather.GetWeatherData();
    
            }
        }
    
    }

    StrokeThickness

    Gets or set the border thickness of the bubbles.

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

    Type :System.Double

    Remarks

    Use this property to set the border thickness of the bubbles in the map.

    Examples
    using Syncfusion.UI.Xaml.Maps;
    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using Windows.Foundation;
    using Windows.Foundation.Collections;
    using Windows.UI;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Controls.Primitives;
    using Windows.UI.Xaml.Data;
    using Windows.UI.Xaml.Input;
    using Windows.UI.Xaml.Media;
    using Windows.UI.Xaml.Navigation;
    
    
    namespace MapApp
    {
        public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();
                SfMap syncMap = new SfMap();
                ViewModel viewModel = new ViewModel();
                ShapeFileLayer layer = new ShapeFileLayer();
                layer.Uri = "MapApp.world1.shp";
                layer.ItemsSource = viewModel.Models;
                layer.ShapeIDPath = "Country";
                layer.ShapeIDTableField = "NAME";
                BubbleMarkerSetting bubbleSetting = new BubbleMarkerSetting();
                bubbleSetting.AutoFillColor = true;          
                bubbleSetting.ValuePath = "AverageHighTemperature";
                bubbleSetting.Stroke = new SolidColorBrush(Colors.Black);
                bubbleSetting.StrokeThickness = 5;
                bubbleSetting.MaxSize = 500;
                bubbleSetting.MinSize = 100;
                layer.BubbleMarkerSetting = bubbleSetting;
                syncMap.Layers.Add(layer);
    
    
            }       
    
        }
        public class Weather
        {
    
            public int CurrentTemperature { get; set; }
            public int AverageHighTemperature { get; set; }
            public int AverageLowTemperature { get; set; }
            public string Country { get; set; }
            public string Continent { get; set; }
            public string City { get; set; }
            public string WeatherDescription { get; set; }
            public int Humidity { get; set; }
            public string Longitude { get; set; }
            public string Latitude { get; set; }
    
            public static List<Weather> GetWeatherData()
            {
                List<Weather> weatherCollection = new List<Weather>();
                weatherCollection.Add(new Weather() { Humidity = 86, CurrentTemperature = 44, AverageHighTemperature = 63, AverageLowTemperature = 46, City = "Chicago", Continent = "North America", Country = "United States", WeatherDescription = "Partly Cloudy", Latitude = "41.8500N", Longitude = "87.6500W" });
                weatherCollection.Add(new Weather() { Humidity = 94, CurrentTemperature = 77, AverageHighTemperature = 89, AverageLowTemperature = 75, City = "Chennai", Continent = "Asia", Country = "India", WeatherDescription = "Rainy", Latitude = "12.5810N", Longitude = "76.0740E" });
                weatherCollection.Add(new Weather() { Humidity = 63, CurrentTemperature = 59, AverageHighTemperature = 66, AverageLowTemperature = 45, City = "Beiging", Continent = "Asia", Country = "China", WeatherDescription = "Partly Cloudy", Longitude = "39.9100N", Latitude = "116.4000E" });
                weatherCollection.Add(new Weather() { Humidity = 60, CurrentTemperature = 70, AverageHighTemperature = 70, AverageLowTemperature = 57, City = "Tokyo", Continent = "Asia", Country = "Japan", WeatherDescription = "Partly Cloudy", Latitude = "35.6833N", Longitude = "139.7667E" });
                weatherCollection.Add(new Weather() { Humidity = 72, CurrentTemperature = 55, AverageHighTemperature = 47, AverageLowTemperature = 38, City = "Moscow", Continent = "Asia", Country = "Russia", WeatherDescription = "Clear", Latitude = "55.7517N", Longitude = "37.6178E" });
                weatherCollection.Add(new Weather() { Humidity = 70, CurrentTemperature = 53, AverageHighTemperature = 69, AverageLowTemperature = 54, City = "Cape Town", Continent = "Africa", Country = "South Africa", WeatherDescription = "Partly Cloudy", Latitude = "33.9767S", Longitude = "18.4244E" });
                weatherCollection.Add(new Weather() { Humidity = 77, CurrentTemperature = 64, AverageHighTemperature = 69, AverageLowTemperature = 56, City = "Anchorage", Continent = "North America", Country = "United States", WeatherDescription = "Mostly Cloudy", Latitude = "61.1919N", Longitude = "149.7621W" });
                weatherCollection.Add(new Weather() { Humidity = 55, CurrentTemperature = 91, AverageHighTemperature = 95, AverageLowTemperature = 74, City = "Panama", Continent = "South America", Country = "Republic Of  Panama", WeatherDescription = "Fair", Latitude = "8.7515N", Longitude = "79.8772W" });
                weatherCollection.Add(new Weather() { Humidity = 88, CurrentTemperature = 61, AverageHighTemperature = 76, AverageLowTemperature = 59, City = "Sao Paulo", Continent = "South America", Country = "Brazil", WeatherDescription = "Fair", Latitude = "23.5000S", Longitude = "46.6167W" });
                weatherCollection.Add(new Weather() { Humidity = 83, CurrentTemperature = 70, AverageHighTemperature = 85, AverageLowTemperature = 72, City = "Cairo", Continent = "Africa", Country = "Egypt", WeatherDescription = "Mostly Cloudy", Latitude = "31.2262E", Longitude = "30.0566N" });
                weatherCollection.Add(new Weather() { Humidity = 78, CurrentTemperature = 70, AverageHighTemperature = 85, AverageLowTemperature = 72, City = "Melbourne", Continent = "Oceania", Country = "Australia", WeatherDescription = "Cloudy", Latitude = "35.0833S", Longitude = "142.0667E" });
                return weatherCollection;
            }
        }
        public class ViewModel
        {
            public List<Weather> Models
            {
                get;
                set;
            }
    
            public ViewModel()
            {
    
                this.Models = new List<Weather>();
                this.Models = Weather.GetWeatherData();
    
            }
        }
    
    }

    TooltipSettings

    Gets or sets the tooltip settings for Bubbles.

    Declaration
    public TooltipSetting TooltipSettings { get; set; }
    Property Value
    Type
    TooltipSetting

    ValuePath

    Gets or sets the property name from the Item of ItemsSource in ShapeFileLayer for bubble value.

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

    Type :System.String

    Remarks

    Use this ValuePath to determine the under bound value for the bubbles. The property value with the name of "ValuePath" will be fetched from Item of ItemsSource in ShapeFileLayer.

    Examples
    using Syncfusion.UI.Xaml.Maps;
    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using Windows.Foundation;
    using Windows.Foundation.Collections;
    using Windows.UI;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Controls.Primitives;
    using Windows.UI.Xaml.Data;
    using Windows.UI.Xaml.Input;
    using Windows.UI.Xaml.Media;
    using Windows.UI.Xaml.Navigation;
    
    
    namespace MapApp
    {
        public sealed partial class MainPage : Page
        {
            public MainPage()
            {
                this.InitializeComponent();
                SfMap syncMap = new SfMap();
                ViewModel viewModel = new ViewModel();
                ShapeFileLayer layer = new ShapeFileLayer();
                layer.Uri = "MapApp.world1.shp";
                layer.ItemsSource = viewModel.Models;
                layer.ShapeIDPath = "Country";
                layer.ShapeIDTableField = "NAME";
                BubbleMarkerSetting bubbleSetting = new BubbleMarkerSetting();
                bubbleSetting.AutoFillColor = true;          
                bubbleSetting.ValuePath = "AverageHighTemperature";
                bubbleSetting.Stroke = new SolidColorBrush(Colors.Black);
                bubbleSetting.StrokeThickness = 5;
                bubbleSetting.MaxSize = 500;
                bubbleSetting.MinSize = 100;
                layer.BubbleMarkerSetting = bubbleSetting;
                syncMap.Layers.Add(layer);
    
    
            }       
    
        }
        public class Weather
        {
    
            public int CurrentTemperature { get; set; }
            public int AverageHighTemperature { get; set; }
            public int AverageLowTemperature { get; set; }
            public string Country { get; set; }
            public string Continent { get; set; }
            public string City { get; set; }
            public string WeatherDescription { get; set; }
            public int Humidity { get; set; }
            public string Longitude { get; set; }
            public string Latitude { get; set; }
    
            public static List<Weather> GetWeatherData()
            {
                List<Weather> weatherCollection = new List<Weather>();
                weatherCollection.Add(new Weather() { Humidity = 86, CurrentTemperature = 44, AverageHighTemperature = 63, AverageLowTemperature = 46, City = "Chicago", Continent = "North America", Country = "United States", WeatherDescription = "Partly Cloudy", Latitude = "41.8500N", Longitude = "87.6500W" });
                weatherCollection.Add(new Weather() { Humidity = 94, CurrentTemperature = 77, AverageHighTemperature = 89, AverageLowTemperature = 75, City = "Chennai", Continent = "Asia", Country = "India", WeatherDescription = "Rainy", Latitude = "12.5810N", Longitude = "76.0740E" });
                weatherCollection.Add(new Weather() { Humidity = 63, CurrentTemperature = 59, AverageHighTemperature = 66, AverageLowTemperature = 45, City = "Beiging", Continent = "Asia", Country = "China", WeatherDescription = "Partly Cloudy", Longitude = "39.9100N", Latitude = "116.4000E" });
                weatherCollection.Add(new Weather() { Humidity = 60, CurrentTemperature = 70, AverageHighTemperature = 70, AverageLowTemperature = 57, City = "Tokyo", Continent = "Asia", Country = "Japan", WeatherDescription = "Partly Cloudy", Latitude = "35.6833N", Longitude = "139.7667E" });
                weatherCollection.Add(new Weather() { Humidity = 72, CurrentTemperature = 55, AverageHighTemperature = 47, AverageLowTemperature = 38, City = "Moscow", Continent = "Asia", Country = "Russia", WeatherDescription = "Clear", Latitude = "55.7517N", Longitude = "37.6178E" });
                weatherCollection.Add(new Weather() { Humidity = 70, CurrentTemperature = 53, AverageHighTemperature = 69, AverageLowTemperature = 54, City = "Cape Town", Continent = "Africa", Country = "South Africa", WeatherDescription = "Partly Cloudy", Latitude = "33.9767S", Longitude = "18.4244E" });
                weatherCollection.Add(new Weather() { Humidity = 77, CurrentTemperature = 64, AverageHighTemperature = 69, AverageLowTemperature = 56, City = "Anchorage", Continent = "North America", Country = "United States", WeatherDescription = "Mostly Cloudy", Latitude = "61.1919N", Longitude = "149.7621W" });
                weatherCollection.Add(new Weather() { Humidity = 55, CurrentTemperature = 91, AverageHighTemperature = 95, AverageLowTemperature = 74, City = "Panama", Continent = "South America", Country = "Republic Of  Panama", WeatherDescription = "Fair", Latitude = "8.7515N", Longitude = "79.8772W" });
                weatherCollection.Add(new Weather() { Humidity = 88, CurrentTemperature = 61, AverageHighTemperature = 76, AverageLowTemperature = 59, City = "Sao Paulo", Continent = "South America", Country = "Brazil", WeatherDescription = "Fair", Latitude = "23.5000S", Longitude = "46.6167W" });
                weatherCollection.Add(new Weather() { Humidity = 83, CurrentTemperature = 70, AverageHighTemperature = 85, AverageLowTemperature = 72, City = "Cairo", Continent = "Africa", Country = "Egypt", WeatherDescription = "Mostly Cloudy", Latitude = "31.2262E", Longitude = "30.0566N" });
                weatherCollection.Add(new Weather() { Humidity = 78, CurrentTemperature = 70, AverageHighTemperature = 85, AverageLowTemperature = 72, City = "Melbourne", Continent = "Oceania", Country = "Australia", WeatherDescription = "Cloudy", Latitude = "35.0833S", Longitude = "142.0667E" });
                return weatherCollection;
            }
        }
        public class ViewModel
        {
            public List<Weather> Models
            {
                get;
                set;
            }
    
            public ViewModel()
            {
    
                this.Models = new List<Weather>();
                this.Models = Weather.GetWeatherData();
    
            }
        }
    
    }

    Methods

    add_SizeChanged(SizeChangingEventHandler)

    Declaration
    public void add_SizeChanged(SizeChangingEventHandler value)
    Parameters
    Type Name Description
    SizeChangingEventHandler value

    remove_SizeChanged(SizeChangingEventHandler)

    Declaration
    public void remove_SizeChanged(SizeChangingEventHandler value)
    Parameters
    Type Name Description
    SizeChangingEventHandler value

    Events

    SizeChanged

    SizeChangingEventHandler

    Declaration
    public event SizeChangingEventHandler SizeChanged
    Event Type
    Type
    SizeChangingEventHandler

    Extension Methods

    DateTimeExtension.ToDateTime(Object)
    Back to top Generated by DocFX
    Copyright © 2001 - 2025 Syncfusion Inc. All Rights Reserved