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

Remote Binding Markers

The Telerik UI for ASP.NET Core Map marker exposes the ability to bind its markers to a remote service. It enables you to transpose the key logic for fetching the markers to a more autonomous server-side location. This omits the need to explicitly declare the markers within the Map definition and makes the component more concise in terms of readability.


To enable the remote data operations for the markers, use the DataSource() configuration method. The specified remote service must return an array of objects with a Location and an optional Title field.

The location field must be an array with two numbers—Latitude and Longitude in decimal degrees.

The following example demonstrates how to configure the markers for remote data binding.

        .Center(30.268107, -97.744821)
        .Layers(layers =>
                .UrlTemplate("https://#= subdomain zoom #/#= x #/#= y #.png")
                .Subdomains("a", "b", "c")
                .Attribution("&copy; <a href=''>OpenStreetMap contributors</a>." +
                             "Tiles courtesy of <a href=''>Andy Allan</a>");

                .DataSource(dataSource => dataSource
                      .Read(read => read.Action("_StoreLocations", "Map"))
        var coordinates = new double[] { 30.2681, -97.7448 };
        var subdomains = new string[] { "a","b","c" };

    <kendo-map name="map" center="coordinates" zoom="15">
            <layer type="MapLayerType.Tile" 
                   url-template="https://#= subdomain zoom #/#= x #/#= y #.png"
                   attribution="&copy; <a href=''>OpenStreetMap contributors</a>. Tiles courtesy of <a href=''>Andy Allan</a>">
            <layer type="MapLayerType.Marker" location-field="LatLng" title-field="Name">
                        <read url="@Url.Action("_StoreLocations","Map")" type="POST"/>
    public partial class MapController : BaseController
        public ActionResult _StoreLocations()
            return Json(MapDataRepository.StoreLocations());
    public class MapDataRepository
        public static IList<Marker> StoreLocations() 
            return new Marker[]
                new Marker(30.2675,-97.7409, "Zevo Toys"),
                new Marker(30.2707,-97.7490, "Foo Bars"),
                new Marker(30.2705,-97.7409, "Mainway Toys"),
                new Marker(30.2686,-97.7494, "Acme Toys")

See Also

In this article