Via Virtual Earth

Adding Your Own Context Menu RSS

This article is written for an old version of the Virtual Earth platform. While still available for reference purposes, it is unlikely to work if implemented.

In this tutorial I'll explain how to add your own context menu (right click popup menu) to your Virtual Earth application. I have used this technique in my MapStats application.

It will look like this when you right click the map:

We'll need two overload to members of the VE_MapControl class. Put these lines at the top of your OnPageLoad function:

VE_MapControl.prototype._CallContextMenu=function(e){if(!e)e=this._CreateEvent();if(this.onContextMenu)this.onContextMenu(e);}
VE_MapControl._ContextMenu = function(e){if(!e)e=window.event;e.cancelBubble=true;var t=VE_MapControl.GetTarget(e);var c=VE_MapControl.FindControlByTileImage(t);c._CallContextMenu(c._CreateEvent(c.GetLatitude(VE_MapControl.GetMouseY(e)),c.GetLongitude(VE_MapControl.GetMouseX(e))));if(!c||c.debug){return true;}return false;}

Now we can 'hook' the onContextMenu event of your map control. In this event we can draw our popup menu. We'll also need to remove the popup menu when the user left clicks the map. Let's add the following code after you created the map control 'map' in your OnPageLoad function:

map.onContextMenu=popupmenu;
map.onMouseClick=removepopupmenu;

You can now already capture the context menu event by implementing the popupmenu function, this was the most important part. If you want to create the same context menu as you see at the screenshot, you'll need to follow the rest of the article as well. Copy the following to your CSS file (yes, all this for the menus):

/* The gifs can be found at http://www.msgweb.nl/mapstats/view/drop_down_triangle.gif,
   and http://www.msgweb.nl/mapstats/view/drop_down_triangle_hover.gif.
   please copy them to your own server. */

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; } /* The magic */
ul.pmenu li ul{left:150px;}

Now, we need to add the actual menu to your HTML code. A basic menu looks like this (add it to your HTML body):

<ul id="popupmenu" class="pmenu">
  <li><a href="#" onclick='' class="parent">Switch view</a>
    <ul class="pmenu">
      <li><a href="#" onclick="map.SetMapStyle('h')">Hybrid</a></li>
      <li><a href="#" onclick="map.SetMapStyle('r')">Road</a></li>
      <li><a href="#" onclick="map.SetMapStyle('a')">Aerial</a></li>
    </ul>
  </li>
  <li><a href="#" onclick='' class="parent">Zoom</a>
    <ul class="pmenu">
      <li><a href="#" onclick="map.ZoomIn()">In</a></li>
      <li><a href="#" onclick="map.ZoomOut()">Out</a></li>
    </ul>
  </li>
  <li><a href="#" onclick="alert('Point coordinates:\nLatitude: '+popupevent.latitude+'\nLongitude: '+popupevent.longitude);">Point coordinates</a></li>
</ul>

Now, add this code to your OnPageLoad function to make sure the submenus show up in every browser:

navRoot = document.getElementById("popupmenu");
for (i=0; i<navRoot.childNodes.length; i++)
{
  node = navRoot.childNodes[i];
  if (node.nodeName=="LI") 
  {
    node.onmouseover = function()
    {
      this.className+=" over"; //Show the submenu
    }
    node.onmouseout=function()
    {
      this.className.replace(" over", ""); //Hide the submenu
    }
  }
}

Well, we're almost there. The last thing that needs to be done is implementing the popupmenu and removepopupmenu functions, to actually show/hide the menu:

function removepopupmenu(e)
{
  var menu = document.getElementById('popupmenu').style.display='none'; //Hiding the menu
}

function popupmenu(e)
{
  var menu = document.getElementById('popupmenu');
  menu.style.display='block'; //Showing the menu
  menu.style.left = map.GetX(e.longitude); //Positioning the menu
  menu.style.top = map.GetY(e.latitude);
}

I hope you find this tutorial useful. If you've got any questions, feel free to contact me.

The HTML/CSS list menu technique used in this article can be found at A List Apart.

Good luck with your application!

Article contributed by Yousef El-Dardiry. Have you got something to contribute?