WPF - Pushpins move out of place on zoom out

Question

Hey everybody,

I am currently switching my company's in-house routing application mapping features from Google Maps to Bing Maps. This application is completely written in WPF so I thought using the WPF Bing Map control would be simple. I was able to get custom pushpins to show up on the map, however there is one huge problem. As I zoomed out, the pushpins (no matter if it is a custom or default pushpin) does not maintain its geolocation on the map. It seems that it is keeping position on the MapLayer but not the Map itself. So if I zoom out to country level, my points are clear out in the middle of the ocean, which is no where close. The more I zoom in, the more accurate the location. 

This is so strange to me because I've used this WPF control with custom pushpins in another application and it worked flawlessly. I'm completely stumped right now and am pretty much stopped dead in my tracks until I tackle this hurdle.

Here's my XAML code containing the map control and the style for the pushpin:

//Border with Grid containg MapControl

<Border Grid.Column="1" BorderThickness="5,20,20,20" BorderBrush="#FFFFFFFF">
            <Border BorderThickness="1" BorderBrush="DimGray">
                <Grid x:Name="placementTarget" VerticalAlignment="stretch" HorizontalAlignment="stretch">
                    <map:Map Name="mapDialog" CredentialsProvider="Bing_MAPS_KEY" Margin="0,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                        <map:MapLayer/>
                    </map:Map>
                    <Button Name="zoomInButton" Style="{StaticResource zoomIn}" HorizontalAlignment="Left" Height="30" Margin="10,10,0,0" VerticalAlignment="Top" Width="30" Click="zoomInButton_Click" />
                    <Button Name="zoomOutButton" Style="{StaticResource zoomOut}" HorizontalAlignment="Left" Height="30" Margin="10,48,0,0" VerticalAlignment="Top" Width="30" Click="zoomOutButton_Click"/>
                </Grid>
            </Border>

//Pushpin style

<Style x:Key="pushpin" TargetType="m:Pushpin">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="m:Pushpin">
                    <Grid>
                        <Image Source="pushpin.png" MaxWidth="23px" MaxHeight="23px"/>
                        <ContentPresenter RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="0,10px,0,0" HorizontalAlignment="Center"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="FontWeight" Value="Bold"/>
        <Setter Property="Foreground" Value="Black" />
    </Style>

In my code, I have an event handler that has a loop in it that calls my AddPushpin method. This current loops runs 10 times. It successfully adds 10 pushpins. When I zoom out these pushpins become closer and closer until they eventually all pile up on each other, as seen below.

Here's my C# code for adding the pushpin (marker) to its corresponding layer (_pushpinLayer):

Pushpin marker = new Pushpin();
            Location markerLocation = new Location(item.LatLon.Latitude, item.LatLon.Longitude);

            marker.Location = markerLocation;
            marker.Content = index.ToString();
            marker.Style = (Style)(Resources["pushpin"]);
            marker.Tag = item.Description + "\r" + item.Timestamp.ToString();
	MapLayer.SetPositionOrigin(marker, PositionOrigin.Center);

            _pushpinLayer.AddChild(marker, marker.Location);

Also, the _pushpinLayer is added to the Map in the constructor.

Any help with this would be greatly appreciated!

Thanks so much

Ryan

Answer 1

The style looks a bit off for your pushpin. Have you tried using the default pushpin style first. Usually the issue you are describing is due to the pushpin not being offset such that the point of the pushpin is aligned with the coordinate in question. Take a look at the documentation here: http://msdn.microsoft.com/en-us/library/hh709044.aspx

---

http://rbrundritt.wordpress.com

Answer 2

Richard,

Thanks for the quick reply. Yes I have tried the default pushpin style...same issue. As far as the Position offset with the default pushpin, I used PositionOrigin.BottomCenter. With my style the pushpin looks like this  , so I've used BottomLeft for it. Either way, Default or Custom Style pushpin, same issue.

Answer 3

I figured it out. The constructor of this window was being passed in parameters. Before the constructor I was called the MapLayer but setting them to null. Inside the constructor I would set them. 

Example: before

MapLayer pinLayer = null;

XamlWindow(string blah, string blah, int i)
{
     pinLayer = new MapLayer();
}

Example: after

MapLayer pinLayer = new MapLayer();

XamlWindow(string blah, string blah, int i)
{
     map.AddChild(pinLayer);
}

After two whole days, glad to see this small mix up be resolved.