New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Bubble Layer

Hover over urban areas

This example demonstrates how to configure a specialized bubble layer in a RadMap control. The layer specialization is determined by the Type property set to Bubble. A RadClientDataSource control retrieves the data from the urban-areas.json file and provides it to the layer through its ClientDataSourceID property. LocationField and ValueFiled property values match their corresponding data item properties, providing the necessary information for each circle's creation. The data item is exposed in the OnShapeMouseEnter client-side event handler by the e.shape.dataItem property.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • scripts.js
  • urban-areas.json
<%@ Page Title="" Language="VB"  AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.Map.BubbleLayer.DefaultVB" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <qsf:MessageBox Type="General" ID="PopulationInfo" runat="server">
        <h4>Hover over urban areas</h4>
    </qsf:MessageBox>

    <telerik:RadClientDataSource runat="server" ID="RadClientDataSource1">
        <DataSource>
            <WebServiceDataSourceSettings ServiceType="GeoJSON">
                <Select Url="urban-areas.json" DataType="JSON" />
            </WebServiceDataSourceSettings>
        </DataSource>
    </telerik:RadClientDataSource>

    <div class="demo-container size-auto">
        <telerik:RadMap RenderMode="Lightweight" runat="server" ID="RadMap1" Zoom="2" MinZoom="2" MaxZoom="8">
            <ClientEvents OnShapeMouseEnter="telerikDemo.onShapeMouseEnter" />
            <CenterSettings Latitude="23" Longitude="10" />
            <LayersCollection>
                <telerik:MapLayer Type="Tile" Subdomains="a,b,c"
                    UrlTemplate="https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png"
                    Attribution="&copy; <a href='https://osm.org/copyright' title='OpenStreetMap contributors' target='_blank'>OpenStreetMap contributors</a>.">
                </telerik:MapLayer>
                <telerik:MapLayer Type="Bubble" ClientDataSourceID="RadClientDataSource1" LocationField="Location" ValueField="Pop2010"
                    Attribution="Population data from Nordpil and UN Population Division.">
                    <StyleSettings>
                        <FillSettings Opacity="0.4" Color="#00cc66" />
                        <StrokeSettings Width="0"/>
                    </StyleSettings>
                </telerik:MapLayer>
            </LayersCollection>
        </telerik:RadMap>
    </div>
    <script src="scripts.js" type="text/javascript"></script>
    <script type="text/javascript">
        Sys.Application.add_load(function () {
            telerikDemo.infoBox = $get("<%=PopulationInfo.ClientID%>");
        });
    </script>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance