Click here to Skip to main content
15,868,141 members
Articles / Web Development / HTML

Virtual Earth 3D

Rate me:
Please Sign up or sign in to vote.
3.40/5 (5 votes)
18 Dec 2006CPOL2 min read 65.9K   429   18   12
Create a Virtual Earth 3D map using JavaScript.

Sample Image - VirtualEarth3D.gif

Introduction

This short article explains how to create a Virtual Earth 3D map using only JavaScript and some HTML. The example will only work in Internet Explorer with a plug-in installed.

The HTML Elements

First, create a new HTML file and reference the Virtual Earth API: http://dev.virtualearth.net/mapcontrol/v4/mapcontrol.js. Next, insert a body tag that calls a JavaScript function GetMap when it loads: onload="GetMap()". Then, create two div elements inside the body tag. The element called myTitle will contain the current view title. The element myMap will display the map.

HTML
<html>
<head>
<title>Virtual Earth 3D Mashup</title>
<script src="http://dev.virtualearth.net/mapcontrol/v4/mapcontrol.js"></script>
<script>

Here comes some JavaScript code ...

HTML
</script>
</head>

<body onload="GetMap();" bgcolor=#000000>
<div id="myTitle" 
   style="FONT: 100% Arial bold; TEXT-ALIGN: center; FONT-WEIGHT: bold; 
          COLOR: #fff; POSITION: relative;">Virtual Earth 3D</div>
<div id="myMap" style="position:relative; width=100% height:500px;"></div>
</body>

</html>

The Scenes

Now we can create some scenes to display on the map. We need a variable for the Virtual Earth map object map and one for the animation timer. The helper function VirtualEarth3DScene creates a VE scene object. This object will be displayed later.

HTML
<script>
var map = null;
var timer = null;
function VirtualEarth3DScene(title, lat, lon, alt, view, heading)
{
  this.Title = title;
  this.ViewSpec = new VEMapViewSpecification(new VELatLong(lat, lon), 
                                             null, alt, view, heading);
}
var scenes = new Array();
scenes.push( new VirtualEarth3DScene("San Francisco, California", 37.794008, -122.394352, 
             202.916620191187, -7.57928192941064, 284.330758577285) );
scenes.push( new VirtualEarth3DScene("Seattle, Washington", 47.619498, -122.347999, 
             212.752614734694, -13.4638485035358, 131.77967769793) );
var numScenes = scenes.length;
var sceneIndex = -1;
var updateInterval = 2000;

...
</script>

Next, we setup an array of scenes and push two VirtualEart3DScene objects into the array. I also need the variables numScenes containing the number of scenes, the actual scene sceneIndex, and the updateInterval for the timer object.

The function GetMap and MapLoadCp

The function GetMap creates a new Virtual Earth map object and attaches a callback function MapLoadCp to the onLoadMap event. The map style is set to Aerial. In the callback function, we set the map mode to Mode3D and hide the dashboard.

JavaScript
function GetMap()
{
  map = new VEMap("myMap");
  map.onLoadMap = MapLoadCp;
  map.LoadMap(null, 2, VEMapStyle.Aerial);
}

function MapLoadCp()
{
  map.SetMapMode(VEMapMode.Mode3D);
  map.HideDashboard();
  timer = setInterval('IncrScene();ShowNextScene()', updateInterval);
}

Last, the function call of setIntervall executes IncrScene() and ShowNextScene() every updateInterval seconds.

Complete the code

Last, we implement the functions ShowNextScene and IncrScene. The first function gets a scene out of the array of scenes. It sets the innerHTML for the div element myTitle and shows the scene on the map. When this function is executed for the first time, we increment updateInterval and reset the timer object.

JavaScript
function ShowNextScene()
{
 if ( sceneIndex == 0)
 {
   updateInterval = 20000;
   clearInterval(timer);
   timer = setInterval('IncrScene();ShowNextScene();', updateInterval);
  }
  var scene = scenes[sceneIndex];
  document.getElementById("myTitle").innerHTML = scene.Title;
  map.SetMapView(scene.ViewSpec);
}

The last one is only a helper function to update the sceneIndex.

JavaScript
function IncrScene()
{
 ++sceneIndex;
 sceneIndex = sceneIndex % numScenes;
}

The result

Try this online example.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Web Developer
Germany Germany
Florian works as consultant for change- and configuration management for about 7 years. In this environment he is often forced to work with unix, perl and shell scripts.

For more information about change- and configuration management (espacially Serena Dimensions) visit: www.venco.de

For video tutorials about asp.net, ajax, gridviews, ... (in german) visit: www.siore.com

Comments and Discussions

 
GeneralASP.NET AJAX Virtual Earth Mapping Server Control Pin
Chris Pietschmann, MVP27-Mar-07 8:47
Chris Pietschmann, MVP27-Mar-07 8:47 
GeneralRe: ASP.NET AJAX Virtual Earth Mapping Server Control Pin
Chris Pietschmann, MVP19-Oct-07 15:37
Chris Pietschmann, MVP19-Oct-07 15:37 
GeneralThanks! Pin
wickedtuner26-Dec-06 21:04
wickedtuner26-Dec-06 21:04 
GeneralRe: Thanks! Pin
fstrahberger27-Dec-06 3:42
fstrahberger27-Dec-06 3:42 
Thanks for your comment!
GeneralRe: Thanks! Pin
wickedtuner27-Dec-06 22:58
wickedtuner27-Dec-06 22:58 
GeneralRe: Thanks! Pin
fstrahberger29-Dec-06 1:06
fstrahberger29-Dec-06 1:06 
GeneralRe: Thanks! Pin
wickedtuner29-Dec-06 1:13
wickedtuner29-Dec-06 1:13 
GeneralRe: Thanks! Pin
fstrahberger29-Dec-06 19:33
fstrahberger29-Dec-06 19:33 
GeneralDoesn't quite work ! Pin
victorbos26-Dec-06 8:56
victorbos26-Dec-06 8:56 
GeneralRe: Doesn't quite work ! Pin
fstrahberger26-Dec-06 10:39
fstrahberger26-Dec-06 10:39 
GeneralRe: Doesn't quite work ! Pin
victorbos27-Dec-06 3:25
victorbos27-Dec-06 3:25 
GeneralRe: Doesn't quite work ! Pin
fstrahberger27-Dec-06 3:41
fstrahberger27-Dec-06 3:41 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.