Postcode Widget – Part 3


August 25, 2008

You can see a prototype version of the widget by clicking here.

Template engine

I attempted this built as single piece of php but it quickly became obvious that this was not the right approach. Instead I adapted a simple template engine from my faithful O’Reilly book. This allowed me to separate the logic from the markup

function FillTemplate($inName, $inValues = array()){

	$theTemplateFile = $_SERVER['DOCUMENT_ROOT'].'/templates/'.$inName;
	if($theFile = fopen($theTemplateFile, 'r')){
		$theTemplate = fread($theFile, filesize($theTemplateFile));
		fclose($theFile);
	}
	$theKeys = array_keys($inValues);
	foreach($theKeys as $theKey){
		$theTemplate = str_replace("\{$theKey}",$inValues[$theKey],$theTemplate);
	}

	return $theTemplate;
}

Map Logic

Here’s the source for the Map Logic. As an attempt to make the script secure you can see I’ve used a UK Postcode Regex from Stuart Wade to validate the form input. And also mysql_real_escape_string() on any database calls.

Any security tips would be greatly appreciated

The Map Logic uses four separate templates to handle the interaction, and the error state.

<?php
//Pin counter
connectDB();
$result = mysql_query("SELECT * FROM mapPins");
$num_rows = mysql_num_rows($result);
$bindings['PINCOUNT'] = $num_rows;

//Place Pins
$pinQuery = "SELECT Latitude,Longitude FROM mapPins";
$pinArray = mysql_query($pinQuery)or die('Query failed: '.mysql_error());
$pinCode="";
while ($row = mysql_fetch_array($pinArray, MYSQL_NUM)) {;
	$i++;
	$pinCode .="var latlng$i = new GLatLng($row[0] ,$row[1] );";
	$pinCode .="map.addOverlay(new GMarker(latlng$i));";
}
$bindings['MAPPINS'] = $pinCode;

$bindings['DESTINATION'] = $PHP_SELF;

function centerFromDB($postcode){
	//Connect to the database
	connectDB();
	//Convert the Postcode to all uppercase
	$postcode = strtoupper($postcode);

	//Break the Postcode into array
	$postcode = explode(' ', $postcode);

	//Pull out the relevant fields from our database
	$query = "SELECT Latitude,Longitude FROM postcodes WHERE Pcode= '$postcode[0]'";
	$result = mysql_query($query) or die('Query failed: '.mysql_error());
	return mysql_fetch_array($result, MYSQL_ASSOC);

}

if (isset($_POST['submitPostCode']) & $_POST['code']!="") {
	if(eregi("^([A-PR-UWYZ0-9][A-HK-Y0-9][AEHMNPRTVXY0-9]?[ABEHMNPRVWXY0-9]? {1,2}[0-9][ABD-HJLN-UW-Z]{2}|GIR 0AA)$",mysql_real_escape_string($_POST['code']))){
		$line = centerFromDB(mysql_real_escape_string($_POST['code']));

		//Grab the Postcode from the form
		$postcode = mysql_real_escape_string($_POST['code']);

		//Uppercase
		$postcode = strtoupper($postcode);

		//Break the Postcode into array
		$postcode = explode(' ', $postcode);

		//Output Results
		$bindings['INITIALCENTER'] = "var center = new GLatLng(".$line['Latitude'].", ".$line['Longitude'].");";
		$bindings['OUTCODE'] = $postcode[0];
		$bindings['SECONDHALF'] = $postcode[1];

		$template = "map02.template";
	}else{

		$template = "mapError.template";
	}
}elseif(isset($_POST['plotPoints'])){

	$outCode = mysql_real_escape_string($_GET['outCode']);
	$secondHalf = mysql_real_escape_string($_GET['secondHalf']);
	$mapLat = mysql_real_escape_string($_GET['mapLat']);
	$mapLng = mysql_real_escape_string($_GET['mapLng']);
	$today = date("Y-m-d");

	$line = centerFromDB($outCode.' '.$secondHalf);
	//connect to db
	connectDB();

	//add point to db
	mysql_query("INSERT INTO mapPins (outCode, secondHalf, Latitude, Longitude, theDate) VALUES('$outCode', '$secondHalf', '$mapLat', '$mapLng', '$today') ") or die(mysql_error()); 

	$pinQuery = "SELECT Latitude,Longitude FROM mapPins WHERE outCode='$outCode' AND secondHalf='$secondHalf'";
	$pinArray = mysql_query($pinQuery)or die('Query failed: '.mysql_error());

	$pinCode="";
	while ($row = mysql_fetch_array($pinArray, MYSQL_NUM)) {;
		$i++;
		$pinCode .="var latlng$i = new GLatLng($row[0] ,$row[1] );";
		$pinCode .="map.addOverlay(new GMarker(latlng$i));";
	}
	//new
	$bindings['CURRENTPC'] = $outCode.' '.$secondHalf;
	$bindings['MAPPINS'] = $pinCode;
	$bindings['NEWCENTER'] = "var center = new GLatLng(".$line['Latitude'].", ".$line['Longitude'].");";

	$template = "map03.template";
}else{

	$template = "map01.template";

}

echo FillTemplate($template, $bindings);
?>

Integrating script with WordPress

After developing this script I discovered that WordPress can’t run PHP in the body of a post without a plugin. Strange. So I had to put the prototype on a loose page.

Take a look at the trick I used to capture the output of a WordPress tag so I could incorporate it into Map Logic, and then my templates. In this example I captured the footer code, then bound it to a template tag.

<?php
require('./wp-blog-header.php');
ob_start();
get_footer();
$footer = ob_get_contents();
ob_end_clean();
$bindings['FOOTER'] = $footer;
?>

Google Badge Map


August 2, 2008

Click here to see a working version

Here’s an experimental Google map made using some excellent software from UCL Centre for Advanced Spacial Analaysis (Casa). The application slices up a large digital image – the one used here is 8000 x 8000px 30mb into a 256 x 256 pixel tiles (you might have noticed the how the map image builds up from these unit blocks).

The tiles correspond to the magnification of the map. At the lowest level the entire image is contained within a single 256 pixel square repeated left and right – this is the maps initial state. As you zoom in the tile samples are closer to the original image resolution.

The plan for the map is to lay a data layer on top of the map corresponding to each individual badge. This will hook up to the eBay API so when it comes time to sell the badges we can see a live data feed.

References:

Casa
http://www.casa.ucl.ac.uk/software/googlemapimagecutter.asp

Tags: , , , ,

Postcode Widget – Part 1


July 31, 2008

Background

After playing around with Google maps for a few days it became apparent that having a list of UK postcodes plus the corresponding latitude and longitude to each would come in very handy for a lot of people. If you had such a thing you could build loads of exciting applications, from route planning to food mile calculators.

The problem is that here in the UK the list doesn’t exist in the public domain. It’s available from the Post Office, but it’ll cost you, making it effectively useless for most small groups and enterprises.

What’s currently available from Easypeasy is the first half of the code. With this you can break the UK into about 3,000 separate parts, narrowing a location to within a few kilometres.

Project Brief

There appear to be two groups pushing the Postcode into the public domain, Free the Postcode and New Popular Edition Maps.

What I’d like to do is build a widget that people can put on their website that makes it easy for the general public to enter their Postcode, and help build the free database. Currently you are required to specifically visit either of the two website and with Free the Postcode know by heart your latitude and longitude.

Using the Google Map API combined with the first half of the postcode the widget would pull up a map of your local area, from here it’s easy to stick a pin where you live or work, and then after (an email?) authentication your postcode is added to the database.

References

Free the Postcode: www.freethepostcode.org

New Popular Edition Maps: www.npemap.org.uk

Postcode Schema: www.govtalk.gov.uk/gdsc/html/frames/PostCode.htm

Easypeasy: www.easypeasy.com/guides/article.php?article=64