New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

Adding Routes in Map

Environment

Product	Progress Telerik UI for ASP.NET MVC Map
Progress Telerik UI for ASP.NET MVC 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 MVC Map component?

Solution

Follow the steps below to achieve the desired scenario:

Create a Model that will hold a PointTo 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 a Tile, Shape, and Marker. 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 the linkMarker function created in the previous step.

The PointTo field needs to include a Longitude and Latitude similar to an existing object.

Index.cshtml
    @(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("&copy; <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");
        })
    )
Model.cs
    public class RouteModel
    {
        public double[] Location { get; set; }
        public string Title { get; set; }
        public double[] PointTo { get; set; }
    }
Controller.cs
    public ActionResult _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, JsonRequestBehavior.AllowGet);
    }
Script.js
    <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>

Adding Routes in Map

Environment

Description

Solution

More ASP.NET MVC Map Resources

See Also