This is a migrated thread and some comments may be shown as answers.

Drawing Lines Between Points on Map

5 Answers 233 Views
Map
This is a migrated thread and some comments may be shown as answers.
Peter
Top achievements
Rank 1
Peter asked on 16 Oct 2014, 03:32 PM
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.

5 Answers, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 21 Oct 2014, 12:52 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Peter
Top achievements
Rank 1
answered on 21 Oct 2014, 01:45 PM
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]]}]}]
0
Konstantin Dikov
Telerik team
answered on 23 Oct 2014, 02:39 PM
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
0
Peter
Top achievements
Rank 1
answered on 23 Oct 2014, 02:44 PM
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

0
Konstantin Dikov
Telerik team
answered on 28 Oct 2014, 09:21 AM
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:

Best Regards,
Konstantin Dikov
Telerik
Tags
Map
Asked by
Peter
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Peter
Top achievements
Rank 1
Share this question
or