Displaying a coordinates location on Bing Maps using Bing Maps SDK

microsoft-gulf-office-dubai-bing-map-aerial
In the previous article, we discussed about how to setup an environment for developing an application using Bing Maps SDK. In this article we will create a simple application which will include a world map displaying the user-defined coordinates. The map will be focusing on those coordinates.

Overall the concept is simple, we will add the reference of Bing Maps SDK in our solution, add it to our XAML, create a location defining the coordinates and add them to the map.

Let us go over this step-by-step. In order to continue with the following steps, we are considering that the Visual Studio solution’s environment is ready for Bing Maps SDK-based applications. If you do not have this environment setup, maybe you want to go through the previous article first before moving on with this article. Here is the link to the article explaining how the environment is setup for Bing Maps SDK development: CLICK HERE

Following are steps to display coordinates in Bing Map using Bing Maps SDK:

  1. Create a new UWP application in Microsoft Visual Studio 2015.
  2. Our first step is to add reference to the solution. To do this, right click References and click Add References as shown below: add-reference
  3. After clicking, it will display list of references available to be added to the application. Under Universal Windows, click on Extensions and then select Bing Maps for C#, C++, or Visual Basic as shown below:add-reference-list
  4. Click OK once it is done and it will add the reference in the References list.
  5. After adding reference, we need to add a Bing Map namespace in XAML page so we may display Map along with its properties in XAML. Double click on Mainpage.xaml (default XAML page which is added to the application). It will load designer automatically and will display the XAML control along with it.
  6. On top of the XAML code, inside the Page tag, you will see the code as shown below.xaml-namespaces
    NOTE: The first line should display your application or solution name instead of App8 as shown above.In the class tag, you will notice a following syntax used:

    xmlns:<VariableName> = “URLDefined”

    This is how we define a new namespace in XAML. For example, to define the local namespace we are using the following code:

    xmlns: local =”using:App8″

    We will now add a new namespace for Bing Maps. Let’s name our variable as bingmap, then our code to be added will be:

      xmlns:bingmap ="using:Bing.Maps"
    
  7. Our final updated code will look like as follows where App8 shows the solution or application name.
      <Page
       x:Class="App8.MainPage"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:local="using:App8"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       xmlns:bingmap ="using:Bing.Maps"
       mc:Ignorable="d">
    
  8. After adding the Bing Map namespace we may now use the Bing Map object inside XAML by using its variable bingmap. Our next step is to add the Bing map in XAML, therefore we will add this code inside our <Grid> tag as shown below:
      <bingmap:Map x:Name="map" Credentials="INSERT_YOUR_BING_MAPS_KEY"/>;
    

    This line will add the map in the application. We gave bingmap name as ‘map‘. We still need to insert the Bing Map’s key to it. You may copy and paste your Bing Map key which was generated from your Bing Maps Dev Center account here and it will work for you.

  9. Once the above step is done, we will go to Maingepage.xaml.cs page and add some code to it.  In constructor, add the following code:
     Location location = new Location(25.103696, 55.163792);
     map.SetView(location, 18.0f);
    

    Line 1: We are creating an object of type location which is passing in the latitude and longitude of the location as arguments which we want to focus at when the map is displayed
    Line 2: We are adding the location by using ‘setView’ and also passing the zoom-level value. In our case, it is 18 times.

    The overall code of your constructor will look like:

    public MainPage()
    {
     this.InitializeComponent();
     Location location = new Location(25.094875, 55.162242);
     map.SetView(location, 18.0f);
    }
    
  10.  Compile the app and run it. You will see the map with the location focused as expected. In our case, we are focusing on Microsoft Gulf, Dubai as shown below:In Road view:microsoft-gulf-office-dubai-bing-map
    In Aerial view:

    microsoft-gulf-office-dubai-bing-map-aerial

I hope this article helps you to understand the basics of how to display the Bing Map after setting up the environment and how to focus on particular co-ordinates or locations.

Enjoy working with Bing Map! :)