Virtual Developer Workshop: Containerized Development with Docker
If you want to change the default view rendered, you can set the mode to aerial instead of the default road. For our application we will have a default of aerial mode, so that we can see how the switch to road mode works.
Change your XAML file to contain the highlighted section.
<my:Map Height="375" HorizontalAlignment="Left" Name="map1" VerticalAlignment="Top" Width="456" CredentialsProvider="AtZjYxf45FIyRhN9hhrWbSCYzT8AjyoEbHQq8PNVr9iiO6dgZXJEw-ZFS7NjCVww" Mode="Aerial" />
Let us add the functionality to switch between Aerial Mode and Road Mode on the maps.
Now, go ahead and add two buttons on the
MainPage. Rename the content of the buttons as Aerial and Road.
Now on the Road Button, double click the button so that the event handler for click is created. In the event handler, add the following code:
private void buttonRoad_Click(object sender, RoutedEventArgs e)
Microsoft.Phone.Controls.Maps.Core.MapMode m = new Microsoft.Phone.Controls.Maps.RoadMode();
Repeat the same with the Aerial button, with the following code
private void buttonAerial_Click(object sender, RoutedEventArgs e)
Microsoft.Phone.Controls.Maps.Core.MapMode m = new Microsoft.Phone.Controls.Maps.AerialMode();
Note that the only difference in the above code snippets is the
MapMode; in one, it is
RoadMode and in the other it is
AerialMode. Now, to fancy our application, let us add a PushPin For that, we need to create an instance of the Pushpin class.
Let us start by adding a button with content "Add Push Pin" which will create a pushpin on the center of the currently visible map area.
Double click the button to wire up the Click Event handler. Add the following code in the button's click Event Handler.
private void buttonPushPin_Click(object sender, RoutedEventArgs e)
Microsoft.Phone.Controls.Maps.MapLayer pushPinLayer = new Microsoft.Phone.Controls.Maps.MapLayer();
TextBlock textBlock = new TextBlock();
textBlock.Text = "DemoPushpin";
Grid grid = new Grid();
Microsoft.Phone.Controls.Maps.Pushpin p = new Microsoft.Phone.Controls.Maps.Pushpin();
p.Location = map1.Center;
pushPinLayer.AddChild(p, map1.Center, Microsoft.Phone.Controls.Maps.PositionOrigin.Center);
pushPinLayer.AddChild(grid, map1.Center, Microsoft.Phone.Controls.Maps.PositionOrigin.Center);
Now if you run this application, you can see that by default the world map is visible in the Aerial Mode. Now you can zoom to a place of your choice and click on the Aerial and Road buttons to switch the view between Aerial view and Road View.
To add a push pin, click the "Add Push Pin" button which will add a push pin in the center of the currently visible area. To ensure that the pushpin has some context, we will add a label with the pin called "
If you have look at the complete code listing, a sample project is available for download as an attachment to this article.
In this article, we saw the process to get started with creating applications using Bing Map control. Hopefully you would have found the information useful and will be able to create some great mapping applications.