Project Description
Placing objects over the Microsoft Bing Map adds functionality and enhances user experience

Working Demo is available at: http://bit.ly/MotoSport

ADDITIONAL ONLINE RESOURCES:

  1. How to use online geocoders and interactive maps
  2. How to select web browser and check its capabilities

ARTICLES ON RIA TOPIC

  1. Rich internet applications, part 1: embedding YouTube™ video player into web page
  2. Rich internet applications, part 2: Silverlight™ media player
  3. Rich internet applications, part 3: HTML 5 video player
The following demo page adds the button to the Bing Map with functionality to open NASCAR MAP in a full-screen mode. Notice, that in order to put the button control on the top of the map it was placed in "<div>" element with z-index set to 100 (in this particular case, even z-index:1 will do the job; in real-life development project make sure that the object on the top has its z-index properly set).

Browser Compatibility: IE 6.0/7.0/8.0+, FireFox 2.0/3.0, Safari/Chrome
Demo Web Page
<%@ Page Language="C#" 
AutoEventWireup="true"  
CodeFile="Default.aspx.cs" 
Inherits="Default_aspx" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>MICROSOFT BING MAP | DEMO</title>
     
      <script type="text/javascript" 
      src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2">
      </script>
      
      <script type="text/javascript">
          function DrawMap() {(new VEMap('Map')).LoadMap(); }   
      </script>        
        
    </head>
    
    <body onload="DrawMap();">
      
        <form id="form1" runat="server">
            
            <!-- BING MAP-->
            <div id='Map' style="position:absolute; width:800px; height:600px;"></div>
            
            <!-- OBJECT OVER THE MAP-->
            <div style="position:absolute; z-index:100; top: 10px; left:620px">
                <asp:Button ID="Button1" runat="server" Text="SHOW NASCAR MAP" />
            </div>
        
        </form>
    </body>
</html>
Code behind page
//******************************************************************************
// Module           :   Default.aspx.cs
// Author           :   Alexander Bell
// Copyright        :   2009 Alexander Bell
// Date Created     :   06/28/2009
// Last Modified    :   09/29/2009
// Description      :   ASP.NET code behind module (MICROSOFT BING MAP | DEMO)

//******************************************************************************
// DISCLAIMER: This Application is provide on AS IS basis without any warranty
//******************************************************************************

//******************************************************************************
// TERMS OF USE     :   This module is copyrighted.
//                  :   You can use it at your sole risk provided that you keep
//                  :   the original copyright note.
//******************************************************************************
using System;

public partial class Default_aspx : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        // set target URL
        string _URL = "http://www.webinfocentral.com/_RESOURCES/NascarMap.aspx";
        
        // get Javascript to open full screen browser window
        string _scriptJS =GetScript
            (_URL, "NascarMap", true, false, false, false, false, false, false, false);

        // add script to onclick event of page control
        Button1.Attributes.Add("onclick", _scriptJS);

    }

    #region Open Full Screen Window using JavaScript
    /// <summary>Open Browser Window: Full Screen</summary>
    /// <param name="URL">string</param>
    /// <param name="Name">string</param>
    /// <param name="FullScreen">bool</param>
    /// <param name="MenuBar">bool</param>
    /// <param name="Resizable">bool</param>
    /// <param name="Toolbar">bool</param>
    /// <param name="Location">bool</param>
    /// <param name="StatusBar">bool</param>
    /// <param name="Copyhistory">bool</param>
    /// <param name="ScrollBalr">bool</param>
    /// <returns>string</returns>
    private string GetScript
       (string URL,
        string Name,
        bool FullScreen,
        bool MenuBar,
        bool Resizable,
        bool Toolbar,
        bool Location,
        bool StatusBar,
        bool Copyhistory,
        bool ScrollBar)
    {
        string ret = "javascript:void window.open ('";
        ret = ret + URL + "', '" + Name + "', '";
        ret = ret + "fullScreen=" + ((FullScreen) ? "1" : "0") + ",";
        ret = ret + "resizable=" + ((Resizable) ? "1" : "0") + ",";
        ret = ret + "menuBar=" + ((MenuBar) ? "1" : "0") + ",";
        ret = ret + "toolbar=" + ((Toolbar) ? "1" : "0") + ",";
        ret = ret + "location=" + ((Location) ? "1" : "0") + ",";
        ret = ret + "statusBar=" + ((StatusBar) ? "1" : "0") + ",";
        ret = ret + "copyhistory=" + ((Copyhistory) ? "1" : "0") + ",";
        ret = ret + "scrollBar=" + ((ScrollBar) ? "1" : "0") + ",";
        ret = ret + "')";
        return ret;
    }
    #endregion
}
References

ASP.NET ASP.NET 2.0 ASP.NET 3.5 HTML Bing VirtualEarth Javascript NASCAR

Last edited Jan 3, 2011 at 4:21 PM by DrABELL, version 12