Load multiple pushpin layers and set custom icons programmatically

Question

I have this code which loads a single geoRSS file and sets custom icons for all of the pushpins, as defined the XML.  It's been working great for almost a year.

<script type="text/javascript">
//the map object
var map = null;
//set page event handlers for onload and unload
if (window.attachEvent) {
 window.attachEvent("onload", pageLoad);
 window.attachEvent("onunload", pageUnload); 
} else {
 window.addEventListener("DOMContentLoaded", pageLoad, false);
 window.addEventListener("unload", pageUnload, false);
}
//load map    
function pageLoad() {
	var map = new VEMap('locMap');
	map.LoadMap();
	//import pushpin GeoRSS layer data
	var pins = new VEShapeLayer();
	var veLayerSpec = new VEShapeSourceSpecification(VEDataType.GeoRSS, "./bingmap/geoRSS.xml", pins);
	map.ImportShapeLayerData(veLayerSpec, function(){
		var numShapes = pins.GetShapeCount();
		for(var i=0; i < numShapes; ++i){
			var s = pins.GetShapeByIndex(i);
			s.SetCustomIcon(s.IconId);
		}
	}, true);
} 
//Clean up all objects
function pageUnload() {
    if (map!=null) {
        map.Dispose();
        map = null;
    }
}
</script>

The problem is, now I need to load multiple geoRSS files.  I know I could do it manually by creating the same code block over and over, but I would much rather do it programmatically, so I can future-proof it a bit more.  I have this code, which sort of works:

<script type="text/javascript">
//the map object
var map = null;
//set page event handlers for onload and unload
if (window.attachEvent) {
 window.attachEvent("onload", pageLoad);
 window.attachEvent("onunload", pageUnload); 
} else {
 window.addEventListener("DOMContentLoaded", pageLoad, false);
 window.addEventListener("unload", pageUnload, false);
}
//load map    
function pageLoad() {
	var map = new VEMap('locMap');
	map.LoadMap();
	//import pushpin GeoRSS layers
	var source=new Array("picard","kirk","janeway","skywalker","solo","organa");
	var layer = [];
	for (x=0;x<source.length;x++){
		layer[source[x]] = new VEShapeLayer();
		var veLayerSpec = new VEShapeSourceSpecification(VEDataType.GeoRSS, "./bingmap/"+source[x]+".xml", layer[source[x]]);
		map.ImportShapeLayerData(veLayerSpec, function(){
			var numShapes = layer[source[x]].GetShapeCount();
			for(var i=0; i<numShapes;++i){
				var s = layer[source[x]].GetShapeByIndex(i);
				s.SetCustomIcon(s.IconId);
				}
			}, true);
		}

	}
//Clean up all objects
function pageUnload() {
    if (map!=null) {
        map.Dispose();
        map = null;
    }
}
</script>

The pushpins load just fine, the issue is that the custom icons are no longer loading.  I get the default pushpin icon.  I know it probably has something to do with the dynamic variables, but I can't figure it out... PLEASE can anyone out there help?!?

Answer 1

I finally figured it out... just couldn't put it down.

The anonymous function was screwing things up, so I just moved it out, and simplified the variable assignments following sample code from the SDK.

Here is what I ended up with, should anyone else ever need to follow me down into the mouth of madness:

<script type="text/javascript">
//the map object
var map = null;
var layer = null;
//set page event handlers for onload and unload
if (window.attachEvent) {
 window.attachEvent("onload", pageLoad);
 window.attachEvent("onunload", pageUnload); 
} else {
 window.addEventListener("DOMContentLoaded", pageLoad, false);
 window.addEventListener("unload", pageUnload, false);
}
//load map    
function pageLoad() {
	var map = new VEMap('locMap');
	map.LoadMap();
	//import pushpin GeoRSS layers
	var source=new Array("picard","kirk","janeway","skywalker","solo","organa");
	for (var x=0;x<source.length;x++){
		layer = "layer"+x;
		layer = new VEShapeLayer();
		layer.SetTitle(source[x]);
		var veLayerSpec = new VEShapeSourceSpecification(VEDataType.GeoRSS,"./bingmap/"+source[x]+".xml",layer);
		map.ImportShapeLayerData(veLayerSpec,onFeedLoad,true);
	}
}
function onFeedLoad(layer){
	var numShapes = layer.GetShapeCount();
	for(var i=0;i<numShapes;++i){
		var s = layer.GetShapeByIndex(i);
		s.SetCustomIcon(s.IconId);
	}
}
//Clean up all objects
function pageUnload() {
    if (map!=null) {
        map.Dispose();
        map = null;
    }
}
</script>

Tested it on IE7 and FF3, works fine, using VEMap v6.2.

Answer 2

Hi  I am trying to do something very similer, with multiple Icons, however not sure how you coded the Georss ? is it possible to post a sample ?

Answer 3

Here's a sample of my GeoRSS file:

<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#" xmlns:georss="http://www.georss.org/georss" xmlns:gml="http://www.opengis.net/gml" xmlns:mappoint="http://virtualearth.msn.com/apis/annotate#">
      <channel>
        <mappointIntlCode>cht</mappointIntlCode>
        
          <item>
            <title>Bakersfield</title>
            <description> &lt;p&gt;BKFDCA&lt;/p&gt;
              &lt;p&gt;Bakersfield,CA 93301&lt;/p&gt;
              &lt;p&gt;Pacific Time Zone &lt;/p&gt;
              
              &lt;p&gt;&lt;a href="locate.cfm?page=location&amp;loc=BKFDCA"&gt;view details&lt;/a&gt;&lt;/p&gt;</description>
            <georss:point>35.37993 -119.01990</georss:point>
            <icon>http://myfullurl.com/images/icons/fam/TV_active.gif</icon>
          </item>
        
          <item>
            <title>El Paso </title>
            <description> &lt;p&gt;ELPSTX&lt;/p&gt;
              &lt;p&gt;El Paso,TX 79901&lt;/p&gt;
              &lt;p&gt;Mountain Time Zone &lt;/p&gt;
              
              &lt;p&gt;&lt;a href="locate.cfm?page=location&amp;loc=ELPSTX"&gt;view details&lt;/a&gt;&lt;/p&gt;</description>
            <georss:point>31.76995 -106.48999</georss:point>
            <icon>http://myfullurl.com/images/icons/fam/TV_active.gif</icon>
          </item>
        
          <item>
            <title>Fresno </title>
            <description> &lt;p&gt;FRSNCA&lt;/p&gt;
              &lt;p&gt;Fresno,CA 93721&lt;/p&gt;
              &lt;p&gt;Pacific Time Zone &lt;/p&gt;
              
              &lt;p&gt;&lt;a href="locate.cfm?page=location&amp;loc=FRSNCA"&gt;view details&lt;/a&gt;&lt;/p&gt;</description>
            <georss:point>36.73996 -119.79990</georss:point>
            <icon>http://myfullurl.com/images/icons/fam/TV_active.gif</icon>
          </item>
        
          <item>
            <title>Los Angeles</title>
            <description> &lt;p&gt;IRVNCA&lt;/p&gt;
              &lt;p&gt;Irvine,CA 92614&lt;/p&gt;
              &lt;p&gt;Pacific Time Zone &lt;/p&gt;
              
              &lt;p&gt;&lt;a href="locate.cfm?page=location&amp;loc=IRVNCA"&gt;view details&lt;/a&gt;&lt;/p&gt;</description>
            <georss:point>33.683997 -117.84995</georss:point>
            <icon>http://myfullurl.com/images/icons/fam/TV_active.gif</icon>
          </item>

      </channel>
    </rss>

I have this file generated by a ColdFusion script from my database.  Notice the description structure, I escaped all the HTML code to have it display properly on the map.  Hope this helps.

Answer 4

Thank you