Bus Stop density heatmap
[busui.git] / labs / busstopdensity.php
blob:a/labs/busstopdensity.php -> blob:b/labs/busstopdensity.php
--- a/labs/busstopdensity.php
+++ b/labs/busstopdensity.php
@@ -1,1 +1,77 @@
+<?php
+include ('../include/common.inc.php');
+//include_header("Bus Stop Density", "busstopdensity")
+?>
 
+<style type="text/css">
+
+			#map_container{
+				width:100%;
+				height:100%;
+			}
+			#status, #legend {
+				background-color: #eeeeee;
+				padding: 3px 5px 3px 5px;
+				opacity: .9;
+			}
+		</style>
+	
+		<div id="map_container"></div>
+			<div id="status">
+			Status:&nbsp; <span id="log"> <img alt="progess bar" src="progress_bar.gif" width="150" height="16"/></span>
+		</div>
+		<script type="text/javascript" src="http://www.google.com/jsapi?autoload={%22modules%22:[{%22name%22:%22maps%22,version:3,other_params:%22sensor=false%22},{%22name%22:%22jquery%22,%22version%22:%221.4.2%22}]}"></script>
+		<script type="text/javascript">
+		//<![CDATA[
+		//Google Map API v3
+		
+		var googleMap = null;
+		var previousPos = null;
+
+		$(function($){//Called when page is loaded
+			googleMap = new google.maps.Map(document.getElementById("map_container"), {
+				zoom: 17, 
+				center: new google.maps.LatLng(-35.25,149.125), 
+				mapTypeId: google.maps.MapTypeId.SATELLITE});
+			//Set status bar
+			googleMap.controls[google.maps.ControlPosition.TOP_LEFT].push($("#status").get(0));
+			//Set legend
+			googleMap.controls[google.maps.ControlPosition.BOTTOM_LEFT].push($("#legend").get(0));
+
+			google.maps.event.addListener(googleMap, "zoom_changed", function(){
+				google.maps.event.trigger(googleMap, "mousemove", previousPos);
+			});//onzoomend
+				
+			//Add a listener when mouse moves
+			google.maps.event.addListener(googleMap, "mousemove", function(event){
+				var latLng = event.latLng;
+				var xy = googleMap.getProjection().fromLatLngToPoint(latLng);
+				var ratio = Math.pow(2,googleMap.getZoom());
+				$("#log").html("Zoom:" + googleMap.getZoom() + " WGS84:(" + latLng.lat().toFixed(5) + ", " + latLng.lng().toFixed(5) + ") Px:(" + Math.floor(xy.x * ratio)  + "," + Math.floor(xy.y *ratio) + ")");
+				previousPos = event;
+			});//onmouseover
+
+			//Add a listener when mouse leaves the map area
+			google.maps.event.addListener(googleMap, "mouseout", function(event){
+				$("#log").html("");
+			});//onmouseout
+
+			//Add tile overlay
+			var myOverlay = new google.maps.ImageMapType({
+				getTileUrl: function(coord, zoom) {
+					return 'busstopdensity.tile.php?x=' + coord.x + '&y=' + coord.y + '&zoom=' +zoom;
+				},
+				tileSize: new google.maps.Size(256, 256),
+				isPng: true,
+				opacity:1.0
+			});
+			googleMap.overlayMapTypes.insertAt(0, myOverlay);
+			$("#log").html("Map loaded!");
+		});//onload
+		//]]>
+		</script>
+<?php
+include_footer()
+?>
+        
+