Getting Started with the Virtual Earth Map Control
Eric shares a very bare-bones example of adding the Virtual Earth control to
a web page leaving it to the reader who can hack away with Javascript and html
to create a more fully-fledged implementation.
Although I consider myself multi-lingual professional programmer, I must admit
that when it comes to web development, there are some gaping holes in my reportoire
including Java, consumption of web services in general, and notably for the experiment
to be outlined here -- Javascript. Nonetheless, as any programmer can probably relate,
picking up a new computer language is much easier than learning a new spoken language
i.e. more like picking up a new Cannondale mountain bike (e.g. .NET) having mastered
bike riding on a single-speed Huffy (C64 BASIC) as a kid.
So what is this I am talking about? Microsoft has made available a Javascript
API or interface for manipulating their new Virtual Earth service which includes
vector map data and aerial photographs along with many other neat features including
"Locate Me" using a database of Wi-fi MAC addresses and the incredibly useful Scratchpad. As
we announced many months ago, Bill Gates reviewed the proposal for Virtual Earth
during his most recent Think Week
and fast-tracked the project.
featured resources
Let's start by taking a look at the Virtual
Earth Javascript.
What do you do with this? First, upload the script as a .js file on your web server.
For instance, I have it loaded as
http://www.ericfrost.com/virtual-earth/ve.js.
The .js script will be referenced and called from your html file. A very basic
html file which loads the map but does nothing else can be as simple as:
<html>
<head>
<script src="ve.js"></script>
<script>
function OnPageLoad()
{
map = new VE_MapControl(41.8, -88, 100, 'h', "relative", 1, 1, 400, 400);
document.body.appendChild(map.element);
}
</script>
</head>
<body onLoad="OnPageLoad()">
</body>
</html>
See example at
http://www.ericfrost.com/virtual-earth/test1.html.
That's it! How much easier could it be?
From the .js script we can see the VE_MapControl parameters defined as:
function VE_MapControl(latitude, longitude, zoomLevel, mapStyle, position, x, y, width, height)
Valid mapStyle's include "a" for aerial, "r" for road, and "h" for hybrid. The position
can be either "absolute" or "relative" and is in reference to the control's position in
the browser. Amazingly, without any additional programming, you can already drag the map,
pan with the arrow keys, and zoom in and out +/-.
What do you want to see next? Play around with the parameters above and you can see
them in action, for instance, I guessed and then fiddled with the lat/lon's to get the starting map to show Chicago. Someone who knows even rudimentary html and Javascript can take the example here and add buttons and drop-down's and checkboxes or whatever other cool html controls to modify the map object and change the map. We will revisit Virtual Earth development in future articles.
Have you tried it on your web site? Please share in the forum section for this article and include the code!