Skip to main content

Windows 8 RTM Using bing map control. How to use the map control in a metro (modern) style App



This is a briefing article on how to start using Bing map control using XAML & C#, to begin with you must first follow a set of instruction to get a license key for using Bing maps.
Lets talk first about bing maps and the map control

Bing map control is a part of the Bing SDK for windows 8 modern style apps

About the SDK as Microsoft says :
Bing Maps SDK for Metro style apps (RTM Beta) combines the power of Windows 8 and Bing Maps™ to provide an enhanced mapping experience for modern style apps. Developers can use this Bing Maps control to incorporate the latest road maps and aerial views into a Windows 8 Metro style app. This SDK includes controls for apps built using JavaScript, as well as apps built using C#, C++, and Visual Basic, and requires a Bing Maps Key for a Windows Metro style app. (If you have an existing “Metro style apps (BETA)” key, it will still work until the evaluation period expires.)

Now lets get started and here is the prerequisites that you need to have to check out this tutorial. You will need to have Windows 8 and visual studio 2012 installed.

lets get the SDK
Here is the link for the latest bind sdk
http://visualstudiogallery.msdn.microsoft.com/bb764f67-6b2c-4e14-b2d3-17477ae1eaca

In order to use the SDK you must obtain a development key
So to obtain the developer key you need to setup an account on this website https://www.bingmapsportal.com/
Register and get the key and u r up and running now lets start the coding

Get started with the code
Open Visual studio and click new project and set it to windows app and then click ok

In order to add the map control we need to add certain reference

Right click on the project and click add reference then choose extensions tab and choose the Bing maps and 
Microsoft runtime check the image below

Now If you build an error will occur that error occurs because the default build action is any cpu  unfortunately the map control and the Bing SDK does not have the value so if you set it to 86x or 64x it will be fine, to do that click on build and then build configuration and choose the cpu

Open the main page from the solution explorer
We need to save the key, I am a fan of using the XAML Recourses to hold strings like that so I am gonna use It as below in the page resources
  <Page.Resources>  
     <ResourceDictionary>  
       <ResourceDictionary.MergedDictionaries>  
         <ResourceDictionary Source="Common/StandardStyles.xaml"/>  
       </ResourceDictionary.MergedDictionaries>  
       <x:String x:Key="BingMapsApiKey">AjmHAaDn2wRb336KlkksJ63ybHkThkl0_too3f-sfxm3zMosuPNJ6WkPuvhZ6oNu</x:String>  
     </ResourceDictionary>  
   </Page.Resources>


I have experienced this many times but it seem you have to restart the project to see map control so I would restart the visual studio if the following procedures did not pass
Lets and alias to the Bing dll and to use it in the page

 <Page  
   x:Class="TyingBing.MainPage"  
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
   xmlns:local="using:TyingBing"  
   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
   xmlns:bm="using:Bing.Maps"  
   mc:Ignorable="d">
Add the Bing map control in our page check the code below “now that I use the static resource as the credentials property value”
 <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">  
     <bm:Map x:Name="MyMap" Width="640" Height="480"   
        Credentials="{StaticResource BingMapsApiKey}" />  
   </Grid>
Now hit F5 and then watch the map working……… have fun

There shall be another posting containing how how to add push pin and multiple push pins
Thanks for reading 


Labels:

Comments

  1. Blogger11 October 2016 at 11:19

    If you are looking for a solid contextual ad company, I recommend that you check out Chitika.

    ReplyDelete

Post a Comment

Popular posts from this blog

Windows Phone 8 - Application bar command binding MVVM

This is a short post in which i will explain how on Windows phone 8 to bind the application bar button or menu item, first this is only a fix for the  BindableApplicationbar  which supports windows phone 7 only, i just made it support windows 8 no features added or anything. i have uploaded the dll file here so it can be accessible easily here is the link to download http://sdrv.ms/RApUal now that you got the link lets check how we gonna use it you can refer to BinableApplicationbar  or check out the code here that i actually used in my app and i already read it there !  Add a reference to the BindableApplicationBar library here is the link again  http://sdrv.ms/RApUal Add XML namespace declaration in your page's XAML: xmlns : bar ="clr-namespace:BindableApplicationBar;assembly=BindableApplicationBar" Set Bindable.ApplicationBar property on your page code as in the snippet below: < phone : PhoneApplicationPage >  ...
6 comments
Read more

Windows 8 – XAML/C# how to Add multi push pins to map control Bing maps

Greetings readers I promised you in my previous post that I am gonna go a little bit deeper in the Bing map control and I will should more advanced scenarios and one is push pins, Basically I am going to tell you how you can add push pin to your map and also how to dynamically populate those push pins using binding Refer to my previous article Using bing maps part one  for more details cause I am going build on it so if you ever feel that you don’t understand something just click the link and spend a few minutes reading it, I promise you it will prove worthy. First lets add a normal push pin to our map  < Grid Background = " {StaticResource ApplicationPageBackgroundThemeBrush} " > < bm : Map x:Name = " MyMap " Width = " 640 " Height = " 480 " Credentials = " {StaticResource BingMapsApiKey} " > < bm : Map.Children > < bm : Pushpin x:Name = ...
6 comments
Read more

Xamarin Forms: XAML Creating Custom Controls The MVVM Way

Intro For a growing UI page there always comes a need to create sub views that can be used inside a bigger view, and for that we need custom controls, which are controls that are derived either from a layout or a simple view which is the basic control for almost any UI component in Xamarin forms, and therefore for a start i will use that as an example. And in such example we will create a custom control with a set of bindable properties and explain how they work, also how to add an event that can also be bound to Commands Lets Create the control  I have just went ahead and created a custom control that inherits from Xamarin.Forms.View and have some properties such color and checked all properties to be bound to by the ViewModel serving as the datacontext of the this control. here is the code below using System; using Xamarin.Forms; namespace UserControls { public class CustomView : View { public Color Color { get ; s...
Post a Comment
Read more