Drawing Lines Between Points on Map

6 posts, 0 answers
  1. Peter
    Peter avatar
    39 posts
    Member since:
    Jul 2012

    Posted 16 Oct 2014 Link to this post

    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.
  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1803 posts

    Posted 21 Oct 2014 Link to this post

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Peter
    Peter avatar
    39 posts
    Member since:
    Jul 2012

    Posted 21 Oct 2014 in reply to Konstantin Dikov Link to this post

    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]]}]}]
  5. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1803 posts

    Posted 23 Oct 2014 Link to this post

    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
  6. Peter
    Peter avatar
    39 posts
    Member since:
    Jul 2012

    Posted 23 Oct 2014 Link to this post

    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

  7. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1803 posts

    Posted 28 Oct 2014 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017