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

WebForms Map Overview

TELERIK OFFICES

  • United States
    Palo Alto, CA
    169 University Ave.
    Palo Alto 94301
  • United States
    Boston, MA
    201 Jones Rd Waltham
    Boston MA 02451
  • Denmark
    Copenhagen
    Vesterbrogade 149
    Copenhagen DK-1620 Copenhagen V
  • Australia
    Sydney
    Suite 705, 80 Mount St
    Sydney North Sydney, NSW 2060
  • United States
    Austin, TX
    221 W 6th Street Suite 850
    Austin TX 78701
  • Bulgaria
    Sofia
    54B Tsarigradsko Shose Blvd.
    Sofia 1750
  • India
    Gurgaon
    Unit No 505, Tower A Spaze iTech
    Park Gurgaon Sohna Road Sector 49 Gurgaon Haryana. 122002
  • United Kingdom
    London
    14 Austin Friars
    London EC2N 2HE
  • Germany
    Munich
    Balanstrasse 73
    Munich 81541 Munich

This example demonstrates a declaration of RadMap that is used to create a simple Map with Markers pointing the Telerik offices around the world. You can see all the main features of this interactive ASP.NET AJAX Map control in the following demos: Tile Layers, Markers, Shapes Layer.

About RadMap for ASP.NET AJAX

The Telerik ASP.NET Map helps you create useful and interactive maps with ease. Powered by Kendo UI DataViz, the control offers excellent client-side responsiveness and user experience. The Telerik ASP.NET Map Component comes with rich built-in functionality, including simplified setup for Map Tile Services, Markers, Shape drawing functionality based on GeoJSON objects and helpful UI interaction components.

RadMap and 120+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

Key Features

  • Zoom and pan (mouse and touch support plus dedicated UI elements)
  • Support for multiple layers
  • Markers
  • Marker tooltips
  • Custom shape definition through GeoJSON objects
  • Client-side data binding
  • Server-side data binding
  • Rich client-side API
  • Multiple client-side events

More about RadMap for ASP.NET AJAX

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

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" href="styles.css" type="text/css" />
    <script src="scripts.js"></script>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-auto">
        <h2 class="mapTitle">TELERIK OFFICES</h2>
        <telerik:RadMap RenderMode="Lightweight" runat="server" ID="RadMap1" Zoom="2" CssClass="MyMap">
            <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='http://osm.org/copyright' title='OpenStreetMap contributors' target='_blank'>OpenStreetMap contributors</a>.">
                </telerik:MapLayer>
            </LayersCollection>
            <MarkersCollection>
                <telerik:MapMarker Shape="PinTarget" Title="Palo Alto">
                    <TooltipSettings Content="US - Palo Alto, CA"></TooltipSettings>
                    <LocationSettings Latitude="37.444610" Longitude="-122.163283" />
                </telerik:MapMarker>

                <telerik:MapMarker Shape="PinTarget" Title="Boston">
                    <TooltipSettings Content="US - Boston, MA"></TooltipSettings>
                    <LocationSettings Latitude="42.375067" Longitude="-71.272233" />
                </telerik:MapMarker>

                <telerik:MapMarker Shape="PinTarget" Title="Copenhagen">
                    <TooltipSettings Content="Denmark - Copenhagen"></TooltipSettings>
                    <LocationSettings Latitude="55.670312" Longitude="12.538266" />
                </telerik:MapMarker>

                <telerik:MapMarker Shape="PinTarget" Title="Sydney">
                    <TooltipSettings Content="Australia - Sydney"></TooltipSettings>
                    <LocationSettings Latitude="-33.838707" Longitude="151.207959" />
                </telerik:MapMarker>

                <telerik:MapMarker Shape="PinTarget" Title="Austin">
                    <TooltipSettings Content="US - Austin, TX"></TooltipSettings>
                    <LocationSettings Latitude="30.268162" Longitude="-97.744873" />
                </telerik:MapMarker>

                <telerik:MapMarker Shape="PinTarget" Title="Sofia">
                    <TooltipSettings Content="Bulgaria - Sofia"></TooltipSettings>
                    <LocationSettings Latitude="42.650613" Longitude="23.379025" />
                </telerik:MapMarker>

                <telerik:MapMarker Shape="PinTarget" Title="Gurgaon">
                    <TooltipSettings Content="India - Gurgaon"></TooltipSettings>
                    <LocationSettings Latitude="28.410139" Longitude="77.042439" />
                </telerik:MapMarker>

                <telerik:MapMarker Shape="PinTarget" Title="London">
                    <TooltipSettings Content="UK - London"></TooltipSettings>
                    <LocationSettings Latitude="51.515986" Longitude="-0.085798" />
                </telerik:MapMarker>

                <telerik:MapMarker Shape="PinTarget" Title="Munich">
                    <TooltipSettings Content="Germany - Munich"></TooltipSettings>
                    <LocationSettings Latitude="48.117227" Longitude="11.601990" />
                </telerik:MapMarker>
            </MarkersCollection>
            <ClientEvents OnMarkerActivate="telerikDemo.OnMarkerActivate" />
        </telerik:RadMap>

        <div class="contactsContainer">
            <ul id="offices">
                <li class="office">
                    <div class="leftCol">
                        <div class="flag flag-unitedstates"></div>
                    </div>
                    <div class="rightCol">
                        <div class="country">United States</div>
                        <div class="city">Palo Alto, CA</div>
                        <div class="address">169 University Ave.</div>
                        <div class="address">Palo Alto 94301</div>
                    </div>
                </li>
                <li class="office">
                    <div class="leftCol">
                        <div class="flag flag-unitedstates"></div>
                    </div>
                    <div class="rightCol">
                        <div class="country">United States</div>
                        <div class="city">Boston, MA</div>
                        <div class="address">201 Jones Rd Waltham</div>
                        <div class="address">Boston MA 02451</div>
                    </div>
                </li>
                <li class="office">
                    <div class="leftCol">
                        <div class="flag flag-denmark"></div>
                    </div>
                    <div class="rightCol">
                        <div class="country">Denmark</div>
                        <div class="city">Copenhagen</div>
                        <div class="address">Vesterbrogade 149</div>
                        <div class="address">Copenhagen DK-1620 Copenhagen V</div>
                    </div>
                </li>
                <li class="office">
                    <div class="leftCol">
                        <div class="flag flag-australia"></div>
                    </div>
                    <div class="rightCol">
                        <div class="country">Australia</div>
                        <div class="city">Sydney</div>
                        <div class="address">Suite 705, 80 Mount St</div>
                        <div class="address">Sydney North Sydney, NSW 2060</div>
                    </div>
                </li>
                <li class="office">
                    <div class="leftCol">
                        <div class="flag flag-unitedstates"></div>
                    </div>
                    <div class="rightCol">
                        <div class="country">United States</div>
                        <div class="city">Austin, TX</div>
                        <div class="address">221 W 6th Street Suite 850</div>
                        <div class="address">Austin TX 78701</div>
                    </div>
                </li>
                <li class="office">
                    <div class="leftCol">
                        <div class="flag flag-bulgaria"></div>
                    </div>
                    <div class="rightCol">
                        <div class="country">Bulgaria</div>
                        <div class="city">Sofia</div>
                        <div class="address">54B Tsarigradsko Shose Blvd.</div>
                        <div class="address">Sofia 1750</div>
                    </div>
                </li>
                <li class="office">
                    <div class="leftCol">
                        <div class="flag flag-india"></div>
                    </div>
                    <div class="rightCol">
                        <div class="country">India</div>
                        <div class="city">Gurgaon</div>
                        <div class="address">Unit No 505, Tower A Spaze iTech</div>
                        <div class="address">Park Gurgaon Sohna Road Sector 49 Gurgaon Haryana. 122002</div>
                    </div>
                </li>
                <li class="office">
                    <div class="leftCol">
                        <div class="flag flag-unitedkingdom"></div>
                    </div>
                    <div class="rightCol">
                        <div class="country">United Kingdom</div>
                        <div class="city">London</div>
                        <div class="address">14 Austin Friars</div>
                        <div class="address">London EC2N 2HE</div>
                    </div>
                </li>
                <li class="office">
                    <div class="leftCol">
                        <div class="flag flag-germany"></div>
                    </div>
                    <div class="rightCol">
                        <div class="country">Germany</div>
                        <div class="city">Munich</div>
                        <div class="address">Balanstrasse 73</div>
                        <div class="address">Munich 81541 Munich</div>
                    </div>
                </li>
            </ul>
        </div>
    </div>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance