CSC220 Homework 6 Solution 2010
--D. Thiebaut 19:28, 5 November 2010 (UTC)
Solution for Homework #6
Contents
Option 1
- In this approach, the two files showMap.htm and outputKml.php have been replaced by one program, now called showMap.php.
- In order to better pass information from the database to GoogleMaps, and to go around the caching that GGeoXml implements, the program works in the following fashion:
- It gets the Id that the user is interested and saves it in the $Id variable
- It fetches a KML file from the database at that $Id
- It stores the KML contents in a local file that is stored in a subdirectory called uploads, which is world-writeable (not very secure solution!)
- The name of that local file is made random by adding a random number to it (before the ".kml" extension). This will force GoogleMaps to load it, as it will never have it in its cache. The filename is of the form "dft_399410603.kml".
- The name of the kml file is saved in a global array that stays on the server between sessions, and called $_SESSION. This is an easy way to pass the name of the random kml file from php to javascript.
- GoogleMaps loads the file from a URL pointing to our own Website.
- The source code is below:
<?php
// showMap.php
// D. Thiebaut
// Solution for Hw #6
// Nov. 2010
//
session_start(); // initialize access to the global array $_SESSION
?>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps API Example: GGeoXml KML Overlay</title>
<!-- =================================================================
J A V A S C R I P T
=================================================================
-->
<script src="http://maps.google.com/maps?file=api&v=2&key=xxxxxxxxxxxxxxxxxxx"
type="text/javascript"></script>
<script type="text/javascript">
var map;
var geoXml;
var toggleState = 1;
function initialize2() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById( "map_canvas" ) );
map.setCenter(new GLatLng( 42.32012788333333, -72.6431288999999 ), 11 );
map.setUIToDefault();
//map.addControl(new GLargeMapControl());
var exml;
exml = new EGeoXml( "exml", map, "uploads/dft.kml" );
exml.parse();
exml.show();
}
}
function initialize() {
if (GBrowserIsCompatible()) {
var url;
url = "http://cs.smith.edu/~220a/mysql/GoogleMaps/uploads/" + "<?php echo $_SESSION[ 'kmlFile' ];?>";
//alert( url );
geoXml = new GGeoXml( url );
map = new GMap2(document.getElementById( "map_canvas" ) );
map.setCenter(new GLatLng(42.32012788333333,-72.6431288999999), 11);
geoXml.gotoDefaultViewport( map );
map.setUIToDefault();
map.addControl(new GLargeMapControl());
map.addOverlay( geoXml );
}
}
function toggleMyKml() {
return;
if (toggleState == 1) {
map.removeOverlay(geoXml);
toggleState = 0;
} else {
map.addOverlay(geoXml);
toggleState = 1;
}
}
</script>
</head>
<?php
// ==================================================
// P H P
// ==================================================
//-----------------------------------------------------
// logit: logs information to a text file. Debugging
//-----------------------------------------------------
date_default_timezone_set( "America/New_York" );
function logit($msg){
$fp = fopen("log.txt","a+");
$msg = date("Y-m-d h:i:s a") . ": " . $msg;
fwrite($fp, $msg."\r\n");
fclose($fp);
}
//-----------------------------------------------------
//-----------------------------------------------------
function connectToMySql( ) {
include 'accessinfo.php';
$database = "220a_hw6";
//--- connect to mysql server ---
$link = mysql_connect( $hostName, $userName, $password );
if ( ! $link )
die( "Could not connect to server: " . $mysql_error() );
//--- select database ---
$database = "220a_hw6";
$db = mysql_select_db( $database, $link );
if ( ! $db )
die( "Could not connect to database " . $database . ": "
. mysql_error() );
return $link;
}
//-----------------------------------------------------
// getKml: get Kml file with Index $Id from database
//-----------------------------------------------------
function getKml( $link, $Id ) {
$query = sprintf( "SELECT `data` from `kmldata` WHERE `Id`='%s'", $Id );
$result = mysql_query( $query, $link );
if ( ! $result )
die( "Invalid query (" . $query . "): " . mysql_error() );
if ( $row = mysql_fetch_array( $result, MYSQL_NUM ) )
return $row[0];
return "";
}
// ---------------------------
// PROGRAM STARTS HERE!
// ---------------------------
$Id = $_REQUEST[ 'Id' ];
if ( ! isset( $Id ) ) {
//--- this must be the very first call. Just show the form ---
?>
<body>
<FORM ACTION="showMap3.php" METHOD="POST">
KML File Id: <INPUT TYPE="text" NAME="Id" VALUE="" SIZE="5"><br />
<INPUT TYPE="SUBMIT" VALUE="Show Map!">
</FORM>
</body>
</html>
<?php
}
else {
//--- the user has picked an Id...
logit( "Requested Id = $Id" );
//--- get kml data ---
$link = connectToMySql();
$kmlData = getKml( $link, $Id );
mysql_close( $link );
//--- store it to file with a random name ---
$fileName = sprintf( "dft_%d.kml", rand() );
//--- pass the $fileName to
$_SESSION[ 'kmlFile' ] = $fileName;
file_put_contents( "uploads/" . $fileName, $kmlData );
usleep( 300000 ); // wait 1/3 of a second to give the OS time to write the file
//--- open a body that loads up the map ---
?>
<body onload="initialize()">
<div id="map_canvas" style="width: 640px; height: 480px; float:left; border: 1px solid black;"></div>
</div>
<br clear="all"/>
<br/>
<FORM ACTION="showMap3.php" METHOD="POST">
KML File Id: <INPUT TYPE="text" NAME="Id" VALUE="" SIZE="5"><br />
<INPUT TYPE="SUBMIT" VALUE="Show Map!">
</FORM>
<br />
<input type="button" value="Toggle KML" onClick="toggleMyKml();" />
</body>
</html>
<?php
}
?>
