I am having trouble parsing XML data in the JS code following it. I have several XML row tags that I am trying to pull data from, this is just a sample. There is a problem with the loop section in the JS code (I've never been good at loops) and I am only getting the information from the first row tag repeatedly in my sidebar. How do I get it to read all of the row tags?
<rows>
<row>
<time>2014-11-05T10:53:35.757Z</time>
<latitude>41.896</latitude>
<longitude>-119.6168</longitude>
<depth>1.6069</depth>
<mag>2.87</mag>
<magType>ml</magType>
<nst>4</nst>
<gap>145.83</gap>
<dmin>0.511</dmin>
<rms>0.1222</rms>
<net>nn</net>
<id>nn00466295</id>
<updated>2014-11-05T11:48:11.391Z</updated>
<place>68km ESE of Lakeview, Oregon</place>
<type>earthquake</type>
</row>
<row>
<time>2014-11-05T10:30:37.000Z</time>
<latitude>60.366</latitude>
<longitude>-151.8877</longitude>
<depth>70</depth>
<mag>2.5</mag>
<magType>ml</magType>
<nst/>
<gap/>
<dmin/>
<rms/>
<net>ak</net>
<id>ak11434200</id>
<updated>2014-11-05T11:53:47.658Z</updated>
<place>32km W of Cohoe, Alaska</place>
<type>earthquake</type>
</row>
.
.
.
</rows>
<!DOCTYPE html>
<html>
<head>
<title>Final Project</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
#title { font-size: 30px }
.side_table { height:515px; overflow:auto; }
</style>
<script type="text/javascript" src="http://ift.tt/1kRCTVO?"></script>
<script type="text/javascript" src="downloadxml.js"></script>
<script type="text/javascript">
var infoWindow = new google.maps.InfoWindow();
var markers = [];
function myclick(num) {
google.maps.event.trigger(markers[num], "click");
}
function createMarker(point,info,map) {
var iconURL = 'cone.png'; var iconSize = new google.maps.Size(20,34);
var iconOrigin = new google.maps.Point(0,0); var iconAnchor = new google.maps.Point(10,34);
var myIcon = {
url: iconURL,
size: iconSize,
origin: iconOrigin,
anchor: iconAnchor
};
var iconShape = [8,33, 4,15, 1,15, 0,12, 0,5, 6,0, 12,0, 19,14, 15,15, 10,33];
var myMarkerShape = {
coord: iconShape,
type: 'poly'
};
var myMarkerOpts = {
position: point,
map: map,
icon: myIcon,
shape: myMarkerShape
};
var marker = new google.maps.Marker(myMarkerOpts);
markers.push(marker);
google.maps.event.addListener(marker, 'click', function() {
infoWindow.close();
infoWindow.setContent(info);
infoWindow.open(map,marker);
});
}
function initialize() {
var latlng = new google.maps.LatLng(0, 0);
var mapOpts = {
zoom: 1,
center: latlng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOpts);
downloadUrl("csv2xml.php", function(data) {
var xmlDoc = xmlParse(data);
var records = xmlDoc.getElementsByTagName("row");
var side_html = '<div class="side_table"> \
<table style="border-collapse: collapse" border="1" \
cellpadding="5"> \
<thead> \
<tr style="background-color:#e0e0e0"> \
<th>Location</th> \
<th>Magnitude</th> \
</tr> \
</thead> \
<tbody>';
for (var i = 0; i < records.length; i++) {
var rec = records[i];
var time = records[0].getElementsByTagName("time")[0].childNodes[0].nodeValue;
var lat = parseFloat(records[0].getElementsByTagName("latitude")[0].childNodes[0].nodeValue);
var lng = parseFloat(records[0].getElementsByTagName("longitude")[0].childNodes[0].nodeValue);
var depth = records[0].getElementsByTagName("depth")[0].childNodes[0].nodeValue;
var mag = records[0].getElementsByTagName("mag")[0].childNodes[0].nodeValue;
var id = records[0].getElementsByTagName("id")[0].childNodes[0].nodeValue;
var updated = records[0].getElementsByTagName("updated")[0].childNodes[0].nodeValue;
var place = records[0].getElementsByTagName("place")[0].childNodes[0].nodeValue;
var row = new google.maps.LatLng(lat, lng);
//Infowindow parameters
var html = "<strong>Location: </strong>" + place + "<br />" +
"<strong>Magnitude: </strong>" + mag + "<br />" +
"<strong>Depth: </strong>" + depth + "<br />" +
"<strong>Time: </strong>" + time + "<br />";
//Sidebar parameters
side_html += '<tr> \
<td><a href="javascript:myclick(' + i + ')">' + place + '</a></td> \
<td>' + mag + '</td> \
</tr>';
createMarker(row,html,map);
}
side_html += '</tbody> \
</table>';
document.getElementById("side_bar").innerHTML = side_html;
});
}
</script>
</head>
<body onload="initialize()">
<div id="title" style="position:absolute; left:10px; top:5px;"><b>RealTime Earthquakes Greater Than 2.5 Magnitude Over The Last Day</b></div>
<div id="map_canvas" style="width: 1000px; height: 500px; position: absolute; left: 10px; top: 40px"></div>
<div id="side_bar" style="width: 200px; height 500px; position: absolute; left: 1030px; top: 40px"></div>
<div id="notes" style="position:absolute; left:10px; top:550px; width:95%">
<u>Final Project Reflection</u><br>
<p></p>
</div>
</body>
</html>
No comments:
Post a Comment