WP7 dragging a pushpin on a map

Question

Does anyone have any insight into how to implement a draggable pushpin on a map on a WP7 client running Mango? I have a pushpin bound to a geo-location on a map and I want the user to be able to drag it on a map and record its new location. I've seen some resources, but they're for non-WP7 Bing Maps control. Any help would be appreciated.

Thanks!

Answer 1

e.GetPosition(element) gives the position relative to the element passed on the parameter. Also, the point to convert using ViewportPointToLocation has to be relative to the position of the map. So, you have to do the following:

    Pushpin myPin = sender as Pushpin;
    Point p = e.GetPosition(**Map**);
    g = Map.ViewportPointToLocation(p);

Answer 2

You want to have the origin of your UI element not your finger right? Try this:

Point pM = e.GetPosition(**Map**);
Point pE = e.GetPosition(**UIElement**);

Point origin = new Point(pM.X - pE.X, pM.Y - pE.Y);
GeoCoordinate g = Map.ViewportPointToLocation(origin);

Answer 3

If anyone is curious, this is the solution I came up with:

XAML:

<map:Map x:Name="Map" Height="400" HorizontalAlignment="Left" Margin="6,10,0,0" VerticalAlignment="Top" Width="444" ZoomLevel="19" >
     <map:Map.Mode><map:AerialMode /></map:Map.Mode>
     <map:Pushpin x:Name="Pin" Background="Green" IsHitTestVisible="True" IsEnabled="True">
         <toolkit:GestureService.GestureListener>
              <toolkit:GestureListener DragDelta="Pushpin_OnDragDelta" DragStarted="Pushpin_OnDragStarted" DragCompleted="Pushpin_OnDragCompleted">
              </toolkit:GestureListener>
         </toolkit:GestureService.GestureListener>
     <map:Pushpin.RenderTransform>
          <TranslateTransform></TranslateTransform>
     </map:Pushpin.RenderTransform>
     </map:Pushpin>
</map:Map>

.cs:

private void Pushpin_OnDragDelta(object sender, DragDeltaGestureEventArgs e)
{
   Pushpin myPin = sender as Pushpin;
   TranslateTransform transform = myPin.RenderTransform as TranslateTransform;
   transform.X += e.HorizontalChange;
   transform.Y += e.VerticalChange;                                  
}

private void Pushpin_OnDragStarted(object sender, DragStartedGestureEventArgs e)
{
   Map.IsEnabled = false; // prevents the map from dragging w/ pushpin
}

private void Pushpin_OnDragCompleted(object sender, DragCompletedGestureEventArgs e)
{
   Map.IsEnabled = true;           
}

Does anyone have any ideas on how to extract the geocoordinates of the pushpin's new location?? I tried the code below in the event handler and it doesn't give correct coordinates:

 Pushpin myPin = sender as Pushpin;
 Point p = e.GetPosition(myPin);
 g = Map.ViewportPointToLocation(p);

myPin.location gives the old coordinates

Answer 4

I know this is a late response but I was working on a similar project and using a similar approach, so I thought I'd share. This is my first post so bare with me but my approach that I used was:

Create two global double variables to hold X,Y coord's:

double mapLocX;
double mapLocY;

Set these global doubles to the location of the point of your pushpin in your DragStarted event:

Point point = myMap.LocationToViewportPoint(myPin.Location);
mapLocX = point.X;
mapLocY = point.Y;

In your dragDelta event, change these variables as your would your pushpin:

mapLocX += e.HorizontalChange;
mapLocY += e.VerticalChange;

Now on DragCompleted create a new point that takes in our rendered global variables, and map them to a geocoordinate, and here's the kicker; Remove our old pin from the ObservableCollection (Mine is Locations) and add in a new pushpin at our new coordinate:

Point point = new Point(mapLocX, mapLocY);
GeoCoordinate geoCoord = new GeoCoordinate();
geoCoord = myMap.ViewportPointToLocation(point);

Locations.Remove(myPin.Location);
Locations.Add(geoCoord);

Hope this helps