Search results

Bubbles

Bubbles in the Maps component represent the underlying data values of the maps. Bubbles are scattered throughout the map shapes that contain bound values.

To add bubbles to the maps, bind data source to MapsBubble, and set ValuePath as Population. The following code example demonstrates how to enable bubbles for the World map with data source.

@using Syncfusion.EJ2.Blazor.Maps

<EjsMaps>
    <MapsLayers>
        <MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/world-map.json"}'
                   DataSource="@populationDetails"
                   ShapeDataPath="Name"
                   ShapePropertyPath='@("name")'>
            @* To add bubbles based on population count *@
            <MapsBubbleSettings>
                <MapsBubble Visible="true" ValuePath="Population" DataSource="@populationDetails">
                </MapsBubble>
            </MapsBubbleSettings>
        </MapsLayer>
    </MapsLayers>
</EjsMaps>

@code{
    public class Country
    {
        public string Name;
        public double Population;
    };
    private List<Country> populationDetails = new List<Country> {
       new Country
       {
           Name ="United States",
           Population = 325020000
       },
       new Country
       {
           Name = "Russia",
           Population = 142905208
       },
       new Country
        {
           Name="India",
           Population=1198003000
        }
    };
}

Maps with bubbles

Bubble sizing

Using the MinRadius and MaxRadius properties in MapsBubble, you can render the bubbles in different sizes based on the ValuePath and DataSource values.

@using Syncfusion.EJ2.Blazor.Maps

<EjsMaps>
    <MapsLayers>
        <MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/world-map.json"}'
                   ShapePropertyPath='@("name")'
                   DataSource="@populationDetails"
                   ShapeDataPath="Name">
            @* To add different size of bubbles based on population density *@
            <MapsBubbleSettings>
                <MapsBubble Visible="true"
                            MinRadius="5"
                            MaxRadius="80"
                            ValuePath="PopulationDensity"
                            DataSource="@populationDetails">
                </MapsBubble>
            </MapsBubbleSettings>
        </MapsLayer>
    </MapsLayers>
</EjsMaps>

Refer code block to know the property value of populationDetails.

Maps with different size bubbles

Multiple bubble groups

You can specify multiple types of bubble groups using the MapsBubble property and customize it according to your requirement.

In the following code example, the gender-wise population ratio is demonstrated with two different bubble groups.

@using Syncfusion.EJ2.Blazor.Maps

<EjsMaps>
    <MapsLayers>
        <MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/world-map.json"}'
                   ShapePropertyPath='@("name")'
                   DataSource="@genderRatio"
                   ShapeDataPath="Country">
            @* To add multiple bubble groups *@
            <MapsBubbleSettings>
                <MapsBubble Visible="true"
                            MinRadius="5"
                            MaxRadius="20"
                            ValuePath="FemaleRatio"
                            ColorValuePath="FemaleRatioColor"
                            DataSource="@genderRatio">
                </MapsBubble>
                <MapsBubble Visible="true"
                            BubbleType="BubbleType.Circle"
                            Opacity="0.4"
                            MinRadius="15"
                            MaxRadius="25"
                            ValuePath="MaleRatio"
                            ColorValuePath="MaleRatioColor"
                            DataSource="@genderRatio">
                </MapsBubble>
            </MapsBubbleSettings>
        </MapsLayer>
    </MapsLayers>
</EjsMaps>

@code{
    public class GenderRatio
    {
        public string Country;
        public double FemaleRatio;
        public double MaleRatio;
        public string FemaleRatioColor;
        public string MaleRatioColor;
    }

    private List<GenderRatio> genderRatio = new List<GenderRatio> {
        new GenderRatio {
            Country ="United States",
            FemaleRatio =50.50442726,
            MaleRatio =49.49557274,
            FemaleRatioColor ="green",
            MaleRatioColor = "blue"
        },
        new GenderRatio {
            Country ="India",
            FemaleRatio =48.18032713,
            MaleRatio =51.81967287,
            FemaleRatioColor ="blue",
            MaleRatioColor = "#c2d2d6"
        },
        new GenderRatio {
            Country ="Oman",
            FemaleRatio =34.15597234,
            MaleRatio =65.84402766,
            FemaleRatioColor ="#09156d",
            MaleRatioColor="orange"
        },
        new GenderRatio {
            Country ="United Arab Emirates",
            FemaleRatio =27.59638942,
            MaleRatio =72.40361058,
            FemaleRatioColor ="#09156d",
            MaleRatioColor="orange"
        }
    };
}

Maps with bubble groups

Enabling legend for bubble

To enable the legends for bubbles, set Visible to true and set Type to Bubbles in MapsLegendSettings.

The following code example demonstrates how to enable the legends for bubbles with each bubble different colors rendering.

@using Syncfusion.EJ2.Blazor.Maps

<EjsMaps>
    @* To enable legend for bubbles *@
    <MapsLegendSettings Visible="true" Type="LegendType.Bubbles"></MapsLegendSettings>
    <MapsLayers>
        <MapsLayer ShapeData='new {dataOptions ="https://cdn.syncfusion.com/maps/map-data/world-map.json"}'
                   DataSource="@populationDetails"
                   ShapeDataPath="Name"
                   ShapePropertyPath='@("name")'>
            <MapsBubbleSettings>
                <MapsBubble Visible="true"
                            ValuePath="Population"
                            ColorValuePath="Color"
                            DataSource="@populationDetails">
                </MapsBubble>
            </MapsBubbleSettings>
        </MapsLayer>
    </MapsLayers>
</EjsMaps>

Refer code block to know the property value of populationDetails.

Maps with bubble and legend

Please refer to legend section for more information on legend settings.