Loading Custom Icons using a GeoRSS Feed (V5)

When loading a GeoRSS feed using the V5 sample code, you will notice that the VE default pushpin will be used as the pushpin icon (http://maps.live.com/i/bin/1.3.20070327220207.22/pins/poi_usergenerated.gif) for all the locations. In this article, we will cover how to load your own custom icons by modifying the GeoRSS Feed and by manipulating some basic knowledge of VEShapeLayers and VEShapes.

Figure 1 – http://dev.live.com/virtualearth/sdk/ sample code GeoRSS feed

Figure 2 - http://dev.live.com/virtualearth/sdk/ sample code GeoRSS feed with custom icons

Setting the GeoRSS Feed

First of all, you will need to modify your GeoRSS Feed by inserting pushpin icon URLs within <icon> tags. One example entry may be:

<item>
<title>Lakes Trailhead</title>
<description>This is where we started our hike, just down the road from the visitor center. You could also start at the visitor center.</description>
<geo:lat>46.2913246</geo:lat>
    <geo:long>-122.2658157</geo:long>
    <icon>http://dev.live.com/virtualearth/sdk/img/hiking_icon.gif </icon>
</item>

Listing 1 – Adding <icon> tags into the GeoRSS Feed

It is also possible to add different custom icons to the feed by specifying multiple <icon> tags in your feed.

Figure 3 - http://dev.live.com/virtualearth/sdk/ sample code showing multiple custom icons

If there are items that do not have the <icon> tag specified in them, they will default to the closest <icon> tag above their entry. If the <icon> tag is never specified, the default pushpin icon will be used. Also note that the <mappoint:icon> tag as outlined in the interactive SDK http://dev.live.com/virtualearth/sdk/georsstest.xml file will not work.

Loading the GeoRSS Feed

The VEShapeLayer containing the feed is returned as a parameter when the callback function of your map.ImportShapeLayerData method is called. By iterating through the VEShapes inside your VEShapeLayer, you can set their respective icons by making a call to shape.SetCustomIcon to set the pushpin icon. One example might be:

function onFeedLoad(layer)
{
    var numShapes = layer.GetShapeCount();
    var shape;
    for(var i=0; i < numShapes ; ++i)
    {
        shape = layer.GetShapeByIndex(i);
        shape.SetCustomIcon("<img src='"+ shape.IconId+"'/>");
    }
}

Listing 2 – Loading the Custom Icons

Conclusion

By creating the appropriate tags in your GeoRSS Feed, and calling the appropriate VE methods, loading custom icons becomes easy. You can find sample code here on how to do this.

Article contributed by Derek Chan (http://www.infusion.com).