Remote Binding Markers
The Telerik UI for ASP.NET MVC 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.
Configuration
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—
LatitudeandLongitudein decimal degrees.
The following example demonstrates how to configure the markers for remote data binding.
@(Html.Kendo().Map()
.Name("map")
.Center(30.268107, -97.744821)
.Zoom(15)
.Layers(layers =>
{
layers.Add()
.Type(MapLayerType.Tile)
.UrlTemplate("https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png")
.Subdomains("a", "b", "c")
.Attribution("© <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>." +
"Tiles courtesy of <a href='https://www.opencyclemap.org/'>Andy Allan</a>");
layers.Add()
.Type(MapLayerType.Marker)
.DataSource(dataSource => dataSource
.Read(read => read.Action("_StoreLocations", "Map"))
)
.LocationField("LatLng")
.TitleField("Name");
})
)
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")
};
}
}