How to get all attributes of a tag in an XML document using javascript?

[Kris Noah]

Hi,

I have an xml file of the form:

<datapoints>
<Bumper1 colour="#FF00FF" width="5" html="You clicked the red polyline">
		<point latPoly="-33.344533" longPoly="150.546345" />
		<point latPoly="-33.453636" longPoly="150.745353" />
		<point latPoly="-33.634553" longPoly="150.535345" />
		<point latPoly="-33.746574" longPoly="150.435345" />
		<point latPoly="-33.746556" longPoly="150.345345" />
<Bumper2 colour="#FF00FF" width="5" html="You clicked the red polyline">
		<point latPoly="-33.344533" longPoly="150.546345" />
		<point latPoly="-33.453636" longPoly="150.745353" />
		<point latPoly="-33.634553" longPoly="150.535345" />
		<point latPoly="-33.746574" longPoly="150.435345" />
		<point latPoly="-33.746556" longPoly="150.345345" />
<Bumper3 colour="#FF00FF" width="5" html="You clicked the red polyline">
		<point latPoly="-33.344533" longPoly="150.546345" />
		<point latPoly="-33.453636" longPoly="150.745353" />
		<point latPoly="-33.634553" longPoly="150.535345" />
		<point latPoly="-33.746574" longPoly="150.435345" />
		<point latPoly="-33.746556" longPoly="150.345345" />
</datapoints>

etc...

I already have my program (mixture of JSP and javascript/ajax) able to retrieve all the latitude and longitude points from the XML file:

// Read the data from tables.xml
 var request = GXmlHttp.create();
 request.open("GET", "data.xml", true);
 request.onreadystatechange = function() {
   if (request.readyState == 4) { // A ready state of 4 means that the
									// response is ready and we can get our data
	   if (request.status==200) {
        processPolyLines();
   }
	   else if (request.status==404) alert("Resource not found!")
	   else alert("Status is "+request.status)
   }
}
request.send(null);
 
function processPolyLines(colour) {
var xmlDoc = GXml.parse(request.responseText);
// ========= process the polylines ===========
for (var j = 0; j < 12; j++) {
inc += 1;
if(j < 9){
	checkpoint = ("lineTFT00" + inc);
}else {
	checkpoint = ("lineTFT0" + inc);
}
var lines = xmlDoc.documentElement.getElementsByTagName(checkpoint);
//var p = new Array(); // The p stands for polylines
// alert(checkpoint);
for (var a = 0; a < lines.length; a++) {
	// get any line attributes
	/* We shall no longer read the colour values from tables.xml */
	/* Instead we shall dynamically retrieve the colour for live congestion display */
 //   var colour = lines[a].getAttribute("colour"); 

	var width  = parseFloat(lines[a].getAttribute("width"));
	// read each point on that line
	var points = lines[a].getElementsByTagName("point");
	var pts = [];
	for (var i = 0; i < points.length; i++) {
		pts[i] = new GLatLng(parseFloat(points[i].getAttribute("latPoly")),
                               parseFloat(points[i].getAttribute("longPoly"))); 
	}
	
	//p[a] = new GPolyline(pts,colour,width)
	//map.addOveray(p[a]);
	
	 map.addOverlay(new GPolyline(pts,colour,width));
	// alert(checkpoint(pts[6]));
	}
    }        
}

I've written other code using the Google Maps API to use these points to plot "polylines" onto the map. My question is how would I be able to only colour in, say, the points for bumper1 or bumper2? But not all. So when I call the GPolyline function for bumper1 or bumper2 etc, it will only plot the points for the intended tag. Currently it plots a Polyline for all the co-ordinates in a single colour.

I would need to store the lat/long points for these in some sort of an array and simply pass it to map.addOverlay(new GPolyline([b]pts,colour,width));[/b] is my understanding (Like: new GPolyline(some statement corresponding to all the points for bumper1, colour, width) ). Can someone please shed some light on this for me?

Thanks!