Drag-n-drop usercontrol on map

[Wenrong]

Hi,

We are developing a new application. One of the feature that we are planning is a floor plan interface with ability to place controls on the map, and we are evaluating whether the RadMap is the right module to use.

1. The floor plan would be a single image, I figure this is possible by implement a custom ImageProvider
2. The zoom-out level needs to be limited to when the image fills the window
3. User need to be able to add new controls to the map, which can be a custom WPF user control, or a RadGauge. The control will be fixed at a map coordinate.
4. User needs to be able to drag-n-drop any control to any place on the map, and also rotate the control. The new placement and angle will be remembered.
5. User needs to be able to remove controls from the map (maybe through context menu on the control)

And hopefully 3-5 can be achieved through data-binding.

Is the RadMap module the right tool for what we needed? or is there some other control that would suite this scenario better?

[Andrey]

Hello Wenrong,

It looks like your task can be implemented using the RadMap control. Please, find attached sample WPF project which demonstrates how you can load, pan and zoom single image file using RadMap.

You can add any geographically positioned framework elements into the information layer. I would recommend you to take a look into the following samples in our demo application:

http://demos.telerik.com/silverlight/#Map/DataBinding
http://demos.telerik.com/silverlight/#Map/HotSpot
http://demos.telerik.com/silverlight/#Map/Integration/MapPieChart

Greetings,

Andrey Murzov

the Telerik team

[Wenrong]

Thanks. I was gonna ask about the drag-n-drop part, but looks like someone else has just done that here:
http://www.telerik.com/community/forums/wpf/map/how-to-allow-user-to-drag-a-pinpoint.aspx

[Wenrong]

The solution you attached seems to be missing a project called "DataVisualization_WPF"??

[Andrey]

Hello Wenrong,

This is an internal name of the project for the Telerik.Windows.Controls.DataVisualization.dll. Simply remove the DataVisualization_WPF project from the solution and add reference to the Telerik.Windows.Controls.DataVisualization.dll.

Best wishes,

Andrey Murzov

the Telerik team

[Seth]

I never saw an answer for Wenrong's 2nd item: "The zoom-out level needs to be limited to when the image fills the window."

I have the same need. I am loading an image via the UriImageProvider and I am allowing drag and drop of MapPinPoints. However, I don't want the user to be able to zoom out enough to see gray, which also solves my issue of not allowing users to drag and drop pins onto the gray area.

Any ideas?

Thanks,
Seth

[Wenrong]

How do you limit the map region so use cannot zoom out too much or drag the map exceeding the boundary?

[Andrey]

Hello Seth,

You can restrict the zoom level in RadMap using the RadMap.MinZoomLevel and RadMap.MaxZoomLevel properties. For more information please take a look at the following topic in our documentation:
http://www.telerik.com/help/wpf/radmap-howto-limit-panning-zooming-region.html

All the best,
Andrey Murzov
the Telerik team

[Wenrong]

Hmm... The panning can be solved using the RadMap.GeoBounds as sugguested. But zooming doesn't. the zoom level restriction is only an integer, so it only provides a very coarse control over zoom levels.

Also how can I calculate appropriate zoom level limits based on the image size?

[Seth]

For me, I need to know how to calculate the Min and Max zoom levels based on the image size used with the UriImageProvider.

Thanks,
Seth

[Seth]

Hey Wenrong,

I managed to figure out how to calculate zoom and center using this thread: Calculate view port from a location rect. It's for the SL version of the control, but concept is the same.

The only thing I had to do was change the integer value assigned to the tileSize variable. The link above hard codes it to 256. Based on trial and error I was able to determine a formula that sets the tileSize based on the dimensions of the underlying image. For Example:

Private Sub MainWindow_SizeChanged(ByVal sender As Object, ByVal e As System.Windows.SizeChangedEventArgs) Handles Me.SizeChanged
    SetCenterAndZoomByRectangle()
End Sub

Private Sub SetCenterAndZoomByRectangle()
    Dim oImage = New BitmapImage(New Uri("pack://application:,,," + UriImageProvider1.Uri.OriginalString))

    Dim wNwLatitude = (1 - (oImage.Height / oImage.Width)) / 2
    Dim wSeLatitude = -1 * (1 - wNwLatitude)
    wNwLatitude = wNwLatitude * -1

    Dim leftTop As New Location(wNwLatitude, 0)
    Dim rightBottom As New Location(wSeLatitude, 1)

    Dim centerLocation As Location = New Location((leftTop.Latitude + rightBottom.Latitude) / 2, (leftTop.Longitude + rightBottom.Longitude) / 2)

    radMap.GeoBoundsNW = leftTop
    radMap.GeoBoundsSE = rightBottom
    radMap.Center = centerLocation

    Dim leftTopPoint As Point = radMap.SpatialReference.GeographicToLogical(leftTop)
    Dim rightBottomPoint As Point = radMap.SpatialReference.GeographicToLogical(rightBottom)

    Dim viewportWidth As Double = rightBottomPoint.X - leftTopPoint.X
    Dim viewportHeight As Double = rightBottomPoint.Y - leftTopPoint.Y
    Dim proportionalWidth As Double = viewportWidth / radMap.ActualWidth
    Dim proportionalHeight As Double = viewportHeight / radMap.ActualHeight
    Dim tileSize As Double = (oImage.Width / oImage.Height) * 119

    If (proportionalWidth > proportionalHeight) Then
        radMap.ZoomLevel = Convert.ToInt32(Math.Log(radMap.ActualWidth / tileSize / viewportWidth, 2D))
        radMap.MinZoomLevel = Convert.ToInt32(Math.Log(radMap.ActualWidth / tileSize / viewportWidth, 2D))
    Else
        radMap.ZoomLevel = Convert.ToInt32(Math.Log(radMap.ActualHeight / tileSize / viewportHeight, 2D))
        radMap.MinZoomLevel = Convert.ToInt32(Math.Log(radMap.ActualHeight / tileSize / viewportHeight, 2D))
    End If
End Sub

Not sure if that helps you...

Thanks,
Seth

[Wenrong]

Thanks Seth, very clever solution.

Still the "Zoom level" setting is too coarse. I really would like to see RadMap.GeoBound to be applied while zooming. I believe that's the solution I need. And it does make sense, not only for my application. When you set the bound you would expect that the control will restrict the user from going over this boundary.

Telerik devs, any chance in implementing this? If worried about backward consistency, maybe add a new property called MinZoomToBound or something?

[Andrey]

Hello Wenrong,

At present, the map control supports a zoom level of integer type only.

Most of the map providers do not allow getting tiles for fractional zoom levels. So, the RadMap supports integer zoom levels irrespective of type of map provider you use (Bing, Open Street or Empty provider).

Your image occupy geographical region with known boundaries. So you can use functionality provided by LocationRect class to calculate neares zoom level and coordinates of the map center so all your image will be visible:

LocationRect rect = new LocationRect(
    new Location(40, 50),
    new Location(30, 70));
rect.MapControl = this.radMap;
Location center = rect.Center;
int zoom = rect.ZoomLevel;

Regards,

Andrey Murzov

the Telerik team