<?php

function connectdb()
{
 mysql_connect("location", "username", "password")
  or die("Error connecting to mysql: " . mysql_error());
 mysql_select_db('database')
  or die("Error connecting to database: " . mysql_error());
}
connectdb();

$table = 'test_1';
?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Heatmap</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
<script type='text/javascript' src='OpenLayers-2.10/lib/OpenLayers.js'></script>
    <script src="script/heatmap.js"></script>
    <script src="script/canvas-barrier.js"></script>

    <script type="text/javascript">
		var map;
        var vectorLayer;

        function init(){
            map = new OpenLayers.Map('heatmap');
            
            var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
                    "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
            map.addLayer(layer);
            
            map.setCenter(new OpenLayers.LonLat(4.492321,52.164898), 10);
            
            vectorLayer = new OpenLayers.Layer.Vector.HeatMap("HeatMap", {
                rendererOptions: {
                    // a radius of 20px looks good at this zoom-level
                    pointSize: 20 ,
                    heatMapWebWorkerPath: "../script/heatmap-webworker.js"
                    
                }
            });
            
            // create a few random points
            var points = [];
			
			<?php
			$result=mysql_query("SELECT longitude, latitude FROM ".$table." LIMIT 100");
			while($row=mysql_fetch_array($result))
			{ 
			echo "var point = new OpenLayers.Geometry.Point(".$row['longitude'].", ".$row['latitude'].");";
			echo "var pointFeature = new OpenLayers.Feature.Vector(point);";
			echo "points.push(pointFeature);";
			}
			?>
			
            vectorLayer.addFeatures(points);
               
            vectorLayer.events.register("renderProgress", null, function(event) {
                document.getElementById("progressBar").value = event.progress;   
                document.getElementById("progressBarFallback").innerHTML = event.progress; 
            });
            
            
            map.addLayer(vectorLayer);
        }
        
        function randomPoint() {
            var x = random(20, 480);
            var y = random(15, 240);
            var lonlat = map.getLonLatFromPixel(new OpenLayers.Pixel(x, y));
            
            return new OpenLayers.Geometry.Point(lonlat.lon, lonlat.lat);
        };

		

        
        function toggleUseWebWorkers() {
            vectorLayer.renderer.renderAsync = document.getElementById("useWebWorkers").checked;    
        }

    </script>
</head>

<body onload="init()">
<div id="wrapper">
	<div id="header">
	<a href="index.html"><img src="img/logo.png" border="0" style="float: left;"/></a>
	&nbsp; <font style="font-size:24px; color:white;">Stichting Wireless Leiden</font><br />
	&nbsp; <font style="font-size:46px; color:white;">Heatmap</font>
	</div>
	<div id="content">
	<h1>Info</h1><br />
	OpenLayers heatmap. Kan traag zijn met laden.
	Werkt misschien niet even goed met elke browser.<br />
	Query staat op LIMIT 100 om overload te voorkomen.
	</div>
	<div id="heatmap">
</div>
<div id="footer"> <a href="http://www.wirelessleiden.nl/">wirelessleiden.nl</a> </div>


</body>
</html>