Google is the first one to do many things on the internet, and the others just follow ... and so did Microsoft here:
Made it possible to search the world in a virtual map ... but with different views of the earth and how it looks today. I won't be going into detailt about, seach for live maps or google maps if you want to know more detailts about it.
Google's: http://maps.google.com/
Microsoft: http://maps.live.com/
I havent used any of them very much, but was asked if I create a little site taking advantage of Live maps from Microsoft.
Links of interrest:
Microsoft Virtual Earth - here you can find all you need to get started, but I will still point out some of the resources I have used.
Virtual Earth JavaScript Intellisense Helper - very nice, helped me alot during my exploration though of it.
Creating a Context Menu to support additional options to Virtual Earth/Live maps
1st step
The example is taken from: Virtual Earth Interactive SDK
Create a html document with the following.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1"></script>
<script type="text/javascript">
var map = null;
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap();
}
</script>
</head>
<body onload="GetMap();">
<div id='myMap' style="position:relative; width:400px; height:400px;"></div>
</body>
</html>
2nd step
Add the following to the GetMap() fucntion:
map.AttachEvent("onclick", ShowPopupMenu);
3rd step
Add the following html to the file ( just above the myMap div would be fine ):
<div id="menu">
<ul id="popupmenu" class="pmenu">
<li><a href="#" onclick='RemovePopupMenu(); alert("First");'>First</a></li>
<li><a href="#" onclick='RemovePopupMenu(); alert("Second");'>Second</a></li>
<li><a href="#" onclick='RemovePopupMenu();'>Exit</a></li>
</ul>
</div>
4th step
Add the following function to the java-script block:
function ShowPopupMenu(e) {
if (!e.rightMouseButton) {
RemovePopupMenu();
return;
}
var menu = document.getElementById('popupmenu');
menu.style.display = 'block'; //Showing the menu
menu.style.left = e.clientX + "px"; //Positioning the menu
menu.style.top = e.clientY + "px";
}
function RemovePopupMenu() {
document.getElementById("popupmenu").style.display = 'none';
}
5th step
Add some css style after the <meta> tag in the top of the html document:
<style type="text/css" media="screen">
ul, li {margin:0;padding:0;}
ul.pmenu
{
display: none;
position:absolute;
margin: 0;
padding: 1px;
list-style: none;
width: 150px; /* Width of Menu Items */
border: 1px solid #ccc;
background: #235087;
z-index:10;
}
ul.pmenu li { position: relative; }
ul.pmenu li a
{
display: block;
text-decoration: none;
color: White;
padding: 2px 5px 2px 20px;
}
ul.pmenu li a:hover
{
background:#335EA8;
color:white;
}
</style>
Live Demo
You can watch a live demo of it here: http://ifyoudo.net/demo/ve/
Done
Thats all ... there are alot of other examples out on the internet, when I was searching for it, but they all used some earlier versions of the Virtual Earth SDK, and did not work with the current version when I was writing this.
I hope you will find this usefull, please contact me if there are any questions.
Subscribe