Reputation: 53
I want to add a image to a MapControl. This is the simple code:
<maps:MapControl x:Name="Map"
<maps:MapItemsControl x:Name="mapItems">
<maps:MapItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<Image Source="{Binding ImageSourceUri}"
Loaded="Image_Loaded"
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}"/>
<ScaleTransform ScaleX="{Binding Scale.ScaleX}"
ScaleY="{Binding Scale.ScaleY}" />
</TransformGroup>
</Image.RenderTransform>
</Image>
</StackPanel>
</DataTemplate>
</maps:MapItemsControl.ItemTemplate>
</maps:MapItemsControl>
</maps:MapControl>
This is the related C# code to set the ItemSource:
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 ScaleTransform Scale { get; set; }
}
public sealed partial class MainPage : Page
{
private List<InterestPoint> points = new List<InterestPoint>();
private void Map_Loaded(object sender, RoutedEventArgs e)
{
points.Add(new InterestPoint
{
ImageSourceUri = new Uri("ms-appx:///Assets/my_position_red.png"),
Location = new Geopoint(new BasicGeoposition
{
Latitude = 0,
Longitude = 0,
Altitude = 0
},
AltitudeReferenceSystem.Terrain),
Rotate = new RotateTransform
{
Angle = 00,
CenterX = 187 / 2,
CenterY = 0
},
Translate = new TranslateTransform
{
X = 0,
Y = 0
},
Scale = new ScaleTransform
{
ScaleX = 0.3,
ScaleY = 0.3
}
});
mapItems.ItemsSource = points;
}
}
There are two issues in this code:
Thanks in advance for any suggestion. Stefano
EDIT: I've tried some sample found online and I see the same issue.
This is an image a with low zoom and you can see the red dot below the main road:
zooming this is the real position, a lot above the main road:
Upvotes: 1
Views: 102
Reputation: 32775
Location binding doesn't work. I can set the image URI, rotation, ect., but changing the location do not move the image in the map. I've solved getting the image object and setting directly the location, but this not solve the second issue
The problem is that you have not implement INotifyPropertyChanged
interface for Geopoint
property, it will not update the ui when the value changed.
the AltitudeReferenceSystem.Terrain seems not applied the to the location Geopoint so the image appears to be not at terrain level so zooming in and out seems to move around the point as in a 3D view.
Derive from official document remark part.
The altitude reference system that is returned for location fixes from the geolocation API may depend on the GPS/GNSS radio hardware. Most modern hardware will provide values using the Geoid reference system, but Map Control APIs will return values in the Elipsoid system. To find out which one is being used by a Geopoint object, see the AltitudeReferenceSystem property. You should not copy a BasicGeoposition without also copying the associated AltitudeReferenceSystem, otherwise the Altitude value will not be valid and could produce unexpected results.
Location = new Geopoint(new BasicGeoposition
{
Latitude = 0,
Longitude = 0,
Altitude = 0
},
AltitudeReferenceSystem.Terrain),
And please note you need to make the rotation center match the map center . Derive from Stefano Della Valle solution.
In my case I've set the translation in the image creation with these X and Y:
Translate = new TranslateTransform { X = -55, Y = -45 },
Upvotes: 1