Displaying a Pushpin on specified coordinate location on Bing Maps using Bing Maps SDK

bing-map-with-pushpin

In the previous article, we discussed about how to display a specific coordinate location on Bing Maps using Bing Maps SDK. In this article we will create simple application which will display a pushpin at the user-defined coordinates. The map will be focusing on those coordinates as well.

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 and pushpin object 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);
     Pushpin pin = new Pushpin();
     pin.Background = new SolidColorBrush() { Color = Colors.Red };
     map.Children.Add(pin);
     MapLayer.SetPosition(pin, location);
     map.SetView(location, 19.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: Created a Pushpin object and named the variable ‘pin’
    Line 3: Added the color to the background of the Pushpin object
    Line 4: Added the pin to the map
    Line 5: Set the position of the pin on the MapLayer. Currently it is set to the same co-ordinates which were defined for the location object created in Line 1
    Line 6: 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);
     Pushpin pin = new Pushpin();
     pin.Background = new SolidColorBrush() { Color = Colors.Red };
     map.Children.Add(pin);
     MapLayer.SetPosition(pin, location);
     map.SetView(location, 19.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:

    bing-map-with-pushpin
    In Aerial view:

    bing-map-aerial-with-pushpin

I hope this article helps you to understand how to add a Pushpin to the map and display it on specific coordinates in Bing Maps.

Enjoy working with Bing Map! :)