Display LineString (route) from database on the map

[jaber]

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.

[Konstantin Dikov]

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

 

 

[jaber]

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.

[jaber]

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