Aligning MapShapeData

5 posts, 1 answers
  1. Jason D
    Jason D avatar
    72 posts
    Member since:
    Jan 2011

    Posted 26 Aug 2014 Link to this post

    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?
  2. Jason D
    Jason D avatar
    72 posts
    Member since:
    Jan 2011

    Posted 26 Aug 2014 in reply to Jason D Link to this post

    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.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Answer
    Ludmila
    Ludmila avatar
    4 posts
    Member since:
    Jul 2010

    Posted 27 Aug 2014 in reply to Jason D Link to this post

    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
  5. Jason D
    Jason D avatar
    72 posts
    Member since:
    Jan 2011

    Posted 27 Aug 2014 in reply to Ludmila Link to this post

    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

  6. Ludmila
    Ludmila avatar
    4 posts
    Member since:
    Jul 2010

    Posted 27 Aug 2014 in reply to Jason D Link to this post

    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
Back to Top
UI for WPF is Visual Studio 2017 Ready