Aligning MapShapeData

[Jason D]

I've transitioned all my geometry to MapShapeData objects, with the exception of MapPinPoint. I am still using those because they allow positioning over the center instead of the upper left corner. How can I create an EllipseData (for example) so that its center is at 30,-90 instead of its upper left corner at that coordinate?

[Jason D]

FYI, one of the reasons I need this is that I am using the ZIndex for the other shapes to ensure they are drawn in the correct order. But when using the ZIndex, the MapPinPoint is underneath the other shapes. If I don't use ZIndex at all, the shapes are occasionally drawn in random order, ignoring the order they were added.

[Ludmila]

Hello Jason,

There are 2 ways to do it:

1. You can calculate top-left corner of the EllipseData using its center and size (Width and Height):

Location center = new Location(30, -90);
double width = 0.5; // degrees
double height = 0.5; // degrees

EllipseData ellipse = new EllipseData()
{
    Location = new Location(center.Latitude + height / 2.0d, center.Longitude - width / 2.0d),
    Height = height,
    Width = width,
    ShapeFill = new MapShapeFill()
    {
        Fill = new SolidColorBrush(Color.FromArgb(127, 0, 240, 255)),
        Stroke = new SolidColorBrush(Colors.Red),
        StrokeThickness = 2
    }
};

2. You can use PathData and EllipseGeometryData. The EllipseGeometryData allows you use center of the ellipse to position it:

PathData path = new PathData()
{
    Data = new EllipseGeometryData()
    {
        Center = new Location(30, -90),
        RadiusX = 0.25, // degrees
        RadiusY = 0.25  // degrees
    },
    ShapeFill = new MapShapeFill()
    {
        Fill = new SolidColorBrush(Color.FromArgb(127, 0, 240, 255)),
        Stroke = new SolidColorBrush(Colors.Red),
        StrokeThickness = 2
    }
};

Best Regards
Ludmila Murzova

[Jason D]

Not what I was expecting, but it works. Thanks.

However, the Ellipse and other shapes will not work for me after all. Because of the projection (I guess), they are not perfectly square or round. Also, because of the dimensions are specified in degrees, the shape is invisible when zoomed out, and huge when zoomed in.

For anyone who has the same problem, I got around this by using a Line with the same start and end point. Using a Round cap allows it to simulate being a circle.

Dim loCenter As Location

loCenter = New Location(30, -90)

Dim loShape As LineData
loShape = New LineData

loShape.Point1 = loCenter
loShape.Point2 = loCenter
loShape.ShapeFill = New MapShapeFill
loShape.ShapeFill.Stroke = New Windows.Media.SolidColorBrush(Windows.Media.Color.FromArgb(255, 255, 95, 90))
loShape.ShapeFill.StrokeEndLineCap = Windows.Media.PenLineCap.Round
loShape.ShapeFill.StrokeStartLineCap = Windows.Media.PenLineCap.Round
loShape.ShapeFill.StrokeThickness = 12

[Ludmila]

Hello Jason,

It looks like I didn't get your question right. You told about MapShapeData objects which all have the coordinates given as latitude and longitude and size in degrees. So I supposed that you need resizable shapes on the map. But if you need a simple Ellipse shape which don't change its size when zooming and have size given in pixels then the solution is ever so much easier:

Location center = new Location(30, -90);
Ellipse ellipse = new Ellipse()
{
    Height = 30, // pixels
    Width = 30, // pixels,
    HorizontalAlignment = HorizontalAlignment.Center,
    VerticalAlignment = VerticalAlignment.Center,
    Fill = new SolidColorBrush(Colors.Red)
};
Canvas.SetZIndex(ellipse, 2);
MapLayer.SetLocation(ellipse, center);

Pay attention, I set HorizontalAlignment and VerticalAlignment to the Center value. It makes framework element centered around the location.

Best Regards
Ludmila Murzova