One possible application of Virtual Earth, other than the classic application of one instance, is the use of multiple instances of VE, inside one single page.

With the last release of VE, Microsoft has introduced a new functionality about mouse and keyboard events. Specifically, you can use VEMap.AttachEvent Method, to synchronize one or more instance of VE with one principal instance.

Figure 1 - Virtual Earth in dual view

First of all, you need to insert in the page two instances of VE, defining and initialising two map variables:

var map = null;
var map1 = null;

Then you need to insert two functions, one for every map:

function GetMap()
{
map = new VEMap('myMap');
map.LoadMap(new VELatLong(41.8384869319255,15.9580442928227),11, 'r', false, VEMapMode.Mode2D, true);
map.AttachEvent("onendzoom",EndZoomHandler);
map.AttachEvent("onendpan",EndZoomHandler);
} 
  
function GetMap1()
{
map1 = new VEMap('myMap1');
map1.LoadMap(new VELatLong(41.8384869319255,15.9580442928227),11, 'r', false, VEMapMode.Mode2D, true);
}  

As you can see, in the first definition of th GetMap function, we use the method AttachEvent, for the zoom "onendzoom" and for the pan "onendpan". �In the definition of the event handler EndZoomHandler, we insert the code to handle the second instance of the map:

function EndZoomHandler(e)      
{         
var a = map.GetZoomLevel();
var b = map.GetCenter();
map1.SetCenterAndZoom(b,a);
}

Now me must call all the GetMap functions in the body of the page.

To obtain a correct layout of the two maps (DIV container) is sufficent to add a stylesheet with the correct style for the two maps:

#myMap
{
float: left;
border:#FFFF00 solid 2px;
}

#myMap1
{
float: right;
border:#009900 solid 2px;
}

Every time you pan or zoom on the map on the left, the event handler will set the same zoom and position on the map on the right. Naturally, the map on the left is completely independent from the other one. If we pan or zoom on the map on the right, the code will not update the map on the left.

With the same approach, it is quite simple to handle more than two maps.

Figure 2 - Virtual Earth three instances

Conclusion

More instances on VE you insert in your page, more time you must wait, until retrieve the data. But can be interesting adopt this scenario with custom tile layers, different for each map.

Figure 3 - Four instances of VE with different map style

Demonstrations

Dual Virtual Earth

More Virtual Earth

Quad Virtual Earth

Article contributed by Sergio Minicozzi - Software Developer.

(MARSec - Mediterranean Agency for Remote Sensing and Environment Control)

Have you got something to contribute?