WP8 Deleting Images from Map (Error when navigating back to page) - windows-phone-8

Question

I have a Map that has several Images placed on it (inside the page_loaded event)
MapLayer pinLayer = new MapLayer();
MapOverlay pin50 = new MapOverlay();
pin50.GeoCoordinate = new GeoCoordinate(49.42563670946435, -0.44644108276367537);
Canvas myCanvas50 = new Canvas();
// The image is defined globally
pin50.PositionOrigin = new Point(0.5, 0.5);
image50.Source = new BitmapImage(new Uri("Images/Destroyer.png", UriKind.Relative));
image50.Opacity = 1;
Point point50 = new Point(1.0, 1.0);
Canvas.SetLeft(image50, point50.X);
Canvas.SetTop(image50, point50.Y);
myCanvas50.Children.Add(image50); // <=== ERROR OCCURS HERE
// Making an event handler for the image so that we can 'tap' on it
image50.DoubleTap += image50_DoubleTap;
pin50.Content = myCanvas50;
pinLayer50.Add(pin50);
map_J.Layers.Add(pinLayer);
It works fine for all of the Images, however when I click on an Image it navigates to a new page and gives a description of the Image that was clicked on.
The problem is that when a user navigates back to this map (by intuitively pressing the hardware BACK BUTTON) the app crashes due to the error "Element is already the child of another element."
I'm guessing that the page is still loaded so when it is navigated back to it gets 're-loaded' so can't add the same Image to the same canvas etc.
I tried adding the following to clear all information from the map before navigating away from the page but it doesn't help:
protected override void OnNavigatedFrom(NavigationEventArgs e)
{
base.OnNavigatedFrom(e);
var toRemove = new List<MapLayer>();
foreach (MapLayer lyr in map_J.Layers)
{
toRemove.Add(lyr);
}
// now do the actual removal
foreach (var child in toRemove)
{
map_J.Layers.Remove(child);
}
}
Any ideas? Is there a better way to handle the reloading of the map/elements?

Answer 1

I would recommend clearing the map layers everytime the user leaves the page.
Add this code to the main tag in the XAML code of the view:
<phone:PhoneApplicationPage
...
Unloaded="PhoneApplicationPage_Unloaded" >
And this event code behind:
private void PhoneApplicationPage_Unloaded(object sender, RoutedEventArgs e)
{
map_J.Layers.Clear();
}