demodays.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Swiss Open Data Alps</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<link rel="stylesheet" type="text/css" href="res/main.css">
	</head>
	<body>
		<div class="help" id="helpbox">
			<button class="close" onclick="document.getElementById('helpbox').style.display = 'none';">&times;</button>
			Click and drag to turn, use your mousewheel to zoom
		</div>

		<div class="ghost" id="ghost" style="display:none">
			<a href="http://make.opendata.ch" target="_blank"><img src="res/okcon1.png"></a><br/>
			<a href="http://okcon.org" id="okcon" target="_blank"><img src="res/okcon2.png"></a>
		</div>
		
		<div class="legend" id="legendbox">
			<a href="http://make.opendata.ch/wiki/project:dataalps" target="_blank" style="float:left">
				<img src="res/opendata_logo2.png">
			</a>
			<a href="http://github.com/loleg/dataalps" target="_blank" style="float:right">
				<img src="res/github-256-black.png">
			</a>
			<div class="title">
				<span>Swiss Open Data Alps</span>
				<a href="http://demodays.org" target="_blank">#Demodays2013 Edition</a>
			</div>
			<div class="toolbar" style="display:inline-block">
				<span>
				<button class="maplabels">Labels</button>
				<button class="heatmap">Heatmap</button>
				<button class="heightmap">Heightmap</button>
				</span><span> <font size="4px">&#9817;</font>
				<a href="http://www.bfs.admin.ch/bfs/portal/de/index/themen/01.html" target="_blank">Population</a>:
				<button class="population radio" data-year="2013">2013</button>
				<button class="population radio" data-year="2023">2023</button>
				<button class="population radio" data-year="2033">2033</button>
				</span><span> <font size="4px">&#9839;</font>
				<a href="https://soundcloud.com/patsch/hafenplatz-basel" target="_blank">Soundscape</a>:
				<button class="audio on">Playing ...</button>
				</span>
			</div>
		</div>

		<div id="map" style="position:absolute;top:0px;left:0px;display:none"></div>
		
		<div class="labels" style="display:none"></div>

		<script src="lib/three/three.min.js"></script>
		<!--<script src="lib/three/libs/stats.min.js"></script>-->
		<script src="lib/three/controls/OrbitControls.js"></script>
		<script src="lib/three/Detector.js"></script>
		<script src="lib/three/ShaderTerrain.js"></script>
		
		<script src="lib/d3/d3.v2.js"></script>
		<script src="lib/d3/d3-threeD.js"></script>
		<script src="lib/fit-projection.js"></script>
		<script src="lib/ParticleEngine.js"></script>
	
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<script>window.jQuery || document.write('<script src="lib/jquery-1.9.1.min.js"><\/script>')</script>

		<script src="js/config.js"></script>
		<script src="js/heightmap.js"></script>
		<script src="js/render.js"></script>
		<script src="js/ui.js"></script>
		<script src="js/features.js"></script>
		<script src="js/data.js"></script>
		<script src="js/fireworks.js"></script>

		<!-- Demodays 2013 special edition -->
		<style>
			body { background-image:url(res/cow.png); }
			.title a { text-decoration:none; color:black; font-weight:bold; }
		</style>
		<script>
		/** Set up audio control */
		var audio = document.createElement( 'audio' );
		audio.src = 'res/hafenplatz.ogg';
		audio.style.opacity = 0;
		audio.controls = false;
		document.body.appendChild( audio );
		audio.play();

		$('button.audio').click(function() {
			if (audio.paused) {
				$(this).html('Playing ...').addClass('on');
				audio.play();
			} else {
				$(this).html('Paused.').removeClass('on');
				audio.pause();
			}
		});

		var deepole, deeflag;
		var deeflagTexture = THREE.ImageUtils.loadTexture("res/buenzli.png");
		setTimeout(function() {

			var pts = projectorGeom([7.9, 47.35]);		
			deepole = new THREE.Mesh(new THREE.CylinderGeometry(0.5,0.5,40), 
						new THREE.MeshBasicMaterial({ color: 0xff1111 }));
			deepole.overdraw = true;
			deepole.position.set(pts[0], 10, pts[1]);
			scene.add(deepole);

			var flag = new THREE.PlaneGeometry(14, 10);
			flag.computeBoundingBox();
			var bb = flag.boundingBox.min;
			flag.applyMatrix( new THREE.Matrix4().makeTranslation( bb.x, bb.y, bb.z ) );
			flag.computeBoundingBox();
			deeflag = new THREE.Mesh(flag,
						new THREE.MeshPhongMaterial( { color: 0xffffff, map: deeflagTexture } ))
			deeflag.material.side = THREE.DoubleSide;
			deeflag.material.opacity = 0.7;
			deeflag.material.transparent = false;
			deeflag.position.set(pts[0], 30, pts[1]);
			deeflag._rsteps = 0;
			scene.add(deeflag);

		}, 500);
		function animator() {
			if (typeof deeflag == 'undefined') return;
			if (deeflag._rsteps == 0) {
				deeflag._rspeed = (Math.random()*0.2)-0.1;
				deeflag._rsteps = parseInt(Math.random()*15);
			}
			deeflag.rotation.y += deeflag._rspeed;
			deeflag._rsteps--;
		}
		</script>
	</body>
</html>