 |
||||||||||
| ||||||||||
| ||||||||||
Web Development »
HTML / CSS »
General
Beginner
Virtual Earth 3DBy fstrahbergerCreate a Virtual Earth 3D map using JavaScript |
HTML, Windows, Dev Posted: 18 Dec 2006 Updated: 18 Dec 2006 Views: 24,373 Bookmarked: 14 times |
||
|
|
|||
|
Advanced Search Sitemap |
|
|
|
||||||||||||||||
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 plugin 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>
<head>
<title>Virtual Earth 3D Mashup</title>
<script src="http://dev.virtualearth.net/mapcontrol/v4/mapcontrol.js"></script>
<script>
Here comes some JavaScript code …
</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.
<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 create a new Virtual Earth map objects 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.
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() all updateInterval seconds.
Complete the code
Last we implement the function 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 the updateInterval and reset the timer object.
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 also only a helper function to update the sceneIndex.
function IncrScene()
{
++sceneIndex;
sceneIndex = sceneIndex % numScenes;
}
The Result
Try this online example.
| You must Sign In to use this message board. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
General 
News 
Question 
Answer 
Joke 
Rant 
Admin
|
PermaLink |
Privacy |
Terms of Use
Last Updated: 18 Dec 2006 Editor: |
Copyright 2006 by fstrahberger Everything else Copyright © CodeProject, 1999-2009 Java | Advertise on the Code Project |