piotrwalat.net

Getting started with Bing Maps SDK for Windows Store apps

5 comments

Bing Maps SDK for Windows Store enables Windows 8 developers to include a rich mapping experience in C#, C++, VB.NET and JavaScript applications. After a couple of beta releases, the SDK finally reached RTM status that allows for Windows Store submissions. This is an introductory post that is meant to investigate basic functionality provided in Bing Maps components for C#/XAML Windows Store apps.

In particular I will look into following topics:

  • using  Bing Maps SDK for Windows Store apps in Visual Studio 2012 projects,
  • zooming and centering map on user’s current location using geolocation service,
  • adding pushpins,
  • drawing polygons,
  • adding other UIElements to the map.

Prerequisites

First of all we will need to get Bing Maps SDK for Windows Store apps which is located here. After installing the extension Bing Maps SDK will be available in Windows Store apps in Reference Manager.

Make sure to select Microsoft Visual C++ Runtime Package as it required by maps components. Because Bing Maps native implementation, we need to change Active solution configuration to either ARM, x86 or x64. Otherwise the project will not compile.

There is one last step required to start using the components – you will need a Bing Maps Key for Windows Store appsThere are three types of keys available – Trial, Basic and Enterprise, you can learn about differences between them here. I am using a Trial key, but when writing real world Windows 8 apps you are most likely to use Basic.

In order to generate the key go to https://www.bingmapsportal.com/, login with your Live ID (if you dont have it you will need to create one) and click on Create or view keys under My Account section.

Now we are good to go – let’s create a new Windows Store app (I am using Blank App template).

Instead of hardcoding the key in pages, it is usually better to have it defined in a resource dictionary (eg. in App.xaml).

Centering and zooming in on current location

Let’s start with the basics and show how to center and zoom the map based on current location. Before running this example make sure that Location capability is enabled in Package.appxmanifest.

Using geolocation features of Windows 8 is really straightforward and is further simplified by async/await pattern. After the page gets navigated to, map control should be automatically centered on current location.

Adding pushpins

Pushpins can be added to the map either in XAML or imperatively in code-behind.

Please note that in order to define pushpin position on the map we are setting MapLayer.Position attached property.

Default pushpin template should look like this:

In order to add some interactivity to the pushpin, we can handle Tapped event like this:

Drawing polygons

Bing Maps groups shapes (such as polygons and polylines) into layers represented by MapShapeLayer objects. Polygons are drawn using MapPolygon objects with vertices specified in Locations property. Following example creates a semi-transparent overlay for New Mexico state.

And here is the result:

Adding other UIElements to the map

Map.Children property is actually a MapUIElementCollection object, which means we can add any UIElement to it. This opens a whole new set of possibilities, especially if you think of all the neat features XAML has to offer. To position elements we need to set MapLayer.Position attached property, just like in pushpin example (Pushpin is a UIElement as well). Here is an example that uses Image control.

This will add a rain icon over Seattle. No pun intended.

Hope you will find this post helpful!

Written by Piotr Walat

October 8th, 2012 at 12:00 am

  • Pingback: Dew Drop – October 8, 2012 (#1,417) | Alvin Ashcraft's Morning Dew

  • Pingback: Windows 8 Developer Links – 2012-10-09 | Dan Rigby

  • Farhan Ghumra

    Driving route path direction with Bing maps, http://www.codeproject.com/Articles/461691/Driving-route-path-direction-with-Bing-maps-in-Csh

  • http://www.facebook.com/madhish Madhish Parikh

    Dear Sir,
    Actually i am developing a Windows app for Bing Maps so i want help in searching a specific location by its Name in Bing Maps.
    So i request you to help me out by posting a tutorial or some kind of stuff related to it on your blog.
    Please do the needful as early as possible.

  • Lakshmi Visali

    Dear Sir,

    I want to know the near – by locations like popular malls, bus stops, stations, etc with in a range of 50 kms by detecting the location using bing maps. Thanks in advance.

    Regards,

    J. Adilakshmi Visali