Bubbles in Windows Forms Map (Maps)
15 Jun 202112 minutes to read
Bubbles in the maps control represent the under-bound data values of the map. Bubbles are scattered throughout the map shapes, which contain bound values.
Bubbles are included when the data binding and bubble setting are set.
The following properties are available in bubble setting:
Property | Type | Description |
---|---|---|
AutoFillColor | Boolean value (true/false) | Gets or sets whether the colors should be filled automatically |
MaxSize | Double | Get or sets the maximum height and width of the bubble |
MinSize | Double | Gets or sets the minimum height and width of the bubble |
StrokeThickness | Double | Gets or sets the border thickness of the bubbles |
ColorValuePath | String | Gets or sets the value for bubble color mapping |
ValuePath | String | Gets or sets the name of the under-bound property in ItemsSource |
ColorMapping | ObservableCollection <RangeColorMapping> | Gets or sets the colors for specified range |
Fill | Brush | Gets or sets the fill brush of the bubble when auto fill color is set to true |
Adding bubbles
To add bubbles to a map, the BubbleSetting has to be added to the ShapeFileLayer. Set the AutoFillColors
to false in the Fill
property. Also set the MaxSize
, MinSize
, and ValuePath
properties as shown in the following code sample.
When the under-bound value is below or above any of the given sorted range, then the fill is set as “Black.”
The AutoFillColors
must be set to “False” to enable range color mapping.
partial class Form1
{
private void InitializeComponent()
{
this.mapsControl1 = new Syncfusion.Windows.Forms.Maps.Maps();
this.mapsControl1.Name = "mapsControl1";
this.mapsControl1.Size = new System.Drawing.Size(880, 585);
this.Controls.Add(this.mapsControl1);
this.ClientSize = new System.Drawing.Size(880, 585);
this.Load += new System.EventHandler(this.Form1_Load);
}
private Syncfusion.Windows.Forms.Maps.Maps mapsControl1;
}
public partial class Form1 : Form
{
private void Form1_Load(object sender, EventArgs e)
{
this.mapsControl1.Dock = DockStyle.Fill;
this.mapsControl1.Margin = new Padding(0, 0, 4, 0);
this.mapsControl1.MapBackgroundBrush = new SolidBrush(Color.White);
this.mapsControl1.MapItemsShape = Syncfusion.Windows.Forms.Maps.MapItemShapes.None;
MapViewModel model = new MapViewModel();
ShapeFileLayer shapeLayer = new ShapeFileLayer();
shapeLayer.Uri = "world1.shp";
shapeLayer.ItemSource = model.Countries;
shapeLayer.ShapeIDPath = "NAME";
shapeLayer.ShapeIDTableField = "NAME";
shapeLayer.ShapeSetting.ShapeValuePath = "Population";
shapeLayer.ShapeSetting.ShapeColorValuePath = "Population";
shapeLayer.ShapeSetting.ShapeDisplayValuePath = "NAME";
shapeLayer.ShapeSetting.ShapeFill = "#E5E5E5";
shapeLayer.ShapeSetting.ShapeStrokeThickness = 1.5;
shapeLayer.ShapeSetting.ShapeStroke = "#C1C1C1";
shapeLayer.BubbleSetting.AutoFillColors = false;
shapeLayer.BubbleSetting.MaxSize = 70;
shapeLayer.BubbleSetting.MinSize = 25;
shapeLayer.BubbleSetting.ValuePath = "Population";
shapeLayer.BubbleSetting.ColorValuePath = "Population";
this.mapsControl1.Layers.Add(shapeLayer);
}
}
Screenshot:
Range color mapping
Range color mapping is one of the features used to differentiate the bubble fill based on its under-bound value and color ranges. It contains the following properties:
Property | Type | Description |
---|---|---|
From and To | Double | Gets or sets the From and To values based on the ColorValuePath to the bubbles |
Color | Color | Gets or sets the color values for a given From and To values |
The fill color of a particular bubble can be determined by its under-bound value and color range. For example, consider the following color ranges in the below snippet.
partial class Form1
{
private void InitializeComponent()
{
this.mapsControl1 = new Syncfusion.Windows.Forms.Maps.Maps();
this.mapsControl1.Name = "mapsControl1";
this.mapsControl1.Size = new System.Drawing.Size(880, 585);
this.Controls.Add(this.mapsControl1);
this.ClientSize = new System.Drawing.Size(880, 585);
this.Load += new System.EventHandler(this.Form1_Load);
}
private Syncfusion.Windows.Forms.Maps.Maps mapsControl1;
}
public partial class Form1 : Form
{
private void Form1_Load(object sender, EventArgs e)
{
this.mapsControl1.Dock = DockStyle.Fill;
this.mapsControl1.Margin = new Padding(0, 0, 4, 0);
this.mapsControl1.MapBackgroundBrush = new SolidBrush(Color.White);
this.mapsControl1.MapItemsShape = Syncfusion.Windows.Forms.Maps.MapItemShapes.None;
MapViewModel model = new MapViewModel();
ShapeFileLayer shapeLayer = new ShapeFileLayer();
shapeLayer.Uri = "world1.shp";
shapeLayer.ItemSource = model.Countries;
shapeLayer.ShapeIDPath = "NAME";
shapeLayer.ShapeIDTableField = "NAME";
shapeLayer.ShapeSetting.ShapeValuePath = "Population";
shapeLayer.ShapeSetting.ShapeColorValuePath = "Population";
shapeLayer.ShapeSetting.ShapeFill = "#E5E5E5";
shapeLayer.ShapeSetting.ShapeStrokeThickness = 1.5;
shapeLayer.ShapeSetting.ShapeStroke = "#C1C1C1";
shapeLayer.BubbleSetting.AutoFillColors = false;
shapeLayer.BubbleSetting.MaxSize = 70;
shapeLayer.BubbleSetting.MinSize = 25;
shapeLayer.BubbleSetting.ValuePath = "Population";
shapeLayer.BubbleSetting.ColorValuePath = "Population";
shapeLayer.BubbleSetting.ColorMappings = new System.Collections.ObjectModel.ObservableCollection<ColorMapping>();
shapeLayer.BubbleSetting.ColorMappings.Add(new RangeColorMapping { From =314623001, To = 1347350000, Color = System.Drawing.Color.FromArgb(0x7F, 0x20, 0xBC, 0xEE) });
shapeLayer.BubbleSetting.ColorMappings.Add(new RangeColorMapping { From = 143228301, To= 314623001, Color = System.Drawing.Color.FromArgb(0x7F, 0xA7, 0xCE, 0x38) });
shapeLayer.BubbleSetting.ColorMappings.Add(new RangeColorMapping { From = 82724090, To= 143228301, Color = System.Drawing.Color.FromArgb(0x7F, 0xF1, 0xB2, 0x1A) });
shapeLayer.BubbleSetting.ColorMappings.Add(new RangeColorMapping { From = 22789702, To= 50586757, Color = System.Drawing.Color.FromArgb(0x7F, 0x1D, 0xA2, 0x49) });
shapeLayer.BubbleSetting.ColorMappings.Add(new RangeColorMapping { From = 0, To = 22789702, Color = System.Drawing.Color.FromArgb(0x7F, 0xEB, 0x73, 0x7C) });
shapeLayer.BubbleSetting.ColorMappings.Add(new RangeColorMapping { From = 50586757, To = 82724090, Color = System.Drawing.Color.FromArgb(0x7F, 0xED, 0x2D, 0x95) });
this.mapsControl1.Layers.Add(shapeLayer);
}
}
Screenshot: