Adding Pushpin Descriptions in Virtual Earth

  • Article

While I was away on holiday (brilliant time thanks) someone mailed me to ask about how they could bulk add a set of pushpins (representing, for example, clients) to a virtual earth map along the lines of my TravelNews sample. Say, for example, you had an array of customer objects with properties postcode, company name, customer_id, industry etc and you wanted to plot them on a virtual earth map using their postcode property. You might have some code similar to the below (adapted form the TravelNews sample to simplify things a bit) and make a call to the FindLoc function for each customer in your array passing in the customer.postcode property. But as map.FindLocation is an asynchronous operation, how do you figure out which customer you're dealing with in the callback function (onFoundResults)?

Well the results object (e) has an ID property which, for a postcode search, starts with "POSTCODE (postcode)..." (where POSTCODE is the actual postcode searched for, so in my case, "RG6 1WG (postcode)...". I can use this as an index to find the relevant customer object and then extract the customer details to pass as the title / details parameters to the VEPushpin constructor. Clearly there are some potential issues to be taken care of (eg two customers with the same postcode) but in principle this approach should work (assuming the format of the ID property remains unchanged).

The only issue is how to store the customer objects - a dictionary or hashtable would be ideal (oh, if only this was C#) or you could simply use a multi-dimensional array and implement a search function to do the key lookup. What you choose clearly depends on your requirements (eg how many customers you expect to plot, how quickly you want to build it, what performance you need etc). I played around with adding individual postcode properties to a customer object (so, for example, I would add a customer.RG61WG property which would return the description for the customer at RG6 1WG). For my trivial example of only 3 customers this worked okay and it was a fun experiment but I wouldn't take it any further than that!

 <html>
<head>
    <script src="https://dev.virtualearth.net/mapcontrol/v3/mapcontrol.js" type="text/javascript"></script>

    <script type="text/javascript">
         var map = null;

         function GetMap()
         {
            map = new VEMap('myMap');
            map.LoadMap(new VELatLong(55.0,-3.0), 6, 'r');
            map.HideDashboard();
            FindLoc("RG6 1WG");
         }   
         
         function FindLoc(postcode)
         {
            map.FindLocation(postcode, onFoundResults);
         }
         
         function onFoundResults(e)
         {
            var pin = new VEPushpin(e[0].ID, e[0].LatLong, null, "Microsoft Campus", "Details");
            map.AddPushpin(pin);
         }
    </script>

</head>
<body onload="GetMap();">
    <div id='myMap' style="width: 100%; height: 100%;"></div>
</body>
</html>

Technorati tags: virtual earth