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

Display LineString (route) from database on the map

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

3 Answers, 1 is accepted

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

 
0
jaber
Top achievements
Rank 1
answered on 22 Oct 2014, 10:01 PM
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.
0
jaber
Top achievements
Rank 1
answered on 22 Oct 2014, 11:09 PM
Hi, my problem solved.
location format in json string was my problem, correct location point is [Longitude, Latitude].
Thanks again.
Tags
Map
Asked by
jaber
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
jaber
Top achievements
Rank 1
Share this question
or