This project has moved. For the latest updates, please go here.

How object are scaled while map is translated within the viewport

Jan 22, 2015 at 8:19 AM
Edited Jan 22, 2015 at 1:15 PM
I am trying to create a setup similar to this: https://google-developers.appspot.com/maps/articles/mvcfun/twittersearch

I have a (path) ellipse that has its bound to an object that holds the location (attached property MapPanel.Location and a radius (part of a XAML below).
<Style x:Key="GeoSelectorWidgetStyle" TargetType="map:DraggableMapItem">
            <Setter Property="map:MapPanel.Location" Value="{Binding OriginLocation, Mode=TwoWay}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="map:DraggableMapItem">
                        <Canvas>
                            <Path  Stroke="Blue"  StrokeThickness="2" Fill="#402BBBF0">
                                <Path.Data>
                                    <EllipseGeometry RadiusX  ="{Binding Path=Radius, Mode=TwoWay}" 
                                             RadiusY  ="{Binding Path=Radius, Mode=TwoWay}" 
                                             Transform="{Binding ScaleTransform, ElementName=map}"/>
                                </Path.Data>
                            </Path>
So I can basically draw a circle over a map. But when the map (not the elipse) is dragged within a wieport up or down, the circle get resized. Is there any way to avoid this?

Isn't this the same thing like here: Scaling Framework Element ?

Update:

So it seems I have to first draw my own circle on a Mercator projected map using a polyline first (points coordinates defined in (lat, lon)).
Coordinator
Jan 22, 2015 at 4:50 PM
If you do not want the Ellipse to be resized when the map scale changes, why do you bind its Transform property to the map's ScaleTransform?
Jan 22, 2015 at 5:25 PM
I was not specific enough. I want it to resize, but in another way. I want to draw circles on ellipsoid (Earth) surface. But for this I need to draw a circle approximated by a polygon defined in (lat,log) coordinates.
Coordinator
Jan 23, 2015 at 10:38 AM
Then use MapPolyline, as shown in the sample applications.
Marked as answer by ClemensF on 1/27/2015 at 1:11 PM
Jan 27, 2015 at 8:01 AM
It works, indeed. Formula used:
private LocationCollection CalculatePolyCircle( Location origin, double radius )
        {
            const int numPoints = 45;

            var circleLatLngs = new LocationCollection();

            var latLng = origin;
            const double d2r = Math.PI / 180;

            var step = 360 / numPoints;
            //const double EarthRadiusInMiles = 3956.0;
            const double EarthRadiusInKilometers = 6367.0;

            var lat = latLng.Latitude * d2r; //radians
            var lng = latLng.Longitude * d2r; //radians
            double d = radius / EarthRadiusInKilometers;

            for (var x = 0; x <= 360; x += step)
            {
                var brng = x * d2r;
                var latRadians = Math.Asin(Math.Sin(lat) * Math.Cos(d) + Math.Cos(lat) * Math.Sin(d) * Math.Cos(brng));
                var lngRadians = lng + Math.Atan2(Math.Sin(brng) * Math.Sin(d) * Math.Cos(lat), Math.Cos(d) - Math.Sin(lat) * Math.Sin(latRadians));

                circleLatLngs.Add(new Location(latRadians * 180 / Math.PI, lngRadians * 180 / Math.PI));
            }
            return circleLatLngs;
        }