Next up in our tour of Javascript mapping APIs is Microsoft’s Virtual Earth. VE is a full-featured mapping API with a visually appealing look, but with a number of gotchas what watchfors which I’ll list here.
VE is rather picky about the CSS and styles it sees (not nearly so much as MapQuest though!). In particular:
- make sure you add a
position: relativeorposition: absoluteto the CSS definitions for the map’s DIV, otherwise it will go crazy on at least Firefox. I addedposition: relativeand it worked fine - contrary to the documentation, VE wants to see the style rules directly on the element rather than inherited from CSS, otherwise it seems to default to the 600px by 400px default. Fortunately, once you’ve done this it does understand
width: 100%and similar.
Unlike MapQuest and Yahoo Maps, VE comes with a rather comprehensive map control installed. The downside of this is that if you want a simpler interface you’re going to have to code it yourself. In particular, there’s an option for a “Bird’s Eye” view of the map you’re looking at. Once you click on this, concepts like the map having a latitude and longitude go out the window (for reasons I don’t grasp). You can see in the example below that we actually test to see if Lat/Lon is available before attempting to display it. Also note that the documentation for VEMap.GetCenter is wrong — a null is not returned; instead Latitude and Longitude are null.
Microsoft really needs to adopt a more modern view of Javascript. One obvious thing would be to start using namespaces to isolate code — use VE.Map rather than VEMap. The VEMap constructor doesn’t accept a (DOM) element as an argument, you have to pass the ID. Another ugliness is the use of lengthy optional argument lists, such as this atrocity:
VEMap.Find(what, where, findType, shapeLayer, startIndex, numberOfResults, showResults, createResults, useDefaultDisambiguation, setBestMapView, callback);
This was understandable in the Win32 C-code days but not so much when passing a dictionary would accomplish much of the same in a simpler manner.
VE includes a rather straightforward geocoding call – despite what the documentation above implies. Just do:
map_js.ve_map.Find(null, "Toronto, ON");
Unfortunately, this has a two shortcomings:
- you cannot “Geocode at setup time” like you can in Yahoo Maps, so you have to display one location, then jump to the one you really want
- the Geocoder changes you’re zoom level, whether you want it to or not. From a mapping point-of-view I could see how this makes sense (e.g. show all of Toronto), but it would be nice if it was optional
We’ve got the geocoder in the example below commented out, but you may find it useful. Just remember that it’s asynchronous, so the actual map jump will not happen until after your current JS terminates.
Finally, to end on high note, VE doesn’t appear to need a developer or application key meaning you can just take this example to modify and run as you please. Here’s our example map application and the source below:
<html>
<head>
<script charset="UTF-8" type="text/javascript"
src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=en-us"></script>
<style type="text/css">
#id_map{
position: relative;
}
</style>
</head>
<body>
<div id="id_map" style="width: 100%; height: 75%;"> </div>
<br />
<p>
Lat: <input type="text" id="id_lat" onchange="map_js.onupdate_ll()" />
Lon: <input type="text" id="id_lon" onchange="map_js.onupdate_ll()" />
Zoom: <input type="text" id="id_zoom" onchange="map_js.onupdate_zoom()" />
</p>
<script type="text/javascript">
map_js = {
e_lat : null,
e_lon : null,
e_map : null,
ve_map : null,
create : function() {
map_js.e_lat = document.getElementById("id_lat");
map_js.e_lon = document.getElementById("id_lon");
map_js.e_zoom = document.getElementById("id_zoom");
map_js.ve_map = new VEMap("id_map");
map_js.ve_map.LoadMap(new VELatLong(43.648565, -79.385329), 13,
VEMapStyle.Road, false, VEMapMode.Mode2D, true, 1);
// map_js.ve_map.Find(null, "Toronto, ON");
map_js.ve_map.AttachEvent("onendzoom", map_js.onposition);
map_js.ve_map.AttachEvent("onendpan", map_js.onposition);
map_js.onposition();
},
onposition : function() {
var c = map_js.ve_map.GetCenter();
if (!c || !c.Latitude) {
return;
}
map_js.e_lat.value = c.Latitude;
map_js.e_lon.value = c.Longitude;
var z = map_js.ve_map.GetZoomLevel();
map_js.e_zoom.value = z;
},
onupdate_ll : function() {
map_js.ve_map.PanToLatLong(new VELatLong(map_js.e_lat.value, map_js.e_lon.value));
},
onupdate_zoom : function() {
map_js.ve_map.SetZoomLevel(map_js.e_zoom.value);
},
end : 0
};
map_js.create();
</script>
</body>
</html>
Interesting to read through your series, its a tough job to get stuck into the different platforms each with their own little quirks to work around. If people are looking for more code examples for Virtual Earth the interactive SDK is a great place to start:
http://dev.live.com/virtualearth/sdk/
Tonnes of resources listed on the MSDN forums:
http://social.msdn.microsoft.com/Forums/en-US/vemapcontroldev/thread/001db5dc-6fd3-4723-8654-971865ea281e
John.
[...] we set up the events in Google Maps is a little different than we did in MapQuest, Yahoo Maps and Visual Earth. GMaps uses a two phase creation scheme, using one call to create the map object and a second call [...]