Bubble Layer

Updated on Sep 18, 2026

The Bubble layer lets you create shapes of different type on a geographic position with a radius that is calculated via the value associated with the shape.

The radiuses of the bubbles are automatically calculated by the map component, based on the maximum and minimum values available in the data source.

The data source fields that represent the location and the value of the shapes can be defined via the LocationField and ValueField properties of the MapLayer tag.

Optionally, the bubbles can also be styled by using the MapLayerBubbleSettings inner tag - MapLayerBubbleSettingsStyle.

To configure a Map Layer of type Bubble:

1. Add the TelerikMap tag.
2. Set the Type parameter of the MapLayer to Bubble.
3. Set the Data parameter.
4. Set the LocationField and ValueField parameters.

The following example demonstrates how to configure the Map Bubble Layer.

The Map Bubble Layer configuration.

Example

View Source

@* This code snippet showcases an example of a Bubble Layer configuration. *@

<TelerikMap Center="@Center"
            Height="85vh"
            Zoom="3">
    <MapLayers>
        <MapLayer Type="@MapLayersType.Tile"
                  Attribution="@MapAttribution"
                  Subdomains="@MapSubdomains"
                  UrlTemplate="mapUrlTemplateFunction">
        </MapLayer>

        <MapLayer Type="@MapLayersType.Bubble"
                  Data="@BubbleData"
                  LocationField="@nameof(BubbleModel.LatLng)"
                  ValueField="@nameof(BubbleModel.Revenue)">
                  <MapLayerBubbleSettings>
                      <MapLayerBubbleSettingsStyle>
                          <MapLayerBubbleSettingsStyleFill Color="#0000ff"></MapLayerBubbleSettingsStyleFill>
                          <MapLayerBubbleSettingsStyleStroke Color="#000000"></MapLayerBubbleSettingsStyleStroke>
                      </MapLayerBubbleSettingsStyle>
                  </MapLayerBubbleSettings>
        </MapLayer>
    </MapLayers>
</TelerikMap>

<script suppress-error="BL9992">
    function mapUrlTemplateFunction(context) {
        return `https://${context.subdomain}.tile.openstreetmap.org/${context.zoom}/${context.x}/${context.y}.png`;
    }
</script>

@code {
    public string[] MapSubdomains { get; set; } = new string[] { "a", "b", "c" };
    public string MapAttribution { get; set; } = "&copy; <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>";
    public double[] Center { get; set; } = new double[] { 30.268107, -97.744821 };

    public List<BubbleModel> BubbleData { get; set; } = new List<BubbleModel>()
    {
        new BubbleModel()
        {
            LatLng = new double[] { 37.7749, -122.4194 },
            Revenue = 1000
        },
        new BubbleModel()
        {
            LatLng = new double[] { 41.8781, -87.6298 },
            Revenue = 200
        }
    };

    public class BubbleModel
    {
        public double[] LatLng { get; set; }
        public int Revenue { get; set; }
    }
}