This project has moved and is read-only. For the latest updates, please go here.

Adding moving image to map

Oct 7, 2013 at 4:50 PM
What I want to do is to add a small car icon to a specific Longitude/Latitude. I saw in a previous thread this code to add an image to the map. But, you have to specify the Top-Left and Down-Right.

I wanted to know if i could just add an image to a specific Longitude/Latitidude without giving any corner location.

var bitmap = new BitmapImage(new Uri("ms-appx:/10_535_330.jpg"));
var bitmapWidth = 256;
var bitmapHeight = 256;
var topLeft = new Point((map.ActualWidth - bitmapWidth) / 2,
                        (map.ActualHeight - bitmapHeight) / 2);
var bottomRight = new Point((map.ActualWidth + bitmapWidth) / 2,
                            (map.ActualHeight + bitmapHeight) / 2);
var tlLocation = map.ViewportPointToLocation(topLeft);
var brLocation = map.ViewportPointToLocation(bottomRight);

var mapImage = new MapImage
    West = tlLocation.Longitude,
    East = brLocation.Longitude,
    North = tlLocation.Latitude,
    South = brLocation.Latitude,
    Source = bitmap

Oct 7, 2013 at 6:01 PM
Edited Oct 7, 2013 at 6:16 PM
MapImage is the wrong control for this purpose, because it scales the image when the zoom level changes.

Instead use an ordinary Image control and set the MapPanel.Location attached property.
var image = new Image
    Source = new BitmapImage(new Uri(...)),
    Width = 256,
    Height = 256,
    HorizontalAlignment = HorizontalAlignment.Center,
    VerticalAlignment = VerticalAlignment.Center

Location location = ...
MapPanel.SetLocation(image, location);
Note that you can put any UIElement on the map at a specific Location by just setting its MapPanel.Location property.
Oct 8, 2013 at 8:58 PM
Thanks, it worked.

Another thing, I update the longitude/Latitude of the image, but don't see it moving until I do a zoom-in/zoom-out, so the map is updated.

I tried map.UpdateLayout(), it didn't work.
Marked as answer by Pat001 on 10/10/2013 at 2:32 PM
Oct 8, 2013 at 10:50 PM
You have to call MapPanel.SetLocation(...) on each update.
Oct 9, 2013 at 2:22 PM
Edited Oct 9, 2013 at 2:31 PM
It didnt work. It might be because in SetLocation, I pass the UIElement and not the image. But, I want to move the existing child and not add a new childrent to the map everytime.
//Get the image from the children Map
 UIElement autoIcon= map.Children[map.Children.Count - 1];
currentLocation.Latitude = currentLocation.Latitude + 0.0001;
currentLocation.Longitude = currentLocation.Longitude + 0.0001;

MapPanel.SetLocation(manualIcon, currentLocation);
Oct 9, 2013 at 4:52 PM
You're getting autoIcon from the Children collection, but call MapPanel.SetLocation on manualIcon. Doesn't make sense to me. And please drop all this UpdateDefaultStyle and UpdateLayout stuff. It's pointless.
Oct 9, 2013 at 5:40 PM
Ok, I will drop the Update calls.

About the SetLocation on manualIcon, it is just a copy paste mistake, I was trying to summarize my code.
            UIElement manualIcon; // global

            //Set an image to the current user position
            MapPanel.SetLocation(manualImage, currentLocation);
            manualIcon = map.Children[map.Children.Count - 1];
I have a thread running update the position of manualIcon:
            currentLocation = MapPanel.GetLocation(manualIcon);
            currentLocation.Latitude = currentLocation.Latitude + 0.0001;
            currentLocation.Longitude = currentLocation.Longitude + 0.0001;

            MapPanel.SetLocation(manualIcon, currentLocation);
But the map is update only when I move or zoom on the map.
Oct 9, 2013 at 6:46 PM
what I did is to use TranslateMap, so it forces the map to be updated.
                MapBase mapBase = MapPanel.GetParentMap(manualIcon);
                Point p1 = new Point(2, 2);
                Point p2 = new Point(1, 1);
Oct 10, 2013 at 12:46 AM
Edited Oct 10, 2013 at 12:47 AM
You have to pass a new Location instance to MapPanel.SetLocation. This is because Location does not provide property change notification when its Latitude or Longitude properties change.
currentLocation = MapPanel.GetLocation(manualIcon);
var newLocation = new Location(
    currentLocation.Latitude + 0.0001,
    currentLocation.Longitude + 0.0001);
MapPanel.SetLocation(manualIcon, newLocation);
And if you really do this in a separate thread please make sure that you call MapPanel.SetLocation in the UI thread via Dispatcher.Invoke or Dispatcher.BeginInvoke.
Marked as answer by Pat001 on 10/10/2013 at 2:32 PM