Display LineString (route) from database on the map

4 posts, 1 answers
  1. jaber
    jaber avatar
    3 posts
    Member since:
    Oct 2014

    Posted 16 Oct 2014 Link to this post

    Hi.
    I need to show route between point that stored in the sql server database and find these threads
    http://www.telerik.com/help/aspnet-ajax/map-client-side-data-binding.html
    http://demos.telerik.com/aspnet-ajax/map/examples/functionality/cross-layer-integration/defaultcs.aspx
    My problem is that in these examples rout point are in json file.
    Please help me to bind shapelayer to database.
    Thank you.
  2. Answer
    Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1800 posts

    Posted 21 Oct 2014 Link to this post

    Hello Jaber,

    Currently, RadMap does not support binding GeoJSON data from server-side and the only way is through the RadClientDataSource control or through the API on client-side.

    Having that in mind, once you retrieve the data on server-side you could save it in a HiddenField control for example and on client-side, using the RadMap API you can manually bind the shapes. Following is a simple implementation of that approach:
    <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]]]}]";
    }

    Hope this helps.


    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. jaber
    jaber avatar
    3 posts
    Member since:
    Oct 2014

    Posted 22 Oct 2014 Link to this post

    Hello Konstantin Dikov.

    Thank you very much for your answer.It was like a light for my road.
    I implemented your code and it worked like a charm.

    My new problem is appear when i replace hiddenGeoJSON.Value with real points from google map like these [25.070051,55.151253],[25.142798,55.221977] , ... . polygon is drawn in the wrong place. I changed CenterSetting latitude and longitude with my location gived by google map and it worked fne bute polygon with my points is drawn in the wrong place.

    I'd be very grateful If you can help me.
    Thanks alot.
  5. jaber
    jaber avatar
    3 posts
    Member since:
    Oct 2014

    Posted 22 Oct 2014 Link to this post

    Hi, my problem solved.
    location format in json string was my problem, correct location point is [Longitude, Latitude].
    Thanks again.
Back to Top