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

Join the conversation

24 comments
  1. alesha911

    Where can we download the extended modes DLL?

  2. brprakash

    The Extended modes don't seem to work with Silverlight 4. Is there a newer version targeting silverlight 4 ?

  3. Michael Aaron Griffey

    Let me start by saying I am using a Dell Hybrid to do this testing. It has an Intel Core 2 Duo T8100 @ 2.10GHz 2.10GHz; 4GB of RAM; Windows Vista SP2; and Silverlight 3.0.50106.0. It has plenty of hoursepower to get the job done.

    Memory (RAM)

    Browsing in Streetside or Birdseye mode for only a few minutes runs the memory into the 500MB range. After browsing in Streetside for 20 minutes, IE8 was using over 1GB of RAM. This problem was duplicated using IE 8.0.6001.18882 (compatibility mode on and off), Firefox 3.5.7, Firefox 3.6, Chrome 4.0.249.89 (38071), and Safari 4.0.4 browsers. This behavior can be seen using the consumer site (bing.com/maps) and sites built using the Bing Maps Silverlight Control Extended Modes Beta (krkinnan.members.winisp.net/…/BingMapsStreetsideSample01.html). I imagine there are currently no workarounds as the consumer site is having the same issues. What is abundantly worse is that it doesn’t seem to even use the cache. I took a trip (in San Fancisco, CA, USA) up Polk Street from Grove and Polk to Geary St and Polk then went back and forth between these points 15 times. Even though I had been down Polk 14 times, the 15th trip was still racking up the cache. I don’t understand why you would store it, if you aren’t going to use it. A drive around town in Google Streetview keeps the memory usage around 340MB. Is there a way to dump the cache of images? This problem is in my opinion, a fix it or scrap it. I have seen some memory hogs/leaks in my days but this one takes the cake and eats it to.

    Processor

    I have an idle CPU usage between 0 and 7 %. Browsing Bing.com/maps in any view (Streetside, Birdseye, Areal, and yes even Road) my CPU usage spikes near 99% with minimal movement. A 60 second average of 43% usage by IE, FF, Chrome, and Safari (independently tested). Though this is in tune with the competition for Streetside/Streetview, Google Road view is far less processor hungry.

    We would never be interested in a product with these issues and trust there will be some resolve. Though it seems, the Microsoft Bing Maps Team could take a few cues from the Microsoft Windows 7 Team when it comes to responding to issues brought up by the user community via the Connect site, especially those who are enterprise licensees.

    On a side note, Chris, you have been extremely helpful and I enjoy your blog. :)

  4. hotels

    Very interesting feature.

  5. Chris Pendleton

    @jpigott – yes, this is a bug that will be fixed before it comes out of beta.

    @michael – this is also something we're working on.

    CP

  6. Michael Aaron Griffey

    I understand that the extendedmodes is still in beta. Currently if you go to Streetside mode and imagery is not available there, it will appear as a blue/gray screen. The beta does not have events, properties or methods to detect if Streetside is available for a specific location. This would be a nice addition prior to going live.

    More information including code can be found at:

    sharepoint.connect.microsoft.com/…/Flat.aspx

  7. jpigott

    I am seeing the same results with pushpins when mapping with the BirdsEye view, about a block off.

  8. vwrssamboy

    Since having made the very first POC I was really excited about getting this thing plugged into my Application, especially that cool new Streetside thing, But I have spent hours upon hours trying to find a solution to this problem.

    Am trying to access the map object in javascript but as the samples of Bing Map Silverlight Controls do not apply to the Extended Mode library (Have observed it through a simple mapControl.Content.map returning 'undefined', yet mapControl.Content has an object we cannot take any properties of in firebug).

    And that if I try to debug javascript into a Silverlight WebSite the debugger; statement returns a "Unable to attach to the crashing process. A debugger is already attached.". for which I was using firebug in the first place.

    It would be nice to know if these are two different problems with a certain dependancy and solving one would help the cause of the other.

    There isn't any help in the Extended Mode Beta documentation either regarding Javascript so please help guys. I need to get this done quickly. Till then I'll keep on searching.

  9. Chris Pendleton

    @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

  10. boltonuk

    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.

  11. Chris Pendleton

    @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.

  12. boltonuk

    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.

  13. redwolvx

    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

  14. Sam Minnella

    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?

  15. Chris Pendleton

    @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

  16. AG Property Cyprus

    WOW this is really cool

  17. AG Property Cyprus

    Really liking this view… very nice

  18. abhibharti

    Bird eye view is really cool.

  19. ivanee

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

  20. Acai Berry

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

  21. Colin Blair

    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.

  22. redwolvx

    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

Comments are closed.