Drawing data-bound distance-sized shapes on layers in WPF RadMap

5 posts, 0 answers
  1. Adam Barney
    Adam Barney avatar
    3 posts
    Member since:
    Nov 2009

    Posted 29 Dec 2014 Link to this post

    Here's what I'm trying to accomplish: I have an app that needs to show the user's current location on a map (determined using an attached GPS puck.  The library I'm using provides me the latitude, longitude and accuracy (in meters).  I will also want to place other pins on the map (lat, long only).  I want to display a dot on the map that represents the lat/long, with a circle around it, the width of which displays the accuracy of the reading.

    So, I will have an observable collection of objects that have lat, long and accuracy.  I've been trying to follow this page in the documentation:

    http://docs.telerik.com/devtools/wpf/controls/radmap/features/visualization-layer/data-binding.html

    but this is pixel-based sizing.  I want the ellipse I draw to be a certain height/width determined by a distance on the map.  I have the radius in meters, but I also have a function that will convert it in to a value that represents the degrees of latitude/longitude, which works in the EllipseData object.  However, since I'm databinding, the EllipseData object can't be used in the items template (not a Dependency object) and even still, the properties for width and height can't be bound as they aren't dependency properties.

    How can I specify a width/height of a data-bound ellipse in the information or visualization layers in meters (or degrees)?  A related question that may be the solution is this: how can I determine the scale of the currently displayed map view-port?  I could certainly use a value converter or attached property or something to figure out the pixel width from there (though I'd prefer a simpler way).

    Thanks in advance!

    Adam
  2. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 01 Jan 2015 Link to this post

    Hello Adam,

    I am unsure how you have built your view models and how exactly you tried using the EllipseData. I have attached a simple project where I have bound a list of EllipseDatas to the ItemsSource of a visualization layer. On the click of a button the ellipse is resized and relocated.

    You are right, the EllipseData is not a dependency object and you can not use bindings to set its properties in xaml. Perhaps if you need to use the EllipseData in xaml, you can create a brand new EllipseData (via attached property). Or you can use the demonstrated approach with EllipseDatas in the view model.

    Perhaps your actual set up is much different and the provided project does not help. If this is the case, I will ask that you modify the attached project, so that we know a little more about your case.

    Regards,
    Petar Marchev
    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.

     
  3. UI for WPF is Visual Studio 2017 Ready
  4. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 05 Jan 2015 Link to this post

    Hi Adam,

    We also wanted to suggest another approach which you can consider.
    In DataTemplates you can add the so called BindableWrappers - MapEllipseView, MapLineView, MapRectangleView, MapPathView etc. They are all dependency objects.
    You can find such approach implemented in the attached project.
    <DataTemplate x:Key="template">              
                   <telerik:MapEllipseView  Location="{Binding DepartureLocation}"
                                            Width="{Binding EllipseWidth}"
                                            Height="{Binding EllipseHeight}"/>              
               </DataTemplate>

    However, we still do not know your exact scenario and whether the previous or this way is better for you. We hope you will be able to proceed further.

    Regards,
    Petar Mladenov
    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.

     
  5. Adam Barney
    Adam Barney avatar
    3 posts
    Member since:
    Nov 2009

    Posted 07 Jan 2015 Link to this post

    Thanks for the samples.  Unfortunately, they don't address the need to specify an ellipse width in METERS, or even degrees of longitude - you still seem to be specifying the width of the ellipse in pixels.

    This is what I came up with.  I found another post somewhere on the forum describing how to go from a pixel distance on the map to the degrees longitude equivalent, then worked back from there.  My view model for a map object now has this property:

            
    public double AccuracyPixelWidth
    {
        get
        {
            var latRad = Location.Latitude * Math.PI / 180;
            var lengthOfOneDegLong = (Math.PI/180)*EarthRadius*Math.Cos(latRad);
            var width = Accuracy/lengthOfOneDegLong;
             
            var pixelWidth = TileSize*Math.Pow(2.0, ZoomLevel)*(width/360);
            return pixelWidth;
        }
    }


    It's not pretty, and I'm not 100% certain it's correct, but the circles that are drawn do appear to be the correct size, or at least near enough to be acceptable.

    Adam
  6. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 08 Jan 2015 Link to this post

    Hello Adam,

    The Width and Height properties of the MapEllipseView represent degrees.

    /// <summary>
        /// Represents ellipse given in the geographical coordinates.
        /// Width and Height properties sets size of the ellipse in
        /// the degrees (spatial units).
        /// </summary>
        public class MapEllipseView : MapShapeBindableWrapper


    Regards,
    Petar Mladenov
    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.

     
Back to Top
UI for WPF is Visual Studio 2017 Ready