Bing Maps PushPin and Zoomin / Zoom out

Question

Question 1

I currently have my Bing Maps set up But I wish to add a zoom in and out buttons, at the moment I press a search button and it takes me to a zoom level of 17, I was wondering what two lines of code I have to write in order to add or take away one from the zoom level each time the button was clicked?

Question 2

I also wish to use pushpin within my application I can set up a simple one set to center at one location, but I would like it to center when a new location is applied and to stay in the same spot instead of when scrolling out it becomes disconnected from its original centered point?

I believe there's a ZoomLevel property that is just a double, you can simple increase/decrease that value on your button click. — Mike Eason

rbrundritt rbrundritt · Accepted Answer · 2015-11-16T17:54:08

Here is a simple navigation bar that provides pan buttons and a zoom slider:

<Grid HorizontalAlignment="Left" VerticalAlignment="Top" Height="290">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="30"/>
        <ColumnDefinition Width="30"/>
        <ColumnDefinition Width="30"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="30"/>
        <RowDefinition Height="30"/>
        <RowDefinition Height="30"/>
        <RowDefinition/>
    </Grid.RowDefinitions>

    <Button Content="&#8657;" Width="25" Height="25" Grid.Column="1" Tag="Up" Click="PanMap_Click"/>
    <Button Content="&#8658;" Width="25" Height="25" Grid.Row="1" Grid.Column="2" Tag="Right" Click="PanMap_Click"/>
    <Button Content="&#8659;" Width="25" Height="25" Grid.Row="2" Grid.Column="1" Tag="Down" Click="PanMap_Click"/>
    <Button Content="&#8656;" Width="25" Height="25" Grid.Row="1" Tag="Left" Click="PanMap_Click"/>

    <Slider Name="ZoomBar" Orientation="Vertical" Height="180" Width="20" Margin="10,10" Grid.ColumnSpan="3" Grid.Row="3"
         HorizontalAlignment="Center" Minimum="1" Maximum="19" SmallChange="1"/>
</Grid>

For the zoom bar I being it to the center property of the map like this:

<m:Map Name="MyMap" ZoomLevel="{Binding Value, ElementName=ZoomBar, Mode=TwoWay}"/>

Here is the code behind for the panning:

private void PanMap_Click(object sender, RoutedEventArgs e)
{
    Button b = sender as Button;
    Point p;

    MyMap.TryLocationToViewportPoint(MyMap.Center, out p);

    if (p != null)
    {
        switch (b.Tag as string)
        {
            case "Up":
                p.Y -= 50;
                break;
            case "Down":
                p.Y += 50;
                break;
            case "Left":
                p.X -= 50;
                break;
            case "Right":
                p.X += 50;
                break;
        }

        Microsoft.Maps.MapControl.WPF.Location l;
        MyMap.TryViewportPointToLocation(p, out l);
        MyMap.SetView(l, MyMap.ZoomLevel);
    }
}

What do you mean with question 2? If you add a pushpin to the map it should stay connected to the coordinate you specified and not the center of the map when you pan as the center of the map will be a different location. Do you simply want to place a control over the map that doesn't move when you pan?

Bing Maps PushPin and Zoomin / Zoom out

1 Answers