Add Bing Maps Streetside to your Web Application by Mingfei Yan

The local Singapore street view map will be provided by Microsoft soon on Bing Maps. It will be a good time for you to think of plugging Streetside view to your webpage or application to enhance your customer experience. If you have read Chris Pendleton’s Bing Maps Blog, you may find out some problems with the initial installation part. This article provides more details on installations and future developments.

Firstly, there are three things you need to install as references to run Bing Maps on Silverlight.

  1. Download and install: Bing Maps Silverlight Control version 1.0.1.0 (includes Microsoft.Maps.MapControl.dll & Microsoft.Maps.MapControl.Common.dll with file versions of 1.0.12.300)
  2. Install Bing Maps Silverlight Control Extended Modes Beta:
    1. Go to  https://connect.microsoft.com/directory/
    2. Select View Connect products currently not accepting feedback on the left hand side(Showed in the red square below) and select Bing Maps Silverlight Control Extended Modes Beta and click on apply button on the right
    3. Select Download the code and download BingMapsSilverlightControlExtendedModesBetaInstaller.msi
  3. Install Silverlight Developer runtime at: http://go.microsoft.com/fwlink/?LinkId=146060

After downloading all these files, open Microsoft Visual Studio.

  • Create a new project. Under Visual C#, choose Silverlight and Silverlight Application.

  • Open your project and right-click on the reference folder in your project and click on add reference. The files are located at Program Files (x86)]Bing Maps Silverlight Control Extended ModesBetaLibraries and Program Files (x86)Bing Maps Silverlight ControlV1Libraries.  Import all the .dll files inside these two folders as references.

  • Open MainPage.xaml. This is the code that you can generate the front end. <m:Map> is for displaying the map canvas. You need to go to bingmapsportal.com to get one by registration. You will be asked to privide the web app address. A localhost address is fine.
[cc lang='xml' ]


    
        
        
    

[/cc]
  1. Open Mainpage.xaml.cs file. Bing enginge shows the map according to the <latitude, longtitude> you gave, showed as below: bingMap.Mode.Center. bingMap.Mode= new StreetsideMode() decides that you want to display the map in a street view. For displaying maps in Bird Eye View is: bingMap.Mode = new BirdseyeMode()
[cc lang='csharp' ]
using System;
using System.Windows.Controls;
using Microsoft.Maps.MapControl.ExtendedModes;
using Microsoft.Maps.MapControl.Core;

namespace MapWebApp
{
   public partial class MainPage : UserControl
   {
      public MainPage()
      {
         InitializeComponent();
         bingMap.Mode.Center = new Microsoft.Maps.MapControl.Location(40.44439, -79.9416056);
         bingMap.Mode = new StreetsideMode();
         bingMap.Pitch = 20;
      }
   }
}[/cc]
  • Run the project and you will be able to see the street view of your location. Finally, the street view map is showed on your page! Now, customers could get a detailed view on your business location.

Related Posts

5 Responses to “Add Bing Maps Streetside to your Web Application”

  1. Avatar

    Kevin Chia

    ah.. pittsburgh

    Reply
  2. Avatar

    Mingfeiy

    you recognize? 5032 forbes ave comes into my mind immediate when I wanted to search for a place.

    Reply
  3. Avatar

    Jonathan Wong

    Let me guess… Somewhere in Carnegie Mellon?

    Reply
  4. Avatar

    MingfeiYan

    ya…somewhere we walked by everyday…

    Reply
  5. Avatar

    Judy

    Is the singapore street view map read yet?

    Reply

Leave a Reply