Loading your pushpin popup content on demand

In this article I will explain how to design a Virtual Earth application to load its pushpin content on demand. Although this technique is very well suited for use in high performance sites combined with Clustering and encoding I will cover only the basics to keep it simple.
This code works for both IE and Firefox.

The normal method to load a pushpin in VE is the following:

var map = null; 
var pinID = 1; 
function GetMap() 
{ 
    map = new VEMap('myMap'); 
    map.LoadMap();
} 
function AddPin() 
{ 
    var pin = new VEPushpin( pinID, map.GetCenter(), null, 'My
    pushpin', 'This is pushpin number '+pinID ); 
    map.AddPushpin(pin); 
    pinID++; 
} 

When the user mouses over the pin the content is shown.

If you have a large quantity of data you must send all the content to the client in order for the occasional user interaction. Additionally the content is only as current as when it was added to the map.

The first step is to add the pin with a mouse over call back:

function AddAJAXPin(latlon, icon_url, iconStyle)
{
    var pin = new VEPushpin(pinID, latlon, icon_url, 
        pinID + "", "", iconStyle);
    VEPushpin.ShowDetailOnMouseOver = false;            
    VEPushpin.OnMouseOverCallback = PinHover;
    map.AddPushpin(pin);
}   

The mouse over call back then creates a custom pushpin popup, here I will use the VE default popup. The key is to create a div within the popup with a known ID that we will pass to our AJAX method:

function PinHover(x, y, title, details)
{            
    var ID = title;
    var DivID = "VPOP" + ID;
    var e=document.getElementById(ID+"_"+map.GUID);
    if(e!=null&&e!="undefined")
    {    
        window.ero.setBoundingArea(
        new Microsoft.Web.Geometry.Point(0,0),
        new Microsoft.Web.Geometry.Point(document.body.clientWidth,
            document.body.clientHeight));
        window.ero.setContent("<div id='" + DivID + "'>Loading...</div>");
        window.ero.dockToElement(e);
        getAJAXContent(ID,DivID);
    }
}

After we create the popup with some loading type text as a placeholder we call our method to get the real data:

function getAJAXContent(ID,DivID)
{
    //Get content from server based on the ID
    var mydate= new Date();
    var result = mydate.toTimeString();
    var resultDiv = document.getElementById(DivID);
    if(resultDiv!=null&&resultDiv!="undefined")
    {
        resultDiv.innerHTML = result;
    }  
}

This could use MS AJAX to call a web service directly or make a XMLHTTP request to a server page to get the required content.

Final thoughts

Using this technique it is possible to show the most up to date information when the user rolls over the pin and also save a tonne of bandwidth by only getting content when it is required.
Using this technique you can completely redesign you application to have a fast and efficient way to just get the pin locations on initial load and a separate method to get the actual content on demand.
Combine this with some encoding on those pin locations and you have reduced the initial data sent to every client significantly.
Stay tuned for my next article Clustering Virtual Earth V2.

References

http://dev.live.com/virtualearth/sdk/
http://viavirtualearth.com/VVE/Forum/2/378.ashx

Have a comment to make or just say hello?

http://www.soulsolutions.com.au/Blog/tabid/73/EntryID/96/Default.aspx