I am working on an app for the Windows Store that requires mapping functionality. As it is a Windows app, it seems logical to use Bing Maps as they also provide an SDK for apps. Currently it is at version 8, but I had a few problems implementing that version so went for version 7 with the hope to upgrade it at some point when I get more traction for the app.

Firstly you need to go to the Bing Maps Developer portal and sign in to request an API key for your project.

Click on the Create Key link and enter some details about the app. For store apps, a key type of Basic should suffice as we are not doing any enterprise level development. Choose Universal Windows app for the type and any URL you have for your in dev app (I use a placeholder page on my website where the app privacy policy etc. are going to go).

Some transactions with the Bing Maps API are billable, but you have to exceed a limit of 50,000 transactions in any 24 hour period, a listing of billable transactions can be found here. The reason I am mentioning this is in case you are offering a free app and a large number of users start to hit the service you could be liable to paying out.

image

While there have a look at the feature set for V7 with the online examples. As these are all HTML and JavaScript based samples, they are also ideal for a WinJS UWP app.

To get the SDK for V7, you need to go to the Visual Studio Marketplace and download the Bing Maps SDK for Windows 8.1 Store apps.

This will give you a VSIX to install into Visual Studio.

Open up Visual Studio and choose New Project >> JavaScript >> Windows >> Universal >> WinJS App

image

This will give you a basic template with enough functionality to test out the mapping API.

Choose the Target versions to support (Build 10586 should suffice)

image

Add a reference to the Bing Maps for JavaScript extension.

image

It will highlight a compatibility warning linking to http://go.microsoft.com/fwlink/?LinkID=309181 as it is really should be used with Windows 8.1 apps.

So now when we expand the References in our app we can see the required files for the mapping functionality we are going to build with.

I like to structure my apps, so that the main entry view (index.html and main.js) do a check on load and change the view depending on screen size/device etc. So I create a home view which has the ready, unload and updateLayout functionality. This home view is then loaded from the main entry view and inserted into a content host element.

 

We now need to add the script references and an element for the map in the home.html file:-

The CSP is important because it defines which urls are safe to load from. The div with the id webview is where our map will go.

Then in the home.js file add this

There you go, our simple map in the app.

image

There is so much more functionality that can ne added to this app such as getting the geolocation of the user and adding pushpins to different locations, but I will leave that for another post.

Happy coding.