Adding Routes in Map
Environment
Product | Progress Telerik UI for ASP.NET Core Map |
Progress Telerik UI for ASP.NET Core version | Created with the 2023.2.606 version |
Description
How can I add routes to given location markers when working with the Telerik UI for ASP.NET Core Map component?
Solution
Follow the steps below to achieve the desired scenario:
- Create a
Model
that will hold aPointTo
field, which will be utilized for the drawing line shapes and establishing the route. - Supplement the data on the backend with
RouteModel
instances. - Create
3
layers within the Map component that will hold aTile
,Shape
, andMarker
. From there, bind the previously defined data for the markers using a DataSource mediator. - Subscribe to the
Reset
event. - To draw the routes, create a custom function that will execute for drawing lines using the help of the Kendo UI Drawing API.
- Within the
Reset
event handler, traverse through each of the Markers' Layer and execute thelinkMarker
function created in the previous step.
The
PointTo
field needs to include a Longitude and Latitude similar to an existing object.
@(Html.Kendo().Map()
.Name("map")
.Center(30.268107, -97.744821)
.Zoom(6)
.Layers(layers =>
{
layers.Add() // Layer 1
.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>");
layers.Add() // Layer 2
.Type(MapLayerType.Shape);
layers.Add() // Layer 3
.Type(MapLayerType.Marker)
.DataSource(dataSource => dataSource
.Read(read => read.Action("_LoadRoutes", "Home"))
)
.LocationField("Location")
.TitleField("Title");
})
.Events(events => {
events.Reset("onReset");
})
)
@addTagHelper *, Kendo.Mvc
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
var coordinates = new double[] { 30.2681, -97.7448 };
var subdomains = new string[] { "a","b","c" };
}
<kendo-map name="map" center="coordinates" zoom="6" on-reset="onReset">
<layers>
<layer type="MapLayerType.Tile"
url-template="https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/ #= y #.png"
subdomains="subdomains"
attribution="© <a href='https://osm.org/copyright'>OpenStreetMap contributors</a>."> // Layer 1
</layer>
<layer type="MapLayerType.Shape"> // Layer 2
</layer>
<layer type="MapLayerType.Marker" location-field="Location" title-field="Title">
<datasource>
<transport>
<read url="@Url.Action("_LoadRoutes","Home")" type="POST"/>
</transport>
</datasource>
</layer> // Layer 3
</layers>
</kendo-map>
public class RouteModel
{
public double[] Location { get; set; }
public string Title { get; set; }
public double[] PointTo { get; set; }
}
public IActionResult _LoadRoutes()
{
var data = new List<RouteModel>
{
new RouteModel { Title = "Feeling heroic in Austin", Location = new double[] { 30.268107, -97.744821 }, PointTo = new double[] { 30.4515, -91.1871 } },
new RouteModel { Title = "A bit tired in Baton Rouge", Location = new double[] { 30.4515, -91.1871 }, PointTo = new double[] { 35.1495, -90.0490 } },
new RouteModel { Title = "Crawling in Memphis, crawling..", Location = new double[] { 35.1495, -90.0490 } }
};
return Json(data);
}
<script>
function onReset(e){
var map = e.sender;
setTimeout(function(){
var markers = map.layers[2].items; // 1. Gather the marker item object references.
for (var i = 0; i < markers.length; i++) { // 2. Traverse through each of the markers.
linkMarker(map, markers[i]); // 4. Call the common function.
}
}, 50)
}
function linkMarker(map, marker) { // 3. Create a common function for creating the marker item.
var data = marker.dataItem;
if (data.PointTo) {
// Convert the latitude and longitude locations to coordinates on the screen.
// See: http://docs.telerik.com/kendo-ui/api/dataviz/map#methods-eventToView
var from = map.locationToView(marker.location());
var to = map.locationToView(data.PointTo);
// Draw a path on the shape layer.
// See: http://docs.telerik.com/kendo-ui/api/dataviz/drawing/path
// http://docs.telerik.com/kendo-ui/getting-started/dataviz/drawing/basic-shapes
var shapeLayer = map.layers[1];
var line = new kendo.dataviz.drawing.Path({
stroke: {
color: "#aaa",
width: 4,
lineCap: "round"
}
});
line.moveTo(from).lineTo(to);
shapeLayer.surface.draw(line);
}
}
</script>
More ASP.NET Core Map Resources
- ASP.NET Core Map Documentation
- Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)
- Telerik UI for ASP.NET Core Forums