Fix mapping between altitudes and positions

js/api_gmaps.js

@@ -43,7 +43,7 @@ function init() {
 }
 
 function displayTrack(xml, update) {
-  altitudes.length = 0;
+  altitudes = {};
   var totalMeters = 0;
   var totalSeconds = 0;
   // init polyline
@@ -54,7 +54,7 @@ function displayTrack(xml, update) {
   var positions = xml.getElementsByTagName('position');
   var posLen = positions.length;
   for (var i = 0; i < posLen; i++) {
-    var p = parsePosition(positions[i]);
+    var p = parsePosition(positions[i], i);
     totalMeters += p.distance;
     totalSeconds += p.seconds;
     p['totalMeters'] = totalMeters;
@@ -131,7 +131,14 @@ function setMarker(p, i, posLen) {
       popup.setContent(content);
       popup.open(map, marker);
       if (document.getElementById('bottom').style.display == 'block') {
-        chart.setSelection([{ row: i, column: null }]);
+        var index = 0;
+        for (var key in altitudes) {
+          if (altitudes.hasOwnProperty(key) && key == i) {
+            chart.setSelection([{ row: index, column: null }]);
+            break;
+          }
+          index++;
+        }
       }
     }
   })(marker, content));
@@ -139,12 +146,12 @@ function setMarker(p, i, posLen) {
   popups.push(popup);
 }
 
-function addChartEvent(chart) {
+function addChartEvent(chart, data) {
   google.visualization.events.addListener(chart, 'select', function () {
     if (popup) { popup.close(); clearTimeout(altTimeout); }
     var selection = chart.getSelection()[0];
     if (selection) {
-      var id = selection.row;
+      var id = data.getValue(selection.row, 0) - 1;
       var icon = markers[id].getIcon();
       markers[id].setIcon('//maps.google.com/mapfiles/marker_orange.png');
       altTimeout = setTimeout(function () { markers[id].setIcon(icon); }, 2000);

js/api_openlayers.js

@@ -85,7 +85,7 @@ function init() {
   layerMarkers = new OpenLayers.Layer.Markers('Markers');
 }
 function displayTrack(xml, update) {
-  altitudes.length = 0;
+  altitudes = {};
   var totalMeters = 0;
   var totalSeconds = 0;
   var points = new Array();
@@ -93,7 +93,7 @@ function displayTrack(xml, update) {
   var positions = xml.getElementsByTagName('position');
   var posLen = positions.length;
   for (var i = 0; i < posLen; i++) {
-    var p = parsePosition(positions[i]);
+    var p = parsePosition(positions[i], i);
     totalMeters += p.distance;
     totalSeconds += p.seconds;
     p['totalMeters'] = totalMeters;
@@ -169,17 +169,24 @@ function setMarker(p, i, posLen) {
       var popup = new OpenLayers.Popup.FramedCloud("popup_" + (i + 1), lonLat, null, content, icon, true);
       map.addPopup(popup);
       if (document.getElementById('bottom').style.display == 'block') {
-        chart.setSelection([{ row: i, column: null }]);
+        var index = 0;
+        for (var key in altitudes) {
+          if (altitudes.hasOwnProperty(key) && key == i) {
+            chart.setSelection([{ row: index, column: null }]);
+            break;
+          }
+          index++;
+        }
       }
     }
   })());
 }
 
-function addChartEvent(chart) {
+function addChartEvent(chart, data) {
   google.visualization.events.addListener(chart, 'select', function () {
     var selection = chart.getSelection()[0];
     if (selection) {
-      var id = selection.row;
+      var id = data.getValue(selection.row, 0) - 1;
       var marker = layerMarkers.markers[id];
       var url = marker.icon.url;
       marker.setUrl('//www.openstreetmap.org/openlayers/img/marker-gold.png');

js/main.js

@@ -35,7 +35,7 @@ if (units == 'imperial') {
 var latest = 0;
 var live = 0;
 var chart;
-var altitudes = new Array();
+var altitudes = {};
 var altTimeout;
 var gm_error = false;
 
@@ -43,10 +43,12 @@ function displayChart() {
   if (chart) { google.visualization.events.removeAllListeners(chart); }
   var data = new google.visualization.DataTable();
   data.addColumn('number', 'id');
-  data.addColumn('number', 'altitude');
-  var altLen = altitudes.length;
-  for (var i = 0; i < altLen; i++) {
-    data.addRow([(i + 1), Math.round((altitudes[i] * factor_m))]);
+  data.addColumn('number', lang['altitude']);
+
+  for (var id in altitudes) {
+    if (altitudes.hasOwnProperty(id)) {
+      data.addRow([parseInt(id) + 1, Math.round((altitudes[id] * factor_m))]);
+    }
   }
 
   var options = {
@@ -58,7 +60,7 @@ function displayChart() {
   chart = new google.visualization.LineChart(document.getElementById('chart'));
   chart.draw(data, options);
 
-  addChartEvent(chart);
+  addChartEvent(chart, data);
 }
 
 function toggleChart(i) {
@@ -80,7 +82,7 @@ function toggleChart(i) {
 
 function toggleChartLink() {
   var link = document.getElementById('altitudes');
-  if (altitudes.length > 1) {
+  if (Object.keys(altitudes).length > 1) {
     link.style.visibility = 'visible';
   } else {
     link.style.visibility = 'hidden';
@@ -145,7 +147,7 @@ function loadTrack(userid, trackid, update) {
   setLoader(title);
 }
 
-function parsePosition(p) {
+function parsePosition(p, id) {
   // read data
   var latitude = getNode(p, 'latitude');
   var longitude = getNode(p, 'longitude');
@@ -153,7 +155,7 @@ function parsePosition(p) {
   if (altitude != null) {
     altitude = parseInt(altitude);
     // save altitudes for chart
-    altitudes.push(altitude);
+    altitudes[id] = altitude;
   }
   var speed = getNode(p, 'speed'); // may be null
   if (speed != null) { speed = parseInt(speed); }