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:

1. Create a Model that will hold a PointTo field, which will be utilized for the drawing line shapes and establishing the route.
2. Supplement the data on the backend with RouteModel instances.
3. 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.
4. Subscribe to the Reset event.
5. To draw the routes, create a custom function that will execute for drawing lines using the help of the Kendo UI Drawing API.
6. 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.

    @(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");
        })
    )

    @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="&copy; <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

• ASP.NET Core Map Demos

• ASP.NET Core Map Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)
• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the Map for ASP.NET Core

• Server-Side API Reference of the Map for ASP.NET Core

• Server-Side TagHelper API Reference of the Map for ASP.NET Core

• Telerik UI for ASP.NET Core Breaking Changes

• Telerik UI for ASP.NET Core Knowledge Base