Arrows on a map

[David]

I know we can add lines to a RadMap. I would like these lines to resemble arrows and have some curvature. Is it possible?

[Valentin Dragnev]

Hi David,

Richard has shown you an example in your ticket with ID: 1180291. You can review that to see the full conversation.

I will also share that example in this forum thread to make it available to the public.

You can use the Kendo Map API to draw custom shapes on the RadMap. Below is an example that draws a red triangle on a Map. The Shape Layer is created after the RadMap is loaded using the OnInitialize Event.


Markup:

<telerik:RadMap RenderMode="Lightweight" runat="server" ID="RadMap1" Zoom="8" Width="1000" Height="500">
    <ClientEvents OnInitialize="OnInitializeHandler" />
    <CenterSettings Latitude="0.5" Longitude="100.5" />
    <LayersCollection>

        <telerik:MapLayer Type="Tile"
            UrlTemplate="http://a.tile.opencyclemap.org/transport/#=zoom#/#=x#/#=y#.png">
        </telerik:MapLayer>
    </LayersCollection>
</telerik:RadMap>

JavaScript:

function OnInitializeHandler(sender, eventArgs) {
    var currOptions = eventArgs._options;

    var shapeData = [
        {
            "type": "Feature",
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [[100.0, 0.0], [101.0, 0.0], [100.5, 1.0],
                    [100.0, 0.0]]
                ]
            }
        }
    ];
    var theNewLayer = {
        type: "shape",
        style: {
    fill: {
        color: "red",
        opacity: 1
    }
        },
        dataSource: {
            type: "geojson",
            data: shapeData
        }
    }
    currOptions.layers.push(theNewLayer);
}

 

Other helpful articles:

• MVC Map link multiple markers with arrow line.
• Client-side Programming

 

Regards,
Valentin Dragnev
Progress Telerik