Drag-n-drop usercontrol on map

13 posts, 1 answers
  1. Wenrong
    Wenrong avatar
    14 posts
    Member since:
    Sep 2011

    Posted 29 Sep 2011 Link to this post

    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?
  2. Answer
    Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 03 Oct 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. UI for WPF is Visual Studio 2017 Ready
  4. Wenrong
    Wenrong avatar
    14 posts
    Member since:
    Sep 2011

    Posted 03 Oct 2011 Link to this post

    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
  5. Wenrong
    Wenrong avatar
    14 posts
    Member since:
    Sep 2011

    Posted 03 Oct 2011 Link to this post

    The solution you attached seems to be missing a project called "DataVisualization_WPF"??
  6. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 06 Oct 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  7. Seth
    Seth avatar
    25 posts
    Member since:
    Jan 2009

    Posted 09 Oct 2011 Link to this post

    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
  8. Wenrong
    Wenrong avatar
    14 posts
    Member since:
    Sep 2011

    Posted 11 Oct 2011 Link to this post

    How do you limit the map region so use cannot zoom out too much or drag the map exceeding the boundary?
  9. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 12 Oct 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  10. Wenrong
    Wenrong avatar
    14 posts
    Member since:
    Sep 2011

    Posted 12 Oct 2011 Link to this post

    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?
  11. Seth
    Seth avatar
    25 posts
    Member since:
    Jan 2009

    Posted 12 Oct 2011 Link to this post

    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
  12. Seth
    Seth avatar
    25 posts
    Member since:
    Jan 2009

    Posted 13 Oct 2011 Link to this post

    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
  13. Wenrong
    Wenrong avatar
    14 posts
    Member since:
    Sep 2011

    Posted 13 Oct 2011 Link to this post

    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?
  14. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 17 Oct 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Back to Top
UI for WPF is Visual Studio 2017 Ready