UWP MapControl: MapElement fixed heading

Question

I'm adding a MapElement to my MapControl but when I rotate the MapControl, my MapElement rotates along with it. Is it possible to have a fixed heading on the element?

I've tried using a RotateTransform on the MapElement but the Element seems to just completely disappear.

I'm using the following code:
Also, the <Planes:Airplane /> object is just a custom drawn path.

    <Maps:MapControl x:Name="Map" Style="None" Grid.Row="2" TiltInteractionMode="GestureAndControl" ZoomInteractionMode="GestureAndControl" RotateInteractionMode="GestureAndControl" MapServiceToken="TOKEN HERE">
        <!-- Airplane Layer -->
        <Planes:Airplane x:Name="Airplane" Type="Prop" MaxHeight="80" Maps:MapControl.NormalizedAnchorPoint="0.5,0.5" />
    </Maps:MapControl>

If you want the angle of the element to remain the same even when you rotate the parent angle, RotateTransform Angle has to be set to Negative of Rotate transform Angle of Parent Element. — AVK
But when I change the RotateTransform's angle, the plane literally disappears off the map. — Destiny Faith
CenterX and CenterY Plays an important Role. Your Plane Disappears because you might be setting CenterX and CenterY to 0. It should be half of the Width and Height of the Plane — AVK
If you are not setting Width and Height at all, Bind the RotateTransform CenterX and CenterY to half of Calculated (Width || Height)/2 so that it rotates at center of plane. — AVK
I am setting both of those, so I'm really unsure why this is happening. — Destiny Faith

Elvis Xia - MSFT Elvis Xia - MSFT · Accepted Answer · 2016-09-15T07:19:35

I'm adding a MapElement to my MapControl but when I rotate the MapControl, my MapElement rotates along with it. Is it possible to have a fixed heading on the element?

MapElement doesn't inherit from UIElement, which is the origin of RenderTransform. So it is not possible to use RenderTransform on an MapElement.

But as a workaround you can consider using MapItemsControl to put any control or image on the map as you want and you can rotate or translate the image when you rotate the MapControl.

MainPage.Xaml:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <StackPanel VerticalAlignment="Center">
        <Maps:MapControl
        Width="500"
        Height="500"
        x:Name="myMap"            
        ZoomInteractionMode="GestureAndControl"
        TiltInteractionMode="GestureAndControl"   
        MapServiceToken="MapServiceToken">
            <Maps:MapItemsControl x:Name="mapItems">
                <Maps:MapItemsControl.ItemTemplate>
                    <DataTemplate>
                        <StackPanel>
                            <Image Source="{Binding ImageSourceUri}" 
                                   Maps:MapControl.Location="{Binding Location}">
                                <Image.RenderTransform>
                                    <TransformGroup>
                                        <RotateTransform Angle="{Binding Rotate.Angle}"
                                                         CenterX="{Binding Rotate.CenterX}"
                                                         CenterY="{Binding Rotate.CenterY}"/>
                                        <TranslateTransform X="{Binding Translate.X}"
                                                            Y="{Binding Translate.Y}"/>
                                    </TransformGroup>
                                </Image.RenderTransform>
                            </Image>
                        </StackPanel>
                    </DataTemplate>
                </Maps:MapItemsControl.ItemTemplate>
            </Maps:MapItemsControl>
        </Maps:MapControl>
        <Button Name="myAdd" Click="myAdd_Click">Click Me to Add Element</Button>
        <Button Name="btnRotate" Click="btnRotate_Click">Click Me to Rotate Element</Button>
    </StackPanel>
</Grid>

MainPage.xaml.cs:

public class InterestPoint
{
    public Uri ImageSourceUri { get; set; }
    public Geopoint Location { get; set; }
    public RotateTransform Rotate{ get; set; }
    public TranslateTransform Translate { get; set; }
    public Point CenterPoint { get; set; }
}
public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
    }

    private List<InterestPoint> InitInterestPoints(BasicGeoposition location)
    {
        List<InterestPoint> points = new List<InterestPoint>();
        points.Add(new InterestPoint {
            ImageSourceUri = new Uri("ms-appx:///Assets/mappin.png"),
            Location = new Geopoint(location),
            Rotate=new RotateTransform
            {
                Angle=15,
                CenterX=28.5,
                CenterY=88
            },
            Translate=new TranslateTransform
            {
                X=-28.5,
                Y=-90
            }
        });

        return points;
    }

    private void myAdd_Click(object sender, RoutedEventArgs e)
    {
        mapItems.ItemsSource = InitInterestPoints(myMap.Center.Position);
    }

    private void btnRotate_Click(object sender, RoutedEventArgs e)
    {
        var points = mapItems.ItemsSource as List<InterestPoint>;
        points[0].Rotate.Angle += 10;
    }
}

Here is the Effect:

And Here is the link to the whole demo: MapElementRotationSample.

Notes: The Image is added taking the left up point as anchor point. So you need to translate the image according to the image size.(My image is 57*90, so I need to translate it (-28.5,-88) to let the needle point be the center point).

UWP MapControl: MapElement fixed heading

1 Answers