Better way to load custom icons?

Question

I think per the example given on the Interactive SDK, this is how i'm loading my icons:

myinclude.php
- setup my sql query to hit my database
- execute my query to fetch the points.

themap.php
- loop through query and figure out which icon go with each point.
- put icon pattern in array (icons) to match # of points on map
- swap each point with correct icon using:

my_data.php (xml data)
- loop through query and setup XML file to get ready for import via map.

Code Snippet - Javascript

function onFeedLoad(feed){
    var numShapes = feed.GetShapeCount();
    var s, icon;
   
    for(var i = 0; i < numShapes; ++i){
        s = feed.GetShapeByIndex(i);
        icon = icons[i];
        s.SetCustomIcon(icon);
    }
}

I'm noticing a serious delay everytime a map is loaded using this method. I need different from 2-5 different icons for each point. All the examples I've seen only use one. The SDK example uses a line in the XML file:

Code Snippet - XML

<icon>http://dev.live.com/virtualearth/sdk/img/hiking_icon.gif</icon>

But I have come to find out that this line doesn't work. If it were that easy, then I would have no trouble matching the icons with points. So, how can I accomplish this and greatly speed up the performance of the map?

Thanks.

Answer 1

See the following post to see how to get the icon from the georss: http://forums.microsoft.com/MSDN/ShowPost.aspx?PostID=3283895&SiteID=1

Answer 2

This only differs the tinyest bit from the way i was load them before, but now the icons won't work, instead of using /img/blah.gif as an icon, i'm using a combination of:

Code Snippet - HTML

<div class="map_icon_link isRelative" id="map_icon_link_2">
    <div class="icon_land"><!-- icon --></div>
</div>

or

<div class="map_icon_link isRelative" id="map_icon_link_4">
    <div class="icon_space"><!-- icon --></div>
</div>

Shouldn't this function the exact same way? Here's a sample of the XML:

Code Snippet - XML

<item>

<title>First Buckeye Logistics Center</title>
    <description>

some description with xhtml in it..

    </description>
<geo:lat>35.088200</geo:lat>
<geo:long>-119.647869</geo:long>
<icon>
    <div class="map_icon_link isRelative" id="map_icon_link_2">
           <div class="icon_land"><!-- icon --></div>
    </div>
</icon>
</item>

Answer 3

Duh, me. I forgot to use htmlspecialchars() on the HTML;

Ok, here's the thing. After doing this, if this is the best and most efficient way to load map points (we have about 650 points on the map), it still takes forever to load. Is there something else i'm missing here? Does it normally take this slow?

Answer 4

Well, I think I've narrowed down the slowness; it's due to
1. the map itself loading from microsoft (not much i can do), and
2. the XML data being loaded all at once.

So, if there is a better more efficient way to load the data (either XML or straight-up JavaScript or whatever), please let me know. This has been quite bothersome. Thanks for the help!

Answer 5

Displaying all 600+ icons at once would cause a bit of a performance issue. What is commonly done is people load data from a database through a web service. By doing this they can request only the data for the viewable map area. Also it is common to implement server side clustering.The following article provides details on how to do this:
http://www.viawindowslive.com/Articles/VirtualEarth/ClusteringVirtualEarthwithMSAJAXandC.aspx

Answer 6

Thank you for the extremely helpful post, however the example shown on that page is seriously complicated to me and quite confusing. I understand the concept and feel like this is exactly what I need, but I'm not quite sure I follow how to implement it on my map.