RadMap - exporting directions to KML

[Civelle]

Hi.

I would like to know if it is possible to provide addresses (address 1, address2, address3, etc..) to the RadMap control and then have the control display the directions from one address to the other (addres1 to address2, then to address 3, etc...).

Once that this would be done, I would like to be able to export the geocodes (coordinates) found by Bing for each address to a KML file, in order to re-use it in the future, without the need for the user to do map mouse clicks.

If it is possible, would you please explain how it can be done.

Thanks.

[Andrey]

Hello Civelle,

I have attached a sample solution that builds route by addresses. Also it allows to save result to KML file or to load KML.
I hope it helps.

Sincerely yours,
Andrey Murzov
the Telerik team

[Civelle]

Hy Andrey and thanks a lot for this quick answer with an example. :)

I was able to make it work (with couples of modifications like addition of xmlns references in MainPage.xaml and using only 'RadMap' instead of the long name in MainPage.xaml.cs, if my memory is good), with my own addresses.

I assumed that the example you sent me is using Silverlight  4, right? If so, is there similar functionality with telerik for silverlight 3 (this is the version that we are presently using)?


Civelle.

[Andrey]

Hello Civelle,

Yes, there is similar functionality with Telerik RadControls for Silverlight 3 v 2010 Q1 build 0603.
You can use the example the same way with a small difference. You should change prefixes of XAML code for RadMap control and InformationLayer like the following example:

<UserControl x:Class="RoutingToKml.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:map="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.DataVisualization"
    xmlns:layer="clr-namespace:Telerik.Windows.Controls.Map;assembly=Telerik.Windows.Controls.DataVisualization"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
  <Grid x:Name="LayoutRoot">
        <map:RadMap
            x:Name="radMap"
            UseSpringAnimations="True"
            Center="40.7308244885714, -73.9974411711714"
            ZoomLevel="16">
            <layer:InformationLayer x:Name="informationLayer" />
        </map:RadMap>
        <Button
            Width="150" Height="25" VerticalAlignment="Top" HorizontalAlignment="Right"
            Content="Load Addresses"
            x:Name="loadAddresses"
            Click="LoadAddresses"/>
        <Button
            Width="150" Height="25" VerticalAlignment="Top" HorizontalAlignment="Right"
            Margin="0,30,0,0"
            Content="Save To KML"
            Click="SaveToKML"/>
        <Button
            Width="150" Height="25" VerticalAlignment="Top" HorizontalAlignment="Right"
            Margin="0,60,0,0"
            Content="Load KML"
            Click="LoadKML"/>
        <Button
            Width="150" Height="25" VerticalAlignment="Top" HorizontalAlignment="Right"
            Margin="0,90,0,0"
            Content="Clear route"
            Click="ClearRoute"/>
    </Grid>
</UserControl>

Kind regards,
Andrey Murzov
the Telerik team

[Civelle]

Thanks again Andrey. This is very helpfull.

Now, I am moving to the next requirement in our application which is the ability to 'save' the map so we can either email it or embed it into a report. I did a lot of reading and tried couple of things: I read stuff about creating .pdf file in silverlight 4 and I read and did couple of tests using the 'WriteableBitmap' but without any success so far.


Is there anything in Telerik, either for silverlight 3 or silverlight 4, that could help me achieve our goal?


Ginette.

[Andrey]

Hello Civelle,

Unfortunately, it is impossible to get screenshot of RadMap to an image the same way as for other controls, because it contains images from a site of the map provider (like Bing). The export to image in Silverlight is performed using the WriteableBitmap class, but the domain name resolver (that's used by WriteableBitmap) requires that the website domain and that of the MediaElement to be same to allow pixel access. So, there is no easy way to create screenshot of RadMap control programmatically in Silverlight.
We have this task in our plans for the future releases. You can track its implementation using our PITS system:
http://www.telerik.com/support/pits.aspx#/public/silverlight/1029

Greetings,
Andrey Murzov
the Telerik team

[Civelle]

Re-Re-Re Hi Andrey!

I understand what you are saying but after couple of research, I was able to create a 'snapshot' of the map by putting it within a canvas and displaying the snapshot into an Image object (see code below). Shouldn't I be able to print this image? Although I tried to, but the file created is empty. At first I thought tha the reason was because of the radmap within the canvas, but after removing the radmap from the canvas, while leaving only the button, the saved file is still empty. So I was wondering if this is just because my code for transferring the image into the StreamWriter is invalid... What do you think about what I did?  Do you think it has a chance to work or will I still be facing the limitation mentioned in your reply?

MainPage.xaml:

{<UserControl

 

 

 

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

 

 

 

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

 

 

 

x:Class="SilverlightApplication5.MainPage"

 

 

 

xmlns:telerikMapping="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.DataVisualization"

 

 

 

xmlns:telerikLayer="clr-namespace:Telerik.Windows.Controls.Map;assembly=Telerik.Windows.Controls.DataVisualization"

 

 

 

Width="640" Height="480">

 

 

<UserControl.Resources>

 

</UserControl.Resources>

 

<Grid x:Name="LayoutRoot" Background="White">

 

<Image x:Name="imgImage" Width="200" Height="200" HorizontalAlignment="Left" VerticalAlignment="Top"/>

 

<Canvas x:Name="myCanvas" Margin="161,119,110,123">

 

<telerikMapping:RadMap

 

x:Name="radMap"

 

UseSpringAnimations="True"

 

Center="45.56511245493385, -73.92725978046655"

 

ZoomLevel="16" Margin="0,0,-160,0" Canvas.Left="12" Canvas.Top="57" Width="300" Height="100">

 

<telerikLayer:InformationLayer x:Name="informationLayer" />

 

 

</telerikMapping:RadMap>

 

 

<Button Content="Button" Height="47" Canvas.Left="68" Canvas.Top="185" Width="146"/>

 

</Canvas>

 

<Button x:Name="btnPrint" Content="Print" Height="22" Margin="240,0,285,42" VerticalAlignment="Bottom"/>

 

</Grid>

 

</

 

 

UserControl>

 

 

 

 

 

 

 

 

MainPage.xaml.vb:

 

 

Imports

 

 

System

 

Imports

 

 

System.Collections.Generic

 

Imports

 

 

System.Linq

 

Imports

 

 

System.Net

 

Imports

 

 

System.Windows

 

Imports

 

 

System.Windows.Controls

 

Imports

 

 

System.Windows.Documents

 

Imports

 

 

System.Windows.Input

 

Imports

 

 

System.Windows.Media

 

Imports

 

 

System.Windows.Media.Animation

 

Imports

 

 

System.Windows.Shapes

 

Imports

 

 

Telerik.Windows.Controls.Map

 

Imports

 

 

System.Globalization

 

Imports

 

 

System.IO

 

Imports

 

 

System.Windows.Printing

 

Imports

 

 

ImageTools

 

Imports

 

 

ImageTools.IO.Png

 

Imports

 

 

ImageTools.Helpers

 

　

Partial

 

 

Public Class MainPage

 

 

 

Inherits UserControl

 

 

 

Private bingApplicationId As String = "Asa04vAHTwGszIXDGyxTT03TXQ_Dem_B4OD3mcMjRuRKsr6W3TEVEmBQ9txts7HU"

 

 

 

Private geoProvider As BingGeocodeProvider

 

 

 

Private routeProvider As BingRouteProvider

 

 

 

 

Private addressIndex As Integer = 0

 

 

 

Private locations As New LocationCollection()

 

 

 

Public Sub New()

 

InitializeComponent()

 

 

AddHandler radMap.InitializeCompleted, AddressOf radMap_InitializeCompleted

 

 

 

Dim provider = New BingMapProvider(MapMode.Road, True, Me.bingApplicationId)

 

 

 

Me.radMap.Provider = provider

 

 

 

End Sub

 

 

 

Public Sub TakeScreenShot()

 

 

 

''Test - lien de Ben

 

 

 

'Dim myImmage As ImageTools.Image

 

 

 

'myImmage = myCanvas.ToImage()

 

 

 

'Test - code de Micael

 

 

 

Dim screenshot As Imaging.WriteableBitmap

 

screenshot =

 

New Imaging.WriteableBitmap(CInt(myCanvas.RenderSize.Width), CInt(myCanvas.RenderSize.Height))

 

screenshot.Render(myCanvas,

 

New TranslateTransform())

 

screenshot.Invalidate()

imgImage.Source = screenshot

 

 

'

 

 

 

Dim sfd As New SaveFileDialog()

 

sfd.Filter =

 

"Image Files (*.png)|*.png"

 

 

 

If sfd.ShowDialog() = True Then

 

 

 

Using stream As Stream = sfd.OpenFile()

 

 

 

'myImmage.WriteToStream(stream)

 

 

 

Dim myWriter As StreamWriter = New StreamWriter(stream)

 

myWriter.Write(screenshot)

 

 

End Using

 

 

 

End If

 

 

 

End Sub

 

 

 

Private Sub btnPrint_Click(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles btnPrint.Click

 

TakeScreenShot()

 

 

End Sub

 

 

 

Private Sub radMap_InitializeCompleted(ByVal sender As Object, ByVal e As EventArgs)

 

 

 

Me.InitGeoProvider()

 

 

 

Me.InitRouteProvider()

 

 

 

End Sub

 

 

 

Private Sub InitGeoProvider()

 

 

 

Me.geoProvider = New BingGeocodeProvider()

 

 

 

Me.geoProvider.ApplicationId = Me.bingApplicationId

 

 

 

Me.geoProvider.MapControl = Me.radMap

 

 

 

AddHandler geoProvider.GeocodeCompleted, AddressOf geoProvider_GeocodeCompleted

 

 

 

End Sub

 

 

 

Private Sub geoProvider_GeocodeCompleted(ByVal sender As Object, ByVal e As GeocodeCompletedEventArgs)

 

locations.Add(e.Response.Results(0).Locations(0))

 

 

End Sub

 

 

 

Private Sub InitRouteProvider()

 

 

 

Me.routeProvider = New BingRouteProvider()

 

 

 

Me.routeProvider.ApplicationId = Me.bingApplicationId

 

 

 

Me.routeProvider.MapControl = Me.radMap

 

 

 

AddHandler routeProvider.RoutingCompleted, AddressOf routeProvider_RoutingCompleted

 

 

 

End Sub

 

 

 

Private Sub routeProvider_RoutingCompleted(ByVal sender As Object, ByVal e As RoutingCompletedEventArgs)

 

 

 

Dim routeResponse As RouteResponse = TryCast(e.Response, RouteResponse)

 

 

 

If routeResponse IsNot Nothing Then

 

 

 

If routeResponse.Result.RoutePath IsNot Nothing Then

 

radMap.Center =

 

New Location(45.5651124549339, -73.9272597804666)

 

 

 

Dim routeLine As New MapPolyline()

 

routeLine.Points = routeResponse.Result.RoutePath.Points

routeLine.Stroke =

 

New SolidColorBrush(Colors.Brown)

 

routeLine.StrokeThickness = 3

 

 

Me.informationLayer.Items.Clear()

 

 

 

Me.informationLayer.Items.Add(routeLine)

 

 

 

End If

 

 

 

End If

 

 

 

End Sub

 

End

 

 

Class
}

 

 

 

 

 

 

 

 

 

 

Civelle

 

 

 

 

 

[Andrey]

Hello Civelle,

I have created a solution from the code you sent. It has the same problem with the snapshot.
The additional image you use for snapshot has the same restrictions as the RadMap instance. Also when you try to save the screenshot then you try to save the WriteableBitmap instance. If you add the "Using" operator for the StreamWriter in your code, then the file will be saved. It will contain the class name only. This way you cannot save an image in appropriate format or to get access to pixel data of snapshot.

The printing of the RadMap content could be done using standard Silverlight approach without additional image. The sample code is below.
Note, the PrintDocument class is supported by Silverlight 4 only.

<UserControl x:Class="PrintingMapVB.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    mc:Ignorable="d"
    Height="300" Width="400"
    d:DesignHeight="300" d:DesignWidth="400">
    <Grid x:Name="LayoutRoot" Background="White">
        <telerik:RadMap x:Name="radMap"
                        Center="37.684297,-99.06924"
                        ZoomLevel="4">
        </telerik:RadMap>
        <Button Content="Print" Height="23" HorizontalAlignment="Left" Margin="166,244,0,0"
                VerticalAlignment="Top" Width="75" Click="Button_Click" />
    </Grid>
</UserControl>

Imports Telerik.Windows.Controls.Map

Partial Public Class MainPage
    Inherits UserControl

    Public Sub New()
        InitializeComponent()

        Dim provider = New OpenStreetMapProvider
        Me.radMap.Provider = provider
    End Sub

    Private Sub Button_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
        Dim doc As PrintDocument = New PrintDocument()
        AddHandler doc.PrintPage, AddressOf PrintPage
        doc.Print("My map")
    End Sub

    Private Sub PrintPage(ByVal sender As System.Object, ByVal e As PrintPageEventArgs)
        e.PageVisual = Me.radMap
    End Sub
End Class

Best wishes,
Andrey Murzov
the Telerik team

[Civelle]

Hi Andrey and thanks for all the effort you are putting into answering my questions.

Finally, I understand that 'saving' the map is not possible at this point in time. For the print, I was also able to have it work properly. The save issue is a real problem for us that we absolutly need to solve, one way or another...

Anyway, it was a real pleasure to discuss about this with you.
 
Civelle :o) 

[Andrey]

Hi Civelle,

That is correct -- currently it is impossible to save map image to file, but we will work on this feature in the future releases.

Regards,
Andrey Murzov
the Telerik team