<!doctype html>
<html>
<head>
<title>vtm-gdx</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!-- pixel and dpi are way too simple concepts for web devs, lets have css-pixels! 
		     definition is limited only by your imagination! -->
<!-- http://www.html5rocks.com/de/mobile/touch/ -->
<!-- http://www.quirksmode.org/mobile/viewports.html -->
<!-- http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html  -->
<!-- devicePixelRatio: http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/ -->
<meta name="viewport"
	content="width=device-width, initial-scale=1, user-scalable=no">

<link rel="stylesheet" type="text/css" href="default.css">

<script type="text/javascript">
	var mapconfig = {
		tilesource : "oscimap4",
		tileurl : "http://opensciencemap.org/tiles/vtm",
		zoom : 2,
		latitude : 0.0,
		longitude : 0.0,
		tileSize : 400
	}
	//background : "naturalearth"
</script>

</head>

<body oncontextmenu="return false;">
	<div id="credits">
		<a href="https://github.com/hjanetzek/vtm">Source</a> | map data © <a
			href="http://www.openstreemap.org">OpenStreetMap</a> contributors | <a
			href="http://www.opensciencemap.org">OpenScienceMap</a>
	</div>

	<div id="canvas-area"
		style="position: fixed; left: 0px; top: 0px; width: 100%; height: 100%;">
		<canvas id="map-canvas"></canvas>
	</div>

	<script type="text/Javascript">
		function canvasResize() {
			div = document.getElementById('canvas-area')
			canvas = document.getElementById('map-canvas')
			var w = div.scrollWidth;
			var h = div.scrollHeight;
			//console.log(div.clientHeight + " " + div.clientWidth)
			canvas.width = w;
			canvas.height = h;
			canvas.style.width = w + 'px';
			canvas.style.height = h + 'px';
		}
		canvasResize();
		window.addEventListener('resize', canvasResize, false);
	</script>
	<script type="text/javascript" src="VtmWebApp/js/_tessellate.js"></script>
	<script type="text/javascript" src="VtmWebApp/js/tessellate.js"></script>
	<script type="text/javascript" src="VtmWebApp/VtmWebApp.nocache.js"></script>

	<div id="search">
		<table>
			<tr>
				<td id="nameFieldContainer">
				<td id="sendButtonContainer">
			</tr>
			<tr>
				<td colspan="2" id="listContainer">
			</tr>
		</table>
	</div>
</body>
</html>