×

First time here?

You are looking at the most recent posts. You may also want to check out older archives. Please leave a comment, ask a question and consider subscribing to the latest posts via RSS or email. Thank you for visiting!

Today the Bing team announced the release of their WinRT Bing Maps control (BETA) for XAML applications.  First the goods:

If you are familiar with the Silverlight control, it is similar in nature to how you would use it in your XAML Metro style app.  Here’s some helpful tips that are in the docs but just wanted to elevate them because we have a tendency not to read docs :-).

Installing

Installing is simple for Visual Studio.  Download the VSIX file and double-click it.  If you have both Express and Ultimate installed it will prompt you to install it for both installations.  That’s it…you are done.  If you had VS running while you did this, it would be a good idea to restart VS.

Creating a .NET XAML application with maps

Once you restart VS, you can create a new C# Metro style application.  Once you have this, just right click on the project and choose Add Reference and then navigate to the Windows\Extensions section and you will see Bing Maps:

Bing Maps Reference

When you do this you will also want to add a reference to the VCLibs Extension at this time.  Why?  Well, the Map control is a native control.  Adding the VCLibs dependency at this time will add the necessary information in your app’s package manifest noting the dependency and it will install any required package dependencies from the store when your user’s install it.

If you compile your application immediately you will notice an exception during build:

   1: 1>------ Build started: Project: Application17, Configuration: Debug Any CPU ------
   2: 1>C:\Windows\Microsoft.NET\Framework\v4.0.30319\Microsoft.Common.targets(1667,5): error MSB3774: Could not find SDK "Microsoft.VCLibs, Version=11.0".
   3: 1>C:\Windows\Microsoft.NET\Framework\v4.0.30319\Microsoft.Common.targets(1667,5): error MSB3778: "APPX" attributes were found in the SDK manifest file however none of the attributes matched the targeted configuration and architecture and no "APPX" attribute without configuration and architecture could be found. If an appx is required then the project will fail at runtime.
   4: ========== Build: 0 succeeded, 1 failed, 0 up-to-date, 0 skipped ==========

This is because by default the managed applications are “AnyCPU” configuration and the native control doesn’t have that configuration.  Change your app to be either x86 or amd64 and your build will succeed.  This means that yes, you will want to create multiple architecture-specific packages for your app.  The good thing is during package creation, the tools in Visual Studio make this easy for you.

Creating a C++ XAML application with maps

For C++ the step is to just reference the Bing Maps extension SDK and you are done.  C++ projects are always architecture-specific so you don’t have the AnyCPU situation here.

Using the Map control

You’ll need to get set up with an API key, which the getting started docs inform you about.  Once you have that you are ready to use the control.  I’m a fan of putting the API key in my App.xaml as a resource:

   1: <Application.Resources>
   2:     <ResourceDictionary>
   3:         <ResourceDictionary.MergedDictionaries>
   4:             <ResourceDictionary Source="Common/StandardStyles.xaml"/>
   5:         </ResourceDictionary.MergedDictionaries>
   6:         <x:String x:Key="BingMapsApiKey">YOUR KEY HERE</x:String>
   7:     </ResourceDictionary>
   8: </Application.Resources>

And then in my Map control I can just refer to it:

   1: <Page
   2:     x:Class="Application17.BlankPage"
   3:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   4:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   5:     xmlns:local="using:Application17"
   6:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   7:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   8:     xmlns:bing="using:Bing.Maps"
   9:     mc:Ignorable="d">
  10:  
  11:     <Grid Background="{StaticResource ApplicationPageBackgroundBrush}">
  12:         <bing:Map x:Name="MyMap" Width="640" Height="480" 
  13:             Credentials="{StaticResource BingMapsApiKey}" />
  14:     </Grid>
  15: </Page>

Once I have those pieces in place, I’m done and can run my app and get full map interactivity.  Notice the xmlns declaration in my Page with the “using:Bing.Maps” notation.  Now when I run:

Bing Maps

I can quickly add location to my app by setting the capability in the Package.appxmanifest and then wiring up the map to center on my current location…

   1: async protected override void OnNavigatedTo(NavigationEventArgs e)
   2: {
   3:     Geolocator geo = new Geolocator();
   4:     geo.DesiredAccuracy = PositionAccuracy.Default;
   5:     var currentPosition = await geo.GetGeopositionAsync();
   6:  
   7:     Location loc = new Location() { Latitude = currentPosition.Coordinate.Latitude, 
   8:         Longitude = currentPosition.Coordinate.Longitude };
   9:  
  10:     MyMap.SetView(
  11:         loc, // location
  12:         13, // zoom level
  13:         true); //show animations)
  14:  
  15: }

I’m excited about what the Bing team has done here and you should go grab it, read the docs and start incorporating location visualization into your Metro style XAML apps today!

Hope this helps!


This work is licensed under a Creative Commons Attribution By license.


3/7/2012 2:53 AM | # re: Use Bing Maps in your Windows 8 XAML applications
Thanks Tim for this article,

Sorry, i have a question :)
It'is possible to Calculate and show a route using Bing Maps Services on Metro Style App ?
3/7/2012 5:20 AM | # re: Use Bing Maps in your Windows 8 XAML applications
@yaa3djaa: yes, it seems you can, see details here -->

msdn.microsoft.com/en-us/library/gg427607.aspx
4/17/2012 8:18 AM | # re: Use Bing Maps in your Windows 8 XAML applications
Thanks for the article, Tim!
I sumbled over an issue when using the Maps SDK in VS11 for a Metro based app: If including as adviced the VCLibs, I get the following error on such lines of code:

Me.mainGrid.ColumnDefinitions(1).Width = New GridLength(2, GridUnitType.Star)
Error: 'GridLength' is ambiguous in the namespace 'Windows.UI.Xaml'.

When removing the VCLibs reference, the error doesn't show up. (and I probably get in Trouble when deploying the solution)

Any idea why this happens?
4/24/2012 12:23 AM | # re: Use Bing Maps in your Windows 8 XAML applications
Here's the answer to my above question re. conflict with VCLibs:
social.msdn.microsoft.com/...
6/5/2012 11:40 AM | # re: Use Bing Maps in your Windows 8 XAML applications
Hi Tim,

when I try to add the Bing Map Control to my C# Metro style app I get the following Warning:

"Reference to type 'Windows.UI.Xaml.Input.PointerEventArgs' claims it is defined in 'c:\Program Files (x86)\Windows Kits\8.0\References\CommonConfiguration\Neutral\Windows.winmd', but it could not be found c:\Users\Christian\AppData\Local\Microsoft SDKs\Windows\v8.0\ExtensionSDKs\Bing.Maps.Xaml\1.0\references\commonconfiguration\neutral\Bing.Maps.winmd

When I run the application it crashes when I try to create a new Map().

--> The specified procedure could not be found. (Exception from HRESULT: 0x8007007F)

Do you know what could cause the Problem?

Greetings
Christian

6/6/2012 7:21 AM | # re: Use Bing Maps in your Windows 8 XAML applications
Hi Christian,

Bing Maps is not working with Windows 8 RP and Visual Studio 2012 RC.
The SDK should be updated soon.
6/7/2012 12:07 PM | # re: Use Bing Maps in your Windows 8 XAML applications
Christian,

The Bing Maps SDK update is now available here: visualstudiogallery.msdn.microsoft.com
I hope it fixes your problem.
7/5/2012 8:01 AM | # re: Use Bing Maps in your Windows 8 XAML applications
Is there a way to calculate and show a route for C#? The example above is for javascript.
8/8/2012 4:47 AM | # re: Use Bing Maps in your Windows 8 XAML applications
hi every1 :)

getting the following error , cannot find any using directive to solve the problem ...... pls help

The type or namespace name 'Location' could not be found are you missing a using directive or an assembly reference?

thanks :)
8/27/2012 12:01 AM | # re: Use Bing Maps in your Windows 8 XAML applications
How do I make a custom infobox? I want an infobox with an image, and text. I would like to databind them. I tried a lot of examples in the internet but it all failed. Thanks!
9/6/2012 1:14 AM | # re: Use Bing Maps in your Windows 8 XAML applications
How to add custom zoom level in windows 8 application using bing maps? I want to set the zoom level beyond from 1 to 25. Is this possible ?
9/6/2012 11:52 PM | # re: Use Bing Maps in your Windows 8 XAML applications
I think zoom level should be strictly between 1 and 20
9/11/2012 2:03 AM | # re: Use Bing Maps in your Windows 8 XAML applications
But, I have seem couple of examples to increase the zoom level till 25. But all those examples are built on bing map Silverlight control, don't find one for windows 8 metro..
10/3/2012 12:21 AM | # re: Use Bing Maps in your Windows 8 XAML applications
how to zoom in to particular location in bing maps in xaml
1/12/2013 12:31 AM | # re: Use Bing Maps in your Windows 8 XAML applications
When i tried to download the Metro Bing Sdk from the following link: timheuer.com/.../bing-maps-for-winrt-xaml.aspx it showed that the the item is currently not published.
So please help me out to get the file or provide alternate links.
9/2/2013 4:30 AM | # re: Use Bing Maps in your Windows 8 XAML applications
Hello I'm trying draw route in the BingMap in my Windows 8 store application. I'm compiling it for x86 and trying to use the fallowing code for getting the directions.

Waypoint startWaypoint = new Waypoint(myLoc);
Waypoint endWaypoint = new Waypoint(destLoc);
WaypointCollection waypoints = new Bing.Maps.Directions.WaypointCollection();
waypoints.Add(startWaypoint);
waypoints.Add(endWaypoint);
DirectionsManager directionsManager = myMap.DirectionsManager;
directionsManager.Waypoints = waypoints;
//directionsManager.RequestOptions.RouteMode = routeMode;
// Calculate route directions
RouteResponse response = await directionsManager.CalculateDirectionsAsync();
// Display the route on the map
directionsManager.ShowRoutePath(response.Routes[0]);

At the .CalculateDirectionsAsync(); method it gives the fallowing error from C++.

First-chance exception at 0x75264B32 in GEOMAP.exe: Microsoft C++ exception: Platform::InvalidArgumentException ^ at memory location 0x0596F1E8. HRESULT:0x80070057

If there is a handler for this exception, the program may be safely continued.

Any help will be appreciated . thanks.
12/26/2013 5:07 AM | # re: Use Bing Maps in your Windows 8 XAML applications
Hi Tim,
I want to ask a question. If I want to copy .dll file in my app local folder for reference from where I can find its .dll file?

Thanks

 
Please add 7 and 2 and type the answer here:

DISCLAIMER:

The opinions/content expressed on this blog are provided "ASIS" with no warranties and are my own personal opinions/content (unless otherwise noted) and do not represent my employer's view in any way.