Bing Maps in your Windows 8 XAML applications

Today we will talk about Bing Maps and how to include it in XAML applications

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 help you to use and integrate Bing Maps easily in your windows 8 applicaion.

Installing

Installing is simple for Visual Studio.  Download the Bing Maps SDK for Metro style apps (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.

Capture

Capture

When you do this you will also want to add a reference to the Microsoft Visual C++ Runtime Extension at this time.

the Map control is a native control.  Adding the Microsoft Visual C++ Runtime 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.

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:

    <Application.Resources>
        <ResourceDictionary>
           <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Common/StandardStyles.xaml"/>
            </ResourceDictionary.MergedDictionaries>
            <x:String x:Key="BingMapsApiKey">YOUR KEY HERE</x:String>
        </ResourceDictionary>
    </Application.Resources>

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

     <Grid Background="{StaticResource ApplicationPageBackgroundBrush}">
         <bing:Map x:Name="MyMap" Width="640" Height="480" 
             Credentials="{StaticResource BingMapsApiKey}" />
      </Grid>

I’m done and can run my app and get full map interactivity.  Notice the xmlns declaration “using:Bing.Maps”.  Now when I run:

Screenshot (85)

And Then Check for Location in capabilities from package.appxmanifest

Capture

I can quickly add my location and center a push pin to my location

    async protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        Geolocator geo = new Geolocator();
        geo.DesiredAccuracy = PositionAccuracy.Default;
       var currentPosition = await geo.GetGeopositionAsync();
    
       Location loc = new Location() { Latitude = currentPosition.Coordinate.Latitude, 
           Longitude = currentPosition.Coordinate.Longitude };
     
       MyMap.SetView(
          loc, // location
           20, // zoom level
         true); //show animations)
   
   }

And It’s Done , Now you can Develop Applications using Bing Maps SDK for XAML windows 8 C# Apps

cropped-windows1.png

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s