1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | <?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: <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, minZoom: 12, 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() ?> |