Drawing Lines Between Points on Map

[Peter]

Hi

i am probably missing something but in the demos etc i cant seem to find a way to draw a line between 2 points , i can put the points on the map fine, but i cant seem to find a way to draw a line between them on the map.

any help/instruction would be great thanks.

Peter.

[Konstantin Dikov]

Hello Peter,

I have noticed that you have an open ticket for the same requirement (ticket ID: 870171), where some details on this matter are already discussed.

Nevertheless, I would like to post a very basic example that demonstrates how to provide GeoJSON data from server-side to a RadMap control:

<script type="text/javascript">
    function OnInitialize(sender, args) {
        var originalOptions = args.get_options();
        var geoJSON = document.getElementById("<%=HiddenGeoJSON.ClientID%>").value;
        originalOptions.layers[0].dataSource = { data: JSON.parse(geoJSON) };
        args.set_options(originalOptions);
    }
</script>

<asp:HiddenField runat="server" ID="HiddenGeoJSON" />

<telerik:RadMap runat="server" ID="RadMap1" Zoom="2" Width="500" Height="200">
    <ClientEvents OnInitialize="OnInitialize" />
    <CenterSettings Latitude="30" Longitude="10" />
    <LayerDefaultsSettings>
        <ShapeSettings>
            <StyleSettings>
                <FillSettings Color="green" />
                <StrokeSettings Color="black" Width="2" />
            </StyleSettings>
        </ShapeSettings>
    </LayerDefaultsSettings>
    <LayersCollection>
        <telerik:MapLayer Type="Shape">
        </telerik:MapLayer>
    </LayersCollection>
</telerik:RadMap>

And the code-behind:

protected void Page_Load(object sender, EventArgs e)
{
    HiddenGeoJSON.Value = "[{\"type\": \"Polygon\",\"coordinates\": [[[30, 10], [40, 40], [20, 40], [10, 20], [30, 10]]]}]";
}

Best Regards,
Konstantin Dikov
Telerik

 

 

[Peter]

Thanks for the starter points , although for some reason it didnt seem to work in my setup when using an actual map.

it all seems to trigger just doesnt seem to actually do anything.

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="LNGRails.aspx.cs" Inherits="Eclipse_Internal_Portal_2.LNG.LNGRails" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">


    <style type="text/css">
        .RadMap span.k-marker { margin-top: -19px; background-image: url(CustomMarkers_Sprite.png); width: 16px; height: 21px; }
            /* Resetting the default styles of the Map markers */
            .RadMap span.k-marker:before { content: ""; color: none; text-shadow: none; height: auto; width: auto; padding: 0; }
    </style>


    <div class="tup_background">
        <div class="tup_headings" style="width: 100%;">
            <asp:Label ID="Label1" runat="server" Text="LNG Rails"></asp:Label>


            <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">

                <asp:PlaceHolder ID="PlaceHolder1" runat="server">
                    <script type="text/javascript">
                        function OnInitialize2(sender, args) {
                            var originalOptions = args.get_options();
                            var geoJSON = document.getElementById("<%=HiddenGeoJSON.ClientID%>").value;
                            originalOptions.layers[1].dataSource = { data: JSON.parse(geoJSON) };
                            args.set_options(originalOptions);
                        }
                    </script>
                </asp:PlaceHolder>
                <asp:HiddenField runat="server" ID="HiddenGeoJSON" />
                <div>

                    <telerik:RadMap ID="RadMap1" runat="server" Skin="Vista" Zoom="2">
                        <ClientEvents OnInitialize="OnInitialize2" />
                        <LayerDefaultsSettings>
                            <ShapeSettings>
                                <StyleSettings>
                                    <FillSettings Color="green" />
                                    <StrokeSettings Color="black" Width="100" />
                                </StyleSettings>
                            </ShapeSettings>
                        </LayerDefaultsSettings>

                        <LayersCollection>
                            <telerik:MapLayer Type="Tile" Subdomains="a,b,c"
                                UrlTemplate="http://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png"
                                Attribution="© <a href='http://osm.org/copyright' title='OpenStreetMap contributors' target='_blank'>OpenStreetMap contributors</a>.">
                            </telerik:MapLayer>
                            <telerik:MapLayer Type="Shape">
                            </telerik:MapLayer>
                        </LayersCollection>
                    </telerik:RadMap>
                </div>
                <div>
                    <telerik:RadButton ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click"></telerik:RadButton>
                    <telerik:RadButton ID="btnIgnore" runat="server" Text="Ignore" OnClick="btnIgnore_Click"></telerik:RadButton>
                    <telerik:RadButton ID="btnIgnoreRoute" runat="server" Text="Ignore Rest of Route" OnClick="btnIgnoreRoute_Click"></telerik:RadButton>
                    <telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" AllowSorting="True" Skin="Glow"
                        OnSelectedIndexChanged="RadGrid1_SelectedIndexChanged" OnNeedDataSource="RadGrid1_NeedDataSource" OnColumnCreating="RadGrid1_ColumnCreating" AutoGenerateColumns="false">
                        <MasterTableView AllowFilteringByColumn="true" PageSize="15" EditMode="InPlace" TableLayout="Auto">
                        </MasterTableView>
                        <ClientSettings Selecting-AllowRowSelect="true" EnablePostBackOnRowClick="true">
                        </ClientSettings>
                    </telerik:RadGrid>
                </div>
            </telerik:RadAjaxPanel>
        </div>
    </div>
</asp:Content>

any thoughts ?
btw the back end code is simply populating the hidden value with valid geoJSON data eg.

[{ "type": "GeometryCollection",  "geometries": [{"type":"LineString","coordinates":[[7.06461666666667,36.9803333333333],[7.08858333333333,37.1390333333333],[7.23471666666667,37.30245],[7.44175,37.4739833333333],[7.82956666667,37.8103166667],[8.02921666666667,37.9726],[8.37091666666667,38.27335],[8.54098333333333,38.4182333333333],[8.71101666666667,38.56965],[8.6118,38.7137],[8.33031666666667,38.7459333333333],[8.20381666666667,38.8862333333333],[8.05851666666667,39.0499],[7.9723,39.2247166666667],[7.98826666666667,39.4277666666667],[7.9891,39.4398],[6.54566666667,41.81915],[6.22386666667,42.1128333333],[6.06996666667,42.25315],[5.9196,42.3894833333],[5.76865,42.5266666667],[5.61166666667,42.66865],[5.53945,42.7509666667],[5.53963333333,42.79715],[5.36733333333,42.8339166667],[5.25675,42.98385],[5.09098333333,43.1371833333],[4.99538333333,43.3002833333],[4.87911666667,43.41305],[4.85436666666667,43.4508333333333],[4.85435,43.4508333333],[4.85433333333,43.4508333333],[4.85435,43.4508333333333],[4.85433333333,43.4508166667],[4.85435,43.4508166667],[4.85435,43.4508333333],[4.85435,43.4508166667],[4.85433333333,43.4508333333],[4.85433333333,43.4508333333],[4.85433333333,43.4508166667],[4.85435,43.4508333333333],[4.85433333333,43.4508333333],[4.85433333333,43.4508333333],[4.85433333333333,43.4508166666667],[4.85435,43.4508166667],[4.85435,43.4508166666667],[4.85435,43.4508333333],[4.85435,43.4508333333],[4.85433333333,43.4508166667],[4.85433333333333,43.4508333333333],[4.85433333333,43.4508166667],[4.85435,43.4508333333],[4.8753,43.4186333333],[4.9408,43.3596],[4.94065,43.35995],[4.94178333333333,43.3604833333333],[4.9418,43.3604833333],[4.94288333333,43.3602666667],[4.94285,43.3602666666667],[4.94323333333,43.3600833333],[4.94345,43.3599333333],[4.94365,43.3598333333333],[4.9438,43.35965],[4.94345,43.3598166666667],[4.94358333333333,43.3596666666667],[4.94386666666667,43.3590666666667],[4.94375,43.3583],[4.94198333333333,43.3573666666667],[4.94076666667,43.3575833333],[4.94031666667,43.3578666667],[4.94036666667,43.3578833333],[4.93996666667,43.3582166667],[4.93983333333,43.3588166667],[4.9399,43.3593833333],[4.94068333333,43.36005],[4.94143333333333,43.3603666666667],[4.94198333333,43.3602833333],[4.94328333333,43.3599666667],[4.94356666666667,43.3587333333333]]}]}]

[Konstantin Dikov]

Hi Peter,

Opposite to the recommendation in your other tread regarding the structure of the JSON file, here the issue is coming from what was missing in your JSON file: "[{ "type": "GeometryCollection", "geometries": ". Since this is not expected an your syntax should be correctly handled by RadMap, I will have to forward that issue to our developers team, so they could investigate it further.

Please excuse us for any inconvenience caused by this.


Regards,
Konstantin Dikov
Telerik

[Peter]

Hi there

yes thanks , it wasnt raising any form of error on the page when given an invalid dataset so it was causing alot of confusion.

i have managed to find a solution for drawing lines but unfortunately as i need parameters to filter the data it involves dynamically writing geojson files on the server , and creating datasources/map layers to point to them so although i have solution its not the cleanest of solutions.


Peter

[Konstantin Dikov]

Hello Peter,

I have posted an answer in your other thread regarding the binding of RadMap, which applies to your remark for the missing error message, when there is some issue with the provided data:

• ClientDatasource Not Working

Best Regards,
Konstantin Dikov
Telerik