Add objects to Microsoft Bing™ Map

Download source code - 3.68 KB

Introduction

Placing objects over a Microsoft Bing™ Map adds functionality and enhances user experience. The following example demonstrates how to place a command button over a Bing™ Map, which will open another NASCAR Race Tracks Map in a full-screen mode.

Background

Microsoft Bing™ Map, a rather popular interactive mapping technology, could be enhanced by adding objects (web controls, images, scripts, etc.) placed over the map (a working demo is available at: www.webinfocentral.com/RESOURCES/NascarMap.aspx).

Using the code

In order to put the ASP.NET server Button control over a Bing™ Map, it is placed within an HTML "<div>" element with its z-index property set to 100. Please note, that in this particular case setting, z-index:1 will do the job, but in real-life development, you have to make sure that the object of interest has its z-index property properly set in order to appear atop the corresponding objects stack, including the Map.

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

The code-behind:

//******************************************************************************
// Module           :   Default.aspx.cs
// Author           :   Alexander Bell
// Copyright        :   2009 Alexander Bell
// Date Created     :   06/28/2009
// Last Modified    :   06/29/2009
// Version          :   1.01
// 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
}

Points of interest

Browser compatibility
IE 6.0/7.0/8.0
Firefox 2.0/3.0
Safari/Chrome

License

This article, along with any associated source code and files, is licensed under The Microsoft Public License (Ms-PL)

About the Author

DrABELL

Chief Technology Officer
Infosoft Int'l

United States

Member

Dr. A. Bell (aka DrABELL), hi-tech consultant living in the US, has more than 20 years of software and electronic engineering experience. He published more than 100 technical articles and authored 37 inventions. Dr. Bell is the Windows/Internet technologies veteran, currently focused on: .NET,Mobile,Java,C#,SQL,HTML5,CSS3. He developed the most popular Silverlight Media Player (#1 Goog) and 3 Fractions Calculator (also #1 on Google/Bing/Yahoo). Sample online projects: