How to add a marker to .png map image on Windows Phone?

Question

I have a Windwows Phone application that allows the user to see on the map his initial position acquired by scanning a qr code. When user scans Qr Code, he gets the url to the map stored in the web server and the X and Y coordinates of his initial position.

I've created a container of map image in .xaml page :

<Image x:Name="ImagePanel" Width="470" Margin="5,0,5,98" Grid.Row="1" />

In .cs page, I downloaded map image from server :

    public void DownloadImage(string URLmappa)
    {

        ImagePanel.Source = new BitmapImage(new Uri(URLmappa));

        WebClient wc = new WebClient();
        wc.OpenReadCompleted += new OpenReadCompletedEventHandler(wc_OpenReadCompleted);

        try
        {

            wc.OpenReadAsync(new Uri(URLmappa), wc);

        }

        catch (Exception ex)
          {
              MessageBox.Show(ex.Message); 
          }

    }


    void wc_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)  
            {  
               if (e.Error == null && !e.Cancelled)  
              {  
                  try  
                  {  
                     BitmapImage image = new BitmapImage();  
                     image.SetSource(e.Result);  
                     ImagePanel.Source = image;  
                  }  
                  catch (Exception ex)  
                  {
                      MessageBox.Show(ex.Message); 
                  }  
              }  
              else  
              {
                  MessageBox.Show("It's impossibile to download map from server");
              }  

                    }

...and it works but the hard part is marking the locations on the image (report).

I've found something like this :

    public void MarkLocation(int posizioneX, int posizioneY)
    {
var imageMarker = new System.Web.UI.WebControls.Image { ImageUrl = "/pin.jpg" };
imageMarker.Style.Value = string.format("position:absolute;top:{0}px;left:{1}px;display:block;width:30px; height:30px;", point.X, point.Y);
imagePanel.Controls.Add(imageMarker); }

but it doesn't work on Windows Phone.

I'm interested in suggestions on how to mark location on (over) the image given X,Y coordinates.

Alternative approaches would be appreciated.

kindasimple kindasimple · Accepted Answer · 2013-02-21T17:32:36

You can place the image on a canvas and position a marker element absolutely as you are trying to do with the webcontrol. Alternatively, you could write the marker on the image using WriteableBitmapEx

How to add a marker to .png map image on Windows Phone?

1 Answers