Map - Bubble Layer

Hover over urban areas

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
<%@ Page Title="" Language="C#"  AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Map.BubbleLayer.DefaultCS" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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="http://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png"
                    Attribution="&copy; <a href='http://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

Help Us Improve

Was this example helpful?