Property Mapping

paul.ingram — Mon, 16 Feb 2009 13:19:06 +0000

When it comes to online mapping, and in many other web applications, Google is by far the biggest player. Inevitably, there are alternatives out there – most notably Microsoft’s Virtual Earth, which features a startlingly good birds eye view whereby the land is viewable at an angle from just above the buildings, allowing one an impressive 3D view of an area.

However, due to there being no need for a commercial license, and the superior amount of support available (including the excellent Mike Williams tutorials), we at Kaweb plumped for Google Maps for our new service, mappr.

The service will be primarily used to plot estate agents’ properties on a map, allowing potential homebuyers to see what real estate is available in a given area. The aims of the project were:

Automatic geocoding from postcode data in order to plot the markers
Summarise property info in a panel rather than the default info bubble
Real-time updating on map movement or criteria change

Automatic Geocoding

Geocoding is simply the process of turning an address into a set of latitude-longtude co-ordinates. In the case of property, we intended to essentially convert the postcode into co-ordinates, to be stored in the database. However, due to the Royal Mail’s copyright, this requires payment. There are attempts at an open database, though this remains incomplete.

Google do offer a free geocoding service via their Maps API but the UK results are somewhat variable, over a mile off in some instances. The solution was somewhat surprising – simply use another of Google’s APIs – the AJAX Search API, in Local Search mode. Using the REST interface, we were able to retrieve accurate JSON-encoded data that was simply parsed and stored. Example PHP code:

$postcode = 'WS13 6TJ';
$url = "http://ajax.googleapis.com/ajax/services/search/local?v=1.0&q=".urlencode($postcode);

// Note how referrer is set manually
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_REFERER, "http://www.kaweb.co.uk/");
$body = curl_exec($ch);
curl_close($ch);

// Now, process the JSON string
$json = json_decode($body);

// Latitude: $json->responseData->results[0]->lat
// Longitude: $json->responseData->results[0]->lng

Display summary panel on click

Rather than use the native information bubble GInfoWindow, which we felt was rather uninspiring, we wanted to display a semi-transparent panel overlaid on the map. The key to this was to inject the HTML into the map’s holding div once the map content had been loaded. For example, using the markup below as the document’s starting HTML would mean anything within the “map” div (i.e. mappr_panel) gets overlaid when the map is rendered.

Panel Contents

Instead, we used our Javascript framework of choice, jQuery, in conjunction with a marker click listener.

// Create a marker called our_marker here
Event.addListener(our_marker, 'click', function(){
var contents = 'Marker ID: ' + our_marker.id;
show_panel(contents);

}); function show_panel(contents){


var panel = '

\
' + contents + ' \
<\/div>';

$('#map').append(panel); // Puts the panel div inside the map div...

NOTE: jQuery’s remove() function was then used when we wanted to hide this panel.

Real-time updating on map change or criteria change

We needed the map to reload properties (incidentally we used an AJAX approach) and redraw following either a map movement (e.g. zoom, pan), or a change in search criteria.

The first was a simple case of :

GEvent.addListener(map, 'moveend', redraw_map); // Call redraw_map() on drag / pan / zoom end

The second however, required the function to be triggered following a form change. Again, jQuery was used. By simply including class="onchange" on form elements that may change, we could harness jQuery’s selector syntax to actually apply the onchange event.

$(document).ready( function(){
$('.onchange').change(redraw_map);
}

The finished product can be seen by performing a map search at http://www.chartex.co.uk.