| <html xmlns="http://www.w3.org/1999/xhtml"> | <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head> | <head> |
| <script src="openlayers/OpenLayers.js"></script> | <script src="openlayers/OpenLayers.js"></script> |
| <SCRIPT TYPE="text/javascript" SRC="OpenStreetMap.js"></SCRIPT> | <SCRIPT TYPE="text/javascript" SRC="OpenStreetMap.js"></SCRIPT> |
| <script type="text/javascript" src="jquery.1.3.2.min.js"></script> | <script type="text/javascript" src="jquery.1.3.2.min.js"></script> |
| <script type="text/javascript"> | <script type="text/javascript"> |
| function init() | function init() |
| { | { |
| // create the ol map object | // create the ol map object |
| var map = new OpenLayers.Map('map'); | var map = new OpenLayers.Map('map'); |
| var osmtiles = new OpenLayers.Layer.OSM("local", "http://127.0.0.1/tiles/${z}/${x}/${y}.png") | var osmtiles = new OpenLayers.Layer.OSM("local", "http://127.0.0.1/tiles/${z}/${x}/${y}.png") |
| // use http://open.atlas.free.fr/GMapsTransparenciesImgOver.php and http://code.google.com/p/googletilecutter/ to make tiles | // use http://open.atlas.free.fr/GMapsTransparenciesImgOver.php and http://code.google.com/p/googletilecutter/ to make tiles |
| markers = new OpenLayers.Layer.Markers("Between Stop Markers"); | markers = new OpenLayers.Layer.Markers("Between Stop Markers"); |
| <?php | <?php |
| $conn = pg_connect("dbname=bus user=postgres password=snmc"); | $conn = pg_connect("dbname=bus user=postgres password=snmc"); |
| if (!$conn) { | if (!$conn) { |
| echo "An error occured.\n"; | echo "An error occured.\n"; |
| exit; | exit; |
| } | } |
| $result_stops = pg_query($conn, "Select * FROM stops"); | $result_stops = pg_query($conn, "Select * FROM stops"); |
| while ($stop = pg_fetch_assoc($result_stops)) { | while ($stop = pg_fetch_assoc($result_stops)) { |
| echo 'marker = new OpenLayers.Marker(new OpenLayers.LonLat(' . ($stop['lng'] / 10000000) . "," . ($stop['lat'] / 10000000) . ') | echo 'marker = new OpenLayers.Marker(new OpenLayers.LonLat(' . ($stop['lng'] / 10000000) . "," . ($stop['lat'] / 10000000) . ') |
| .transform( | .transform( |
| new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984 | new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984 |
| new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection | new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection |
| ));'; | ));'; |
| echo ' | echo ' |
| marker.id="' . $stop['geohash'] . '"; | marker.id="' . $stop['geohash'] . '"; |
| markers.addMarker(marker); | markers.addMarker(marker); |
| marker.events.register("mousedown", marker, function() { | marker.events.register("mousedown", marker, function() { |
| document.getElementById("between_points").innerHTML += this.id+";"; | document.getElementById("between_points").innerHTML += this.id+";"; |
| }); | }); |
| '; | '; |
| } | } |
| ?> | ?> |
| var timeicon = new OpenLayers.Icon("http://maps.google.com/mapfiles/kml/pushpin/grn-pushpin.png",new OpenLayers.Size(32,32)); | var timeicon = new OpenLayers.Icon("http://maps.google.com/mapfiles/kml/pushpin/grn-pushpin.png",new OpenLayers.Size(32,32)); |
| var timepoints = new OpenLayers.Layer.GeoRSS("Timing Points", "displaytimepoints.georss.php", { icon: timeicon }); | var timepoints = new OpenLayers.Layer.GeoRSS("Timing Points", "displaytimepoints.georss.php", { icon: timeicon }); |
| map.addLayers([osmtiles, markers,timepoints]); | map.addLayers([osmtiles, markers,timepoints]); |
| map.addControl(new OpenLayers.Control.LayerSwitcher()); | map.addControl(new OpenLayers.Control.LayerSwitcher()); |
| map.zoomToExtent(markers.getDataExtent()); | map.zoomToExtent(markers.getDataExtent()); |
| } | } |
| </script> | </script> |
| <script type="text/javascript"> | <script type="text/javascript"> |
| function submitBetween () { | function submitBetween () { |
| $.post("betweenpoint.submit.php", $("#inputform").serialize(), function(html){ | $.post("betweenpoint.submit.php", $("#inputform").serialize(), function(html){ |
| $("#response").html(html); | $("#response").html(html); |
| //clearForms(); | //clearForms(); |
| return false; | return false; |
| }); | }); |
| }; | }; |
| function OnChange(dropdown) | function OnChange(dropdown) |
| { | { |
| var myindex = dropdown.selectedIndex | var myindex = dropdown.selectedIndex |
| var selValue = dropdown.options[myindex].value; | var selValue = dropdown.options[myindex].value; |
| $("#routes").val(selValue.split(":",2)[0]); | $("#routes").val(selValue.split(":",2)[0]); |
| fromto = selValue.split(":",2)[1]; | fromto = selValue.split(":",2)[1]; |
| $("#from").val(fromto.split("->",2)[0]); | $("#from").val(fromto.split("->",2)[0]); |
| $("#to").val(fromto.split("->",2)[1]); | $("#to").val(fromto.split("->",2)[1]); |
| document.getElementById("between_points").innerHTML = ""; | document.getElementById("between_points").innerHTML = ""; |
| return true; | return true; |
| } | } |
| // function will clear input elements on each form | // function will clear input elements on each form |
| function clearForms(){ | function clearForms(){ |
| document.getElementById("between_points").innerHTML = ""; | document.getElementById("between_points").innerHTML = ""; |
| // declare element type | // declare element type |
| var type = null; | var type = null; |
| // loop through forms on HTML page | // loop through forms on HTML page |
| for (var x=0; x<document.forms.length; x++){ | for (var x=0; x<document.forms.length; x++){ |
| // loop through each element on form | // loop through each element on form |
| for (var y=0; y<document.forms[x].elements.length; y++){ | for (var y=0; y<document.forms[x].elements.length; y++){ |
| // define element type | // define element type |
| type = document.forms[x].elements[y].type | type = document.forms[x].elements[y].type |
| // alert before erasing form element | // alert before erasing form element |
| //alert('form='+x+' element='+y+' type='+type); | //alert('form='+x+' element='+y+' type='+type); |
| // switch on element type | // switch on element type |
| switch(type){ | switch(type){ |
| case "text": | case "text": |
| case "textarea": | case "textarea": |
| case "password": | case "password": |
| //case "hidden": | //case "hidden": |
| document.forms[x].elements[y].value = ""; | document.forms[x].elements[y].value = ""; |
| break; | break; |
| case "radio": | case "radio": |
| case "checkbox": | case "checkbox": |
| document.forms[x].elements[y].checked = true; | document.forms[x].elements[y].checked = true; |
| break; | break; |
| case "select-one": | case "select-one": |
| document.forms[x].elements[y].options[0].selected = true; | document.forms[x].elements[y].options[0].selected = true; |
| break; | break; |
| case "select-multiple": | case "select-multiple": |
| for (z=0; z<document.forms[x].elements[y].options.length; z++){ | for (z=0; z<document.forms[x].elements[y].options.length; z++){ |
| document.forms[x].elements[y].options[z].selected = false; | document.forms[x].elements[y].options[z].selected = false; |
| } | } |
| break; | break; |
| } | } |
| } | } |
| } | } |
| } | } |
| </script> | </script> |
| </head> | </head> |
| <body onload="init()"> | <body onload="init()"> |
| <div id="inputpane"><form id="inputform"> | <div id="inputpane"><form id="inputform"> |
| <select name=selectPair onchange='OnChange(this.form.selectPair);'> | <select name=selectPair onchange='OnChange(this.form.selectPair);'> |
| <option>Select a from/to pair...</option> | <option>Select a from |