Right Click Context Menu

This Page is locked
Modified: 2007/10/21 19:33 by ViaVE Visitor
Just updated the old V4 code to V5:


<!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>
<title>Right Context Menu V5</title>
<style type="text/css">
  ul, li{margin:0;padding:0;}

  ul.pmenu {
    position:absolute;
    margin: 0;
    padding: 1px;
    list-style: none;
    width: 150px; /* Width of Menu Items */
    border: 1px solid #ccc;
    background:white;
    display:none;
    z-index:10;
  }

  ul.pmenu li {position: relative;}

  ul.pmenu li ul {
    position: absolute;
    left: 150px; /* Set 1px less than menu width */
    top: 0;
    display: none;
    z-index:10;
  }

  /* Styles for Menu Items */
  ul.pmenu li a {
    display: block;
    text-decoration: none;
    color: black;
    padding: 2px 5px 2px 20px;
  }

  ul.pmenu li a:hover {
    background:#335EA8;
    color:white;
  }

  ul.pmenu li a.parent {
    background:url('drop_down_triangle.gif') no-repeat 140px 4px;
  }
  ul.pmenu li a.parent:hover {
    background:#335EA8 url('drop_down_triangle_hover.gif') no-repeat 140px 4px;
  }

  /* IE \*/
  * html ul.pmenu li { float: left; height: 1%; }
  * html ul.pmenu li a { height: 1%; }
  * html ul.pmenu li ul {left:147px;}
  /* End */

  ul.pmenu li:hover ul, ul.pmenu li.over ul { display: block; }
  ul.pmenu li ul{left:150px;}

</style>

<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=5"></script>
<script type="text/javascript">

  var map;

  function hidePopupMenu()
  {
    var menu = document.getElementById('popupmenu').style.display='none';
  }

  function showPopupMenu(e)
  {
    if (e.rightMouseButton) {
        var x = map.GetLeft();
        var y = map.GetTop();

        var menu = document.getElementById('popupmenu');
        menu.style.display='block'; //Showing the menu
        menu.style.left = e.mapX + x; //Positioning the menu
        menu.style.top = e.mapY + y;
    }
  }

  function GetMap()
  {
    map = new VEMap('myMap');
    map.LoadMap();

    map.AttachEvent('onclick', showPopupMenu);
    prepMenu();
  }

  function prepMenu()
  {

    navRoot = document.getElementById("popupmenu");
    var items = navRoot.getElementsByTagName('li');
    for (i=0; i<items.length; i++)
    {
      node = items[i];
      if (node.nodeName=="LI")
      {
      node.onmouseover = function()
      {
        this.className+=" over"; //Show the submenu
      }
      node.onmouseout=function()
      {
        if (this.className.indexOf('pmenu') > 0)
        {
        this.className="pmenu";
        }
        else {
        this.className = "";
        }
      }
      }
    }
  }

</script>

</head>
<body onload="GetMap();">
  <div id='myMap' style="position:relative; width:400px; height:400px;"></div>

  <ul id="popupmenu" class="pmenu">
    <li><a href="#" onclick='' class="parent">Switch view</a>
    <ul class="pmenu">
      <li><a href="#" onclick="map.SetMapStyle(VEMapStyle.Hybrid);hidePopupMenu()">Hybrid</a></li>
      <li><a href="#" onclick="map.SetMapStyle(VEMapStyle.Road);hidePopupMenu()">Road</a></li>
      <li><a href="#" onclick="map.SetMapStyle(VEMapStyle.Aerial);hidePopupMenu()">Aerial</a></li>
    </ul>
    </li>
    <li><a href="#" onclick='' class="parent">Zoom</a>
    <ul class="pmenu">
      <li><a href="#" onclick="map.ZoomIn();hidePopupMenu()">In</a></li>
      <li><a href="#" onclick="map.ZoomOut();hidePopupMenu()">Out</a></li>
    </ul>
    </li>
    <li><a href="#" onclick="alert('Map is centered on:  ' + map.GetCenter());hidePopupMenu();">Point coordinates</a></li>
  </ul>
</body>
</html>