alanmclean/gist:8778421

## gistfile1.txt
<!doctype html>
<html lang="en">
<head>
<title>three.js - Jotunheimen</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
    body { margin: 0; overflow: hidden; }
</style>
</head>
<body>
<div id="webgl"></div>

<script type="text/javascript" src="../../../endofyear/three.js"></script>
<script type="text/javascript" src="../../../d3.v3.min.js"></script>
<script type="text/javascript">
  var posPoints = []
  var width  = window.innerWidth,
        height = window.innerHeight,
        terrainSize = 1, // 60 x 60 km
        heightFactor = terrainSize / 12;

var scene = new THREE.Scene();
    scene.add(new THREE.AmbientLight(0xffffff));

 var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 100);
    camera.position.set(0, -terrainSize / 2, terrainSize / 2);


var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);


        renderer.render(scene, camera);

var projection = d3.geo.transverseMercator()
        .translate([terrainSize / 2, terrainSize / 2])
        .scale(terrainSize * 106.4)
        .rotate([-9, 0, 0])


function translate(point) {
        return [point[0] - (terrainSize / 2), (terrainSize / 2) - point[1]];
    }

 document.getElementById('webgl').appendChild(renderer.domElement);

    // render();

    function render() {
        // controls.update();
        requestAnimationFrame(render);
        renderer.render(scene, camera);
    }


  var isCentered = false;

  d3.xml("steve.tcx", "application/xml", function(xml) {
    var geometry = new THREE.Geometry();
    var activity = xml.firstChild.getElementsByTagName('Activities')[0]
    var run = activity.getElementsByTagName('Activity')[0]
    var laps = run.getElementsByTagName("Lap")

    for(var i = 0, len = laps.length; i < len; i++){
      var lap = laps[i];
      var track = lap.getElementsByTagName('Track')[0]
      var points = track.getElementsByTagName("Trackpoint")

      for(var n = 0, lenN = points.length; n < lenN; n++){
        var point = points[n]

        var time = point.getElementsByTagName('Time')
        var elev = point.getElementsByTagName('AltitudeMeters')
        var distance = point.getElementsByTagName('DistanceMeters')
        var position = point.getElementsByTagName('Position')

        var hash = {}
        if (time.length == 1){
          hash.time = time[0].textContent
        }
        if (elev.length == 1){
          hash.elev = parseFloat(elev[0].textContent)
        }
        if(distance.length == 1){
          hash.distance = parseFloat(distance[0].textContent)
        }
        if(position.length > 0){
          lat = position[0].getElementsByTagName("LatitudeDegrees")[0].textContent
          lng = position[0].getElementsByTagName("LongitudeDegrees")[0].textContent
          hash.lat = parseFloat(lat)
          hash.lng = parseFloat(lng)

if (isCentered === false){
            projection.center([hash.lng, hash.lat])
            isCentered = true
          }

          coord = translate(projection([hash.lng, hash.lat]));


        }
          console.log(coord)

         geometry.vertices.push(new THREE.Vector3(coord[0], coord[1], 2));

        posPoints.push(hash)
      }

        var material = new THREE.LineBasicMaterial({
            color: 0x909090,
            linewidth: 5
        });

        var line = new THREE.Line(geometry, material);
        scene.add(line);


    }


  // d3.select("#chart")
  //   .selectAll("div")
  //   .data(xml.documentElement.getElementsByTagName("value"))
  //   .enter().append("div")
  //     .style("width", function(d) { return d.textContent * 10 + "px"; })
  //     .text(function(d) { return d.textContent; });
});
</script>

</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<title>three.js - Jotunheimen</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<style>
	body { margin: 0; overflow: hidden; }
	</style>
	</head>
	<body>
	<div id="webgl"></div>

	<script type="text/javascript" src="../../../endofyear/three.js"></script>
	<script type="text/javascript" src="../../../d3.v3.min.js"></script>
	<script type="text/javascript">
	var posPoints = []
	var width = window.innerWidth,
	height = window.innerHeight,
	terrainSize = 1, // 60 x 60 km
	heightFactor = terrainSize / 12;

	var scene = new THREE.Scene();
	scene.add(new THREE.AmbientLight(0xffffff));

	var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 100);
	camera.position.set(0, -terrainSize / 2, terrainSize / 2);


	var renderer = new THREE.WebGLRenderer();
	renderer.setSize(width, height);


	renderer.render(scene, camera);

	var projection = d3.geo.transverseMercator()
	.translate([terrainSize / 2, terrainSize / 2])
	.scale(terrainSize * 106.4)
	.rotate([-9, 0, 0])


	function translate(point) {
	return [point[0] - (terrainSize / 2), (terrainSize / 2) - point[1]];
	}

	document.getElementById('webgl').appendChild(renderer.domElement);

	// render();

	function render() {
	// controls.update();
	requestAnimationFrame(render);
	renderer.render(scene, camera);
	}


	var isCentered = false;

	d3.xml("steve.tcx", "application/xml", function(xml) {
	var geometry = new THREE.Geometry();
	var activity = xml.firstChild.getElementsByTagName('Activities')[0]
	var run = activity.getElementsByTagName('Activity')[0]
	var laps = run.getElementsByTagName("Lap")

	for(var i = 0, len = laps.length; i < len; i++){
	var lap = laps[i];
	var track = lap.getElementsByTagName('Track')[0]
	var points = track.getElementsByTagName("Trackpoint")

	for(var n = 0, lenN = points.length; n < lenN; n++){
	var point = points[n]

	var time = point.getElementsByTagName('Time')
	var elev = point.getElementsByTagName('AltitudeMeters')
	var distance = point.getElementsByTagName('DistanceMeters')
	var position = point.getElementsByTagName('Position')

	var hash = {}
	if (time.length == 1){
	hash.time = time[0].textContent
	}
	if (elev.length == 1){
	hash.elev = parseFloat(elev[0].textContent)
	}
	if(distance.length == 1){
	hash.distance = parseFloat(distance[0].textContent)
	}
	if(position.length > 0){
	lat = position[0].getElementsByTagName("LatitudeDegrees")[0].textContent
	lng = position[0].getElementsByTagName("LongitudeDegrees")[0].textContent
	hash.lat = parseFloat(lat)
	hash.lng = parseFloat(lng)

	if (isCentered === false){
	projection.center([hash.lng, hash.lat])
	isCentered = true
	}

	coord = translate(projection([hash.lng, hash.lat]));



	}
	console.log(coord)

	geometry.vertices.push(new THREE.Vector3(coord[0], coord[1], 2));

	posPoints.push(hash)
	}

	var material = new THREE.LineBasicMaterial({
	color: 0x909090,
	linewidth: 5
	});

	var line = new THREE.Line(geometry, material);
	scene.add(line);


	}


	// d3.select("#chart")
	// .selectAll("div")
	// .data(xml.documentElement.getElementsByTagName("value"))
	// .enter().append("div")
	// .style("width", function(d) { return d.textContent * 10 + "px"; })
	// .text(function(d) { return d.textContent; });
	});
	</script>

	</body>
	</html>