Adding Streetside and Enhanced Birds Eye To Your Applications

Well, it didn’t take long for us to add these features to the already robust set of APIs in the Bing Maps Platform, now did it? In case you’ve been in some analog state without Internet access you should first read, “Bing Maps Adds Streetside, Enhanced Bird’s Eye, Photosynth and More.” Starting today, you can download the required DLLs for adding Bing Maps Streetside(TM) and Enhanced Bird’s Eye to your applications. Let’s just get right to it, shall we?

First thing you need to do is download the new DLLs from Microsoft Connect. You will actually download a .MSI (Microsoft Installer) which will install the Bing Maps Silverlight Control Extended Modes Beta SDK (wow, that’s a mouthful) and also drop the Microsoft.Maps.MapControl.ExtendedModes.dll onto your hard drive typically at [Program Files (x86)]Bing Maps Silverlight Control Extended ModesBetaLibraries.

Second, there are new versions of Microsoft.Maps.MapControl.dll and Microsoft.Maps.MapControl.Common.dll. You will need to download this .MSI as well; however!, you will also need to uninstall the current version (yes, backwards compatible). The version you have is 1.0.0.0. You will now be using 1.0.1.0. This is very important as your application will not work if you aren’t using the new version of the DLL.

Now, add them to your Silverlight project in the References folder.

In your XAML file (I’m using the default template, MainPage.xaml) you’ll want to add namespace and assembly references to Microsoft.Maps.MapControl.dll. Next, we’ll add a Bing Silverlight Map to your web application; and, we’ll configure it a bit to center over a place where Streetside is available. Your code should look something like this:

<UserControl x:Class=”SilverlightApplication1.MainPage”
    xmlns=”
http://schemas.microsoft.com/winfx/2006/xaml/presentation”
    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
    xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″
    xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″
    xmlns:m=”clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl”>

    <Grid x:Name=”LayoutRoot” Background=”White”>
        <m:Map x:Name=”myMap” Center=”25.858531, -80.119744″ CredentialsProvider=”[BINGMAPSKEY]” ZoomLevel=”19″ Mode=”AerialWithLabels”></m:Map>
    </Grid>
</UserControl>

Notice the [BINGMAPSKEY]. You need a key to authenticate against the Bing Maps Silverlight Control. To get one, just got to BingMapsPortal.com and get one.

There are two ways to add Enhanced Birds Eye and Streetside to your applications – (1) by inserting them into the navigation; and/or, (2) using the map mode extension classes built into the map control.

Adding Streetside and Enhanced Birds Eye to the Navigation Control

If you simply want to add Enhanced Birds Eye and Streetside to the default navigation bar (it shows up between Aerial and the [<<] button to close the navigation), you can do this with each map mode in a single line of code (okay, maybe 2). First, in your code behind (MainPage.xaml.cs) you’ll want to reference to ExtendedModes.dll in a using declaration. The follow code sample shows you how to insert both Enhanced Bird’s Eye and Streetside into the navigation bar:

using System;
using System.Windows.Controls;
using Microsoft.Maps.MapControl.ExtendedModes;
using Microsoft.Maps.MapControl.Core;

namespace SilverlightApplication1
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();

            //Add Bird’s Eye to Navigation
            BirdseyeMode.AddModeToNavigationBar(myMap);

            //Add Streetside to Navigation
            StreetsideMode.AddModeToNavigationBar(myMap);
        }
    }
}

Adding Streetside and Enhanced Birds Eye to Custom Controls

For those of you who want to control your users destiny, we also have methods for you to change the map mode with button clicks, onload events, etc. So, in order to change the map mode to Enhanced Birds Eye and/or Streetside you will instantiate the map modes using the Map.Mode class. Also note, the other map methods will still work with this, so you can also re-center or zoom the map in the new mode (as illustrated below). You’ll need to add an additional using declaration for the Core control if you choose to do so.

The following loads Enhanced Birds Eye when the map loads:

using System;
using System.Windows.Controls;
using Microsoft.Maps.MapControl.ExtendedModes;
using Microsoft.Maps.MapControl.Core;

namespace SilverlightApplication1
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {

            InitializeComponent();
            myMap.Mode = new BirdseyeMode();
            myMap.Mode.Center = new Microsoft.Maps.MapControl.Location(25.859768, -80.119764);
            myMap.Mode.ZoomLevel = 17;

        }
    }
}

The following loads Streetside when the map loads:

using System;
using System.Windows.Controls;
using Microsoft.Maps.MapControl.ExtendedModes;
using Microsoft.Maps.MapControl.Core;

namespace SilverlightApplication1
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {

            InitializeComponent();
            myMap.Mode.Center = new Microsoft.Maps.MapControl.Location(47.615594, -122.20136);
            myMap.Mode = new StreetsideMode();
            myMap.Heading = 20.3;
            myMap.Pitch = 12.3;

        }
    }
}

Notice, I used the heading and pitch properties. Heading is effectively the compass direction and pitch is the angle at which you’re viewing. Here are the official definitions: Heading is the compass direction, expressed as a double. A value of 0 is true north, and a value of 180 is true south. Values less than 0 and greater than 360 are valid and are calculated as compass directions. The pitch direction, expressed as a double. A value of 0 is level and a value of -90 is straight down. Values less than -90 or greater than 0 are ignored, and the pitch is set to -90.

So, there you go. Now, go download the new DLLs from Microsoft Connect and make your applications great(er). And, don’t forget about the Bing Maps Platform Web Cast – Fall 2009, Release today @ 10AM PST.

CP – Follow me on Twitter @ChrisPendleton

Share on twitter Share on facebook Share on linkedin Share on linkedin