Iris Classon
Iris Classon - In Love with Code

Example Windows Store App /WinRT: Adding and using Bing Map

While Window Phone wont be using Bing Maps , but rely on Nokia Maps, Windows Store Apps will be using Bing Maps. Working with the map is fairly easy, but the setup as a few steps that might scare of a few beginner devs. Since I’m working on a cross platform app that uses Bing Maps I’ve made a simple step by step guide on how to add and use the Bing Map in a Windows Store Application using XAML only.

Let’s get started:

1. Greate an account for so you can get a Bing Map Key
Create the Bing Map account here

2. Create a key , set app name and key type

Create an account to create and manage Bing Map keys

Create a new key

3. Download the SDK:
Bing Maps SDK for Metro style apps (RP)

Bing Maps SDK for Metro style apps (RP

4. Add the SDK to your app (Add reference) and change configuration settings for the project
Add also Microsoft Visual C++ Runtime Package
In configuration manager set active solution platform to x86 an debug (ARM and x64 also works)

Add two references to the project, the map and the C++ runtime package

Don’t forget to change in the configuration manager

5. Add the key for the map as a resource, either in a resource dictionary or in the App.xaml
example:
AnXNyW4WcZJ0-tDYsD11a6dMsHH3PHjj0YBPblZCYP4EEbgAbuA1dV7ZjlP_nOPh

Add the Bing Map Key as a string resource

6. Add a reference to the Map api on the page where you want to display the map and set credentials to the Bing Map Key:
xmlns:bing=“using:Bing.Maps”

Add the control

[sourcecode language=“csharp”]
<bing:Map Grid.Row=“1” ZoomLevel=“10” Width=“640” Height=“480” Credentials="{StaticResource BingMapsApiKey}" >
bing:Map.Center
<bing:Location Latitude=“57.6967” Longitude=“11.9869” />
</bing:Map.Center>
bing:Map.Children
<bing:Pushpin x:Name=“test” Background=“Red” >
bing:MapLayer.Position
<bing:Location Latitude=“57.6967” Longitude=“11.9869” />
</bing:MapLayer.Position>
</bing:Pushpin>
</bing:Map.Children>
</bing:Map>
[/sourcecode]

Result:

Bing Maps for Windows Store Apps

To work with bindings simply use {Binding something} for Latitude and Longitude and ZoomLevel and so on. To set a pin in code behind:

  1. Create a Location object and set Latitude and Longitude

  2. Create a MapLayer and a Pushpin

  3. Set the Position of the Maplayer and add the pin by the MapLayer.SetPosition property on the class (not instance)

  4. Add the pushpin to the maplayer instance (_mapLayer.Children.Add(pushpin)

  5. Set the the view of the map and for example zoom level MyMap.SetView(loc, 5);

Comments

Leave a comment below, or by email.
Jack
10/30/2012 2:36:34 AM
I did the above said procedure, but I'm getting a red crossed circle over the maps like when we give invalid credentials. Do you know why is it? 
Iris Classon
10/30/2012 3:01:44 AM
Reply to: Jack
That is very odd, I'm looking at a the working example right now, but no cross. If the key is wrong or credentials are missing then a text overlay on the map should indicate that. How does you XAML look like? 
r aditya
10/31/2012 8:10:25 AM
Hi, Mrs. Iris Classon

I have little problem. In this case i build the application on javaScript windows 8 Grid app. in my project, i use application bar. One of the application bar button. Navigate to bing Maps page. which is i made before..
Bing Maps doesn't appears when i was navigate to bing Maps page(Page Control) not HTML Page.. my code running well.. i guarantee that..
but, when i try build the maps in Blank App.. its running well and work..
I don't know exactly about that..

hope you can help me.

Thanks in advance 
Andrew
12/27/2012 5:49:30 AM
Nice and simple, thanks! 
Mark
1/2/2013 10:48:37 PM
Hi, EX Red headed lady :)

Wow i was surprised, got this link from twitter, was surprised to see who the author was (ex fitness girl headed into stratosphere of popularity)  . Will give it a try but knowing your rep im sure it works fantastically  :) bit more advanced than the "stoopid questions" :)

Regards 
Iris Classon
1/2/2013 11:45:28 PM
Reply to: Mark
Hi Mark!!!

Nice to hear from you again! Hope you had a good Christmas and a good start to the new year :)
LOL, where did the link come from? It should be fairly straight forward to use, if it's WP8 you can use Nokia Maps instead (downside is they don't fully support databindings in their maps).

Let me know if you have any problems/questions etc. :)

cheers! 
Iris Classon
1/2/2013 11:45:40 PM
Reply to: Andrew
Thank you Andrew :) 
José Luis
1/9/2013 10:21:54 PM
How do you change the color of a pushpin from C #? 
Martin Behrens
2/8/2013 4:25:10 PM
Reply to: José Luis
Pushpin pushpin = new Pushpin();
 pushpin.Background = new SolidColorBrush() { Color = Colors.CadetBlue }; 
Alan McBee
2/9/2013 6:57:05 PM
Hi Iris,
This is a well-written post, but I have a question on your last point.
You said, "To work with bindings simply use {Binding something} for Latitude and Longitude and ZoomLevel and so on."
Did you actually get this to work? I have not. I also see, in the documentation, that binding is not supported, which is unfortunate since its a vital part of the MVVM pattern.
http://msdn.microsoft.com/en-us/library/hh846504.aspx
The only workaround I've come across so far involves a bindable wrapper class (http://bindablemaprt.codeplex.com/). So if you got this to work, I'd love to know how.
Thanks! 
Raghavendra
3/25/2013 2:36:08 AM
Reply to: Jack
The user region settings of your computer might be set to one of these:
Argentina
Azerbaijani
China
India
South Korea
Morocco
Pakistan
Singapore
Serbia
Venezuela

Bing Maps is not supported in these regions.
Check for Supported Regions in "Bing Maps for Windows Store Apps" on msdn 
Ricky Brundritt
5/8/2013 6:08:51 AM
For technical issues around the Bing Maps for Windows Store Apps SDK try asking in the forums here: http://social.msdn.microsoft.com/Forums/en-US/bingmapswindows8/threads
Myself and the Bing Maps development team frequently answer questions here. 
Ahmed
12/11/2013 12:24:19 PM
so useful but please can you tell me how can i get my current location ? 
Iris Classon
12/11/2013 12:58:49 PM
Reply to: Ahmed
Like so:
        // Dont use void!
        async void GetLocation()
        {
            Geoposition pos = await new Geolocator().GetGeopositionAsync();
        }
- on the object you can access the position
And dont forget to declare the location use in the app manifest 


Last modified on 2012-10-28

comments powered by Disqus