Technologies Used: PHP 5, MySQL 4.1.2, JavaScript, JSON
Software Used: PHP Designer, Aptana, Firebug, Firefox
There are a wide variety of ways to handle JSON that is returned from a server. One of these methods is to provide a callback function pass it to the JSON emiting webservice via REST. When used with static or dynamic script tags, you are no longer restricted to Cross Site Scripting (XSS) limits requireing that the source be on the same server as your webpage. The XSS limit seems particularly ill-suited for mash-ups. The callback function method is what I have choosen for my examples. You will also see a static script tag for these examples. That is to simplify them and make them easier to read. The general preference is to use dynamic script tags rather than static ones.
Actual JSON string returned:
handleJSON({”Observations”:[{"Station":{"number":"1","lat":"29.5762","lon":"-98.7041","total_sp":"9","Species":[{"common":"Mourning Dove","number":"1","code":"MODO","scientific":"Zenaida macroura"},{"common":"Eastern Phoebe","number":"1","code":"EAPH","scientific":"Sayornis phoebe"},{"common":"Carolina Chickadee","number":"1","code":"CACH","scientific":"Poecile carolinensis"},{"common":"Black-crested Titmouse","number":"3","code":"BCTI","scientific":"Baeolophus atricristatus"},{"common":"Carolina Wren","number":"1","code":"CARW","scientific":"Thryothorus ludovicianus"},{"common":"Bewick's Wren","number":"2","code":"BEWR","scientific":"Thryomanes bewickii"},{"common":"Rufous-crowned Sparrow","number":"1","code":"RCSP","scientific":"Aimophila ruficeps"},{"common":"Northern Cardinal","number":"3","code":"NOCA","scientific":"Cardinalis cardinalis"},{"common":"Brown-headed Cowbird","number":"1","code":"BHCO","scientific":"Molothrus ater"}]}},{”Station”:{”number”:”2″,”lat”:”29.574″,”lon”:”-98.7036″,”total_sp”:”5″,”Species”:[{"common":"Black-crested Titmouse","number":"1","code":"BCTI","scientific":"Baeolophus atricristatus"},{"common":"Carolina Wren","number":"1","code":"CARW","scientific":"Thryothorus ludovicianus"},{"common":"Ruby-crowned Kinglet","number":"1","code":"RCKI","scientific":"Regulus calendula"},{"common":"Northern Cardinal","number":"1","code":"NOCA","scientific":"Cardinalis cardinalis"},{"common":"Brown-headed Cowbird","number":"1","code":"BHCO","scientific":"Molothrus ater"}]}}]});
It is not very human readable, but it is highly machine readable.
Below is an extremely simple example of handling JSON and doing something with it.
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1″ />
<title>Simple JSON Handling</title>
<script type=”text/javascript” charset=”utf-8″>
function showCoords(jsd){
var lat = jsd.Observations[0].Station.lat;
var lon = jsd.Observations[0].Station.lon;
var msg = ‘Lat:’ + lat + ‘, Lon:’ + lon;
alert(msg);
}
</script>
</head>
<body>
<script src=http://www.plateauwildlife.com/bbc-mgmt/getstations.php?action=getdata&cid=2&year=2006&func=showCoords type=”text/javascript” charset=”utf-8″></script>
</body>
</html>
See It In Action
The above example is not particulalry usefull for anything other than demostration purposes. We want to actually DO something with our JSON to move us closer to creating the actual mashup. The number thing which I intially strugled with when using JSON & callback functions was that you MUST define the callback function BEFORE your dynamic or static script tag.
Google Maps, Google Earth, Yahoo Maps, and Virtual Earth all take HTML for the contents of the info window when you rollover or click on a point.
ArcWeb Explorer (AWX), however doesn’t take HTML as info window content. AWX does take styled text, videos, picture, audio, & swf for info window content. To this end, if you want to embed rich non-HTML content, AWX allows for some extremelly interesting content to be blended together and presented with great ease. The documentation for text styling is lacking, so creating simple content is actually more dificult in this platform than the others.
I’ve created a javascript file which we can reference in any of the HTML docs that actually embed the mashup.
This file contains
- The main callback function
- A function which builds an array of HTML tables containing the formated results from each station
- A function which builds an array of jscript strings containg the weakly formated results from each station
See The HTML Builder In Action
//A global variable to assign the parsed JSON to
var jsobj;
//Main Callback handler.
//simple assignment to a global variable allows me to reuse and pass
//around the object without any server trips
function handleJSON(reply){
jsobj=reply;
}
function buildHTML(Observations){
var info_win = new Array();
// Build a table element with Station number & total species observed
for(var i=0;i<Observations.length;i++){
str = ‘<table border=”1″><tbody><tr class=”station”>’;
str += ‘<td colspan=”2″>Station ‘+ Observations[i].Station.number + ‘</td></tr>’;
str += ‘<tr class=”sta_total”><td colspan=”2″>Total Species - ‘ + Observations[i].Station.total_sp + ‘</td></tr>’;
str += ‘<tr class=”obs_header”><td>Species</td><td>Number</td></tr>’;
var details = “”;
var arr = new Array();
// assign each Species array to a local variable to reduce typing & increase readibility
//build an string of <tr> elements containing the details of species observed
arr = Observations[i].Station.Species;
for (var y=0;y<arr.length;y++){
details+=‘<tr class=”obs_detail”><td><a href=”http://www.google.com/search?q=%22′;
details += arr[y].scientific.replace(/\s/,“+”);
details += ‘%22″>’ + arr[y].common + ‘ (’ + arr[y].code + ‘)</a></td>’;
details += ‘<td>’ + arr[y].number + ‘</td></tr>’;
}
str += details;
str += ‘</table></tr></tbody></table>’;
//add table element to array of table element html strings
info_win[i]=str;
}
return info_win;
}
function buildAWXtxt(Observations){
var info_win = new Array();
// Build a formated text list for each Station number & total species observed
for(var i=0;i<Observations.length;i++){
str = ‘Station ‘ + Observations[i].Station.number + ‘\n’;
str += ‘Total Species - ‘ + Observations[i].Station.total_sp + ‘\n’;
str += ‘Species Number’;
var details = new Array();
// assign each Species array to a local variable to reduce typing & increase readibility
//build an array formatted text data elements containing the details of species observed
//using this convention, we can assign a url property to each species line
//through .data{elements[]} in the properties for each marker
arr = Observations[i].Station.Species;
for (var y=0;y<arr.length;y++){
details[y] = arr[y].common + ‘ (’ + arr[y].code + ‘) - ‘ + arr[y].number + ‘\n’;
}
var obs_info = new Array([str,details]);
//
//add table element to array of table element html strings
info_win[i]=obs_info;
}
return info_win;
}
Previous Parts
1. Emit JSON
Next Parts
3. Arcweb Explorer Mashup
4. Yahoo Maps Mashup
5. Virtual Earth Mashup
6. Google Maps Mashup
. However, now there is a direct correlation between my billable hours and food on our table. Suddenly tracking, targeting, and making goals for billable hours/work no longer seems cheap & tawdry but rather vital & important. To ensure that I am accountable, my wife is helping set my billable work goals & tracking them. To motivate us, if I hit my billable work goals every week in the month, we get a date night. With a 6 month old & a 4 year old, that’s pretty good motivation.
do not neccessarily result in faster performance over the web, while they take 5 times as long to produce & take up significantly more storage space than large ones (512×512). Test to make sure performance improvement is worth the extra effort. Use the largeest tiel size you can.
Recent Comments