Bing blogs

This is a place devoted to giving you deeper insight
into the news, trends, people and technology behind Bing.

Maps Blog

December
10

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 Modes\Beta\Libraries\.

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

Comments

  • Hi Chris,

    The version i had installed before installing the 1.0.1.0 update was version 1.0.10.500 (this is the version released at PDC09)

    This seems like a version number downgrade

    Duncan

  • Does the Streetside viewer support adding content? I have full coverage pictures of the highways in Illinois that I would love to get inside the Streetside viewer.

  • This is interesting, the bird eye view function definitely will enhance photo performance.

  • I have a solution where I add Pushpins to a MapLayer, can they be shown in Street view as well?

  • Bird eye view is really cool.

  • Really liking this view... very nice

  • WOW this is really cool

  • @Duncan - actually, it's the assembly version. Pull it into VS and you'll see it in the properties.

    @Colin - at this point, you can only use our imagery.

    CP

  • My app uses the new silverlight control. I plot a ton of pushpins on the aerial view with no problem. When I switch to the new birds eye view my points are rendered very inacuratly. Sometimes a full block off. Whats going on? Is this as good as it is going to get? It is going to be way too embarasing to leave this birdseye feature on, users will blame my programming. Where can I submit bug reports?

  • Chris,

    Is there any way to use Matrix transformations on a map tile layer to create a "perspective" type view without the tiles being clipped to what would be visible if you were vieing straight down?

    i.e. remove the clipping from the map control for tile layers and change to clip to a larger area.

    Similar to the Birdseye view but without having extra imagery.

    Cheers

    Duncan

  • why does it not just work out of the box like Google Streetview does ?

    I am not a programmer and just can't be fazed with messing about to get an addon.

  • @Sam - can you share your application - this should not be happening.

    @Duncan - Not sure I totally understand this, but the the tiles in perspective view are quite different from the tiles of ortho (aerial) view, thus the difference.

    @BoltonUK - Google Street View requires Flash programming and is quite limited in what you can do. Bing Maps Streetside is a real API so you can actually do something with SS, not just show a picture.

  • however, as a Non Geek I can use Street View without haveing to do what to me is programming. I accept that it might be superior technically but that is of no use to the average potential user, why can I not just download an add on and get on with it.

  • Can you turn on the extended menu buttons when using script to load a basic map?  (ref: msdn.microsoft.com/.../ee681892.aspx)

  • @marlincreek - not without hacking the CSS. There's currently no scriptable interface into the extended map modes and additional navigation elements can really only be done by hacking the CSS (not recommended) or creating your own fancy navigation toolbar (highly recommended).

    CP