Kendo MVC Map: draw a path line with arrow

23
June 10, 2021, at 4:10 PM

I am using Kendo MVC Map to display transaction data. With the reference of https://docs.telerik.com/kendo-ui/controls/diagrams-and-maps/map/how-to/link-marker-to-location, I am able to draw a path between markers, but I want to show an arrow on the path of map. Below is the code I am using to display map,

<div id="transactionMap">
    @(Html.Kendo().Map()
.Name("map")
.Center(43.76398900, -79.54862200)
.Zoom(15)
.Layers(layers =>
{
    layers.Add()
        .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>." +
                     "Tiles courtesy of <a href='https://www.opencyclemap.org/'>Andy Allan</a>")
        .ZIndex(0);
    layers.Add()
        .Style(style => style.Fill(fill => fill.Opacity(0.2)))
        .Type(MapLayerType.Shape)
        .ZIndex(1);
    layers.Add()
        .Type(MapLayerType.Marker)
        .DataSource(dataSource => dataSource
              .Read(read => read.Action("Transaction_Read", "TestReports").Data("TripLogMarkerParam").Type(HttpVerbs.Get))
        )
        .LocationField("LatLng")
        .TitleField("Name")
        
        .ZIndex(2);

})
.Events(e=>e.Reset("onResetMap")   
       ))
</div>
<script src="@Url.Content("~/Content/dataviz/map/js/chroma.min.js")"></script>
<script>
    var geom = kendo.geometry;
    var draw = kendo.drawing;
            
    function TripLogMarkerParam() {
        return {
            tripId: @ViewBag.tripId,
            fromTripLogId: @ViewBag.fromTripLogId,
            toTripLogId: @ViewBag.ToTripLogId
        };
    }
    function onResetMap(e) {
        var map = e.sender;
        var markers = map.layers[2].items;
        for (var i = 0; i < markers.length - 1; i++) {
            linkMarker(map, markers[i], markers[i + 1]);
        }
    }
   
    function linkMarker(map, marker, nextMarker) {
        var dataFrom = map.locationToView(marker.location());
        var nextDataFrom = map.locationToView(nextMarker.location());
        var shapeLayer = map.layers[1];
        var line = new kendo.dataviz.drawing.Path({
            stroke: {
                color: "#FF0000",
                width: 2,
                lineCap: "round"
            }
            
        });
        line.moveTo(dataFrom).lineTo(nextDataFrom);          
        shapeLayer.surface.draw(line);
    }
</script>

Is there any example of draw a path with an arrow?

Thank you, BDP

READ ALSO
Java - file writing - access denied

Java - file writing - access denied

I'm trying to write a file from my Java application but I can't write it anywhere but inside the app directoryI'm using Windows 10

34
Plyr Speed Opens from Above - Want it to open from below

Plyr Speed Opens from Above - Want it to open from below

So, I have this website where there's audio and the player is Plyr (https://githubcom/sampotts/plyr)

50
NodeJs - how to populate the model view with data from another model

NodeJs - how to populate the model view with data from another model

I am practicing Node by making a simple inventory app, in which I have 3 models: Item, Category and ManufacturerWhat I want to do is, when displaying an item details, to include the Category and Manufacturer associated with that specific item, however...

29
Date of Birth does not show and Form cannot edit in PHP

Date of Birth does not show and Form cannot edit in PHP

I will describe my problems brieflyThere are 2 main issues in my web app:

13