<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="css/ol.css" type="text/css">
    <link rel="stylesheet" href="css/bootstrap.css" type="text/css">
    <link rel="stylesheet" href="css/layout.css" type="text/css">
    <link rel="stylesheet" href="css/bootstrap-responsive.css" type="text/css">
    <title>Dynamic mapping example</title>
  </head>
  <body>
  	<img id="thephoto" src="images/spacer.png" width="640" height="480" style="position:absolute;top:20px;left:840px;z-index=100" />
  	<p id="thecaption" style="position:absolute;top:500px;left:1040px;z-index=100;font-size:24px"></p>
    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span12">
          <div id="map" class="map" style="position:relative;top:-40px;width:800px;height:640px">
			<div style="position:absolute;top:0px;left:0px;overflow:hidden;width:100%;height:100%;" class="ol-viewport">
			   <canvas height="100%" width="100%" class="ol-unselectable"></canvas>
			 </div>
		   </div>
		 </div>
	   </div>
	   <div class="row-fluid">
		 <div class="span12">
		   <div id="tags">dynamic-data</div>
		 </div>
	   </div>
    </div> 
    <div style="position:absolute;left:840px;top:540px">
		<?php
			//Connect To Database
			$hostname='localhost';
			$username='traveler';
			$password='password';
			$dbname='travel';
			$con = mysqli_connect($hostname,$username, $password) OR DIE ('Unable to connect to database!');
			mysqli_select_db($con, $dbname);
			$sql1="SELECT id, traveler FROM trip ORDER BY traveler";
			$result = mysqli_query($con, $sql1);
			while($row = mysqli_fetch_array($result)) {
				echo "<a href=mapit.php?id='".$row['id']."'>".$row['traveler']."</a><br/>";
			}
		?>
	</div>
	<div style="position:absolute;left:1100px;top:540px">
		Speed: <select id="speed">
			<option value="1000" selected="selected">1 second per leg</option>
			<option value="2000">2 seconds per leg</option>
			<option value="3000">3 seconds per leg</option>
			<option value="10000">10 seconds per leg</option>
		</select>
	</div>
	<div style="position:absolute;left:1100px;top:570px">
		Zoom Level: <select id="zoom" style="width:64px">
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<option value="5" selected="selected">5</option>
			<option value="6">6</option>
			<option value="7">7</option>
			<option value="8">8</option>
			<option value="9">9</option>
			<option value="10">10</option>
			<option value="11">11</option>
		</select>
	</div>
	<p id="trip_notes" style="position:absolute;left:1100px;top:600px;font-size:16px"></p>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/example-behaviour.js" type="text/javascript"></script>
    <script src="js/loader.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/ol.js"></script>
    <script type="text/javascript" src="js/dynamic-data.php?id=<?php echo $_REQUEST['id']; ?>"></script>
</body>
</html>