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

[Adam Barney]

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

[Petar Marchev]

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

 

 

[Petar Mladenov]

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

 

 

[Adam Barney]

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

[Petar Mladenov]

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