Bubbles

Bubbles in the Maps control represent the under-bound data values of the map. Bubbles are scattered throughout map shapes, which contain bound values.

Bubbles are included when data binding is set as mentioned above and the BubbleMarkerSetting is set.

The following properties are available in BubbleMarkerSetting:

Property	Type	Description
AutoFillColor	Boolean (true / false)	Gets or sets whether the colors should be automatically filled.
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.
ValuePath	String	Gets or sets the name of the under-bound property in ItemsSource.
ColorMapping	ObservableCollection<RangeColorMapping>	Gets or sets the tree map colors.

Adding Bubbles to a Map

To add bubbles to a map, the bubble marker setting has to be added to the shape file layer. Set the AutoFillColor as true and set the Fill property. Create the Model and ViewModel as shown in the Data Binding topic and add the following code. Also set the MaxSize, MinSize, and ValuePath properties as shown in the code sample below.

html

<syncfusion:SfMap >

                <syncfusion:SfMap.Layers>

                    <syncfusion:ShapeFileLayer EnableSelection="False" ItemsSource="{Binding Countries1}" ShapeIDPath="Country"  ShapeIDTableField="NAME" Uri="SampleBrowser.Assets.ShapeFiles.world1.shp">

                        <syncfusion:ShapeFileLayer.BubbleMarkerSetting>

                            <syncfusion:BubbleMarkerSetting AutoFillColor="True" MaxSize="100" MinSize="50"  StrokeThickness="0" ValuePath="Population">



                            </syncfusion:BubbleMarkerSetting>

                        </syncfusion:ShapeFileLayer.BubbleMarkerSetting>



                        <syncfusion:ShapeFileLayer.ShapeSettings>

                            <syncfusion:ShapeSetting ShapeStroke="#C1C1C1" ShapeStrokeThickness="0.5" ShapeValuePath="Population" ShapeFill="#E5E5E5"/>

                        </syncfusion:ShapeFileLayer.ShapeSettings>

                    </syncfusion:ShapeFileLayer>

                </syncfusion:SfMap.Layers>

 </syncfusion:SfMap >

Adding Bubbles

Customizing Bubble Symbol

The shape of the bubble symbol can be modified by using built-in symbols like circle, rectangle, diamond, triangle, trapezoid, star, pentagon, and pushpin, which are available in the BubbleType enum property. Also, bubbles can be customized by setting the CustomTemplate of the BubbleMarkerSetting.

Property	Type	Description
BubbleType	BubbleType (enum)	Gets or sets the type of bubble symbol needed to be used in maps.
CustomTemplate	DataTemplate	Gets or sets the template to customize the bubble.> BubbleType should be set as 'Custom' to show a customized bubble shape.

html

<syncfusion:SfMap>

        <syncfusion:SfMap.Layers>

            <syncfusion:ShapeFileLayer x:Name="shapeFileLayer"   

                                       ItemsSource="{Binding Countries}"

                                       ShapeIDPath="NAME" 

                                       ShapeIDTableField="NAME"                                       Uri="BubbleTypeDemo_WinRT.Assets.World.shp">

                <syncfusion:ShapeFileLayer.BubbleMarkerSetting>

                    <syncfusion:BubbleMarkerSetting AutoFillColor="False" MaxSize="100" MinSize="50"                                                         ValuePath="Population" BubbleType="Star">

                        <syncfusion:BubbleMarkerSetting.ColorMappings>

<syncfusion:RangeColorMapping Color="#7F20BCEE" To="1347350000" From="314623001"/>

<syncfusion:RangeColorMapping Color="#7FA7CE38" To="314623001" From="143228301"/>

<syncfusion:RangeColorMapping Color="#7FF1B21A" To="143228301" From="82724090"/>

<syncfusion:RangeColorMapping Color="#7F1DA249" To="50586757" From="22789702"/>

<syncfusion:RangeColorMapping Color="#7FEB737C" To="22789702" From="0"/>

<syncfusion:RangeColorMapping Color="#7FED2D95" To="82724090" From="50586757"/>                        </syncfusion:BubbleMarkerSetting.ColorMappings>

                    </syncfusion:BubbleMarkerSetting>

                </syncfusion:ShapeFileLayer.BubbleMarkerSetting>

                <syncfusion:ShapeFileLayer.ItemsTemplate>

                    <DataTemplate>

                        <Border Background="Transparent">

                            <TextBlock FontFamily="Segoe UI" FontSize="12" Foreground="#FF333333" Text="{Binding Data.PopulationFormat}"/>

                        </Border>

                    </DataTemplate>

                </syncfusion:ShapeFileLayer.ItemsTemplate>

                <syncfusion:ShapeFileLayer.ShapeSettings>

                    <syncfusion:ShapeSetting ShapeStroke="#C1C1C1" ShapeStrokeThickness="0.5" ShapeValuePath="Population" ShapeFill="#E5E5E5"/>

                </syncfusion:ShapeFileLayer.ShapeSettings>

            </syncfusion:ShapeFileLayer>

        </syncfusion:SfMap.Layers>

    </syncfusion:SfMap>

Bubble with Star Symbol

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
Range	Double	Gets or sets the value range of the bubble.
Color	Color	Gets or sets the color values for a given range.

The fill color of a particular bubble fill can be determined by its under-bound value and the color range. For example, consider the following color ranges:

html

<syncfusion:BubbleMarkerSetting.ColorMappings>

<syncfusion:RangeColorMapping Color="#7F20BCEE" To="1347350000" From="314623001"/>

                                    <syncfusion:RangeColorMapping Color="#7FA7CE38" To="314623001" From="143228301"/>

                                    <syncfusion:RangeColorMapping Color="#7FF1B21A" To="143228301" From="82724090"/>

                                    <syncfusion:RangeColorMapping Color="#7F1DA249" To="50586757" From="22789702"/>

                                    <syncfusion:RangeColorMapping Color="#7FEB737C" To="22789702" From="0"/>

                                    <syncfusion:RangeColorMapping Color="#7FED2D95" To="82724090" From="50586757"/>                        </syncfusion:BubbleMarkerSetting.ColorMappings>

If the under-bound object value is 52, then the fill color of the corresponding bubble is set between “#7FEB737C” and “#7FED2D95.” As mentioned earlier, the under-bound value of the bubble is set through the “ValuePath” in the BubbleMarkerSetting.

If the under-bound value is below any of the given sorted range or above the sorted range, then the fill is set as “Black.”

“AutoFillColor” must be set as “false” to enable range color mapping.

Code Sample:

Create the “Model” and the “ViewModel” as mentioned in the Data Binding topic and add the following code:

html

<syncfusion:SfMap >

                <syncfusion:SfMap.Layers>

                    <syncfusion:ShapeFileLayer EnableSelection="False" ItemsSource="{Binding Countries1}" ShapeIDPath="Country"  ShapeIDTableField="NAME" Uri="SampleBrowser.Assets.ShapeFiles.world1.shp">

                        <syncfusion:ShapeFileLayer.BubbleMarkerSetting>

                            <syncfusion:BubbleMarkerSetting AutoFillColor="False" Fill="Blue" MaxSize="100" MinSize="50"  StrokeThickness="0" ValuePath="Population">

                                <syncfusion:BubbleMarkerSetting.ColorMappings>

<syncfusion:RangeColorMapping Color="#7F20BCEE" To="1347350000" From="314623001"/>

                                    <syncfusion:RangeColorMapping Color="#7FA7CE38" To="314623001" From="143228301"/>

                                    <syncfusion:RangeColorMapping Color="#7FF1B21A" To="143228301" From="82724090"/>

                                    <syncfusion:RangeColorMapping Color="#7F1DA249" To="50586757" From="22789702"/>

                                    <syncfusion:RangeColorMapping Color="#7FEB737C" To="22789702" From="0"/>

                                    <syncfusion:RangeColorMapping Color="#7FED2D95" To="82724090" From="50586757"/>                        </syncfusion:BubbleMarkerSetting.ColorMappings>

                                </syncfusion:BubbleMarkerSetting.ColorMappings>

                            </syncfusion:BubbleMarkerSetting>

                        </syncfusion:ShapeFileLayer.BubbleMarkerSetting>

                        <syncfusion:ShapeFileLayer.ShapeSettings>

                            <syncfusion:ShapeSetting ShapeStroke="#C1C1C1" ShapeStrokeThickness="0.5" ShapeValuePath="Population" ShapeFill="#E5E5E5"/>

                        </syncfusion:ShapeFileLayer.ShapeSettings>

                    </syncfusion:ShapeFileLayer>

                </syncfusion:SfMap.Layers>

            </syncfusion:SfMap >