AJAX Web Mapping Template | Fuzzy Tolerance

OK, template may be a bit of a strong word. Let’s call it “example” instead.

I’ve decided I’m not a bit fan of templates. I decided this after I downloaded another mapping site template to steal some code.

All I wanted was the code behind one little, itty bitty button. The problem was, that code was metaphysically linked to everything else in a monstrous template, and after parsing through a dozen php and javascript files…..I lost interest. The thrill was gone.

I appreciate all of the hard work that goes in to some of these template sites, but I never want to deploy one of those suckers. I just want to steal some code here and there. I really need examples more than templates. But I digress.

You might remember the much ballyhooed A Mapping Site in 19 Lines of Code. I republished that zip file (found here) with an AJAX addition.

Basically, we have three new files we didn’t have before. Our client-facing file is default2.php (default.php is our old example). We also have two additional files that will only be seen by the server - xajax.common.php and xajax.server.php.

From a coding standpoint, AJAX isn’t as fun as a barrel full of monkeys. It’s ugly Javascript. That’s why there are a whole bunch of toolkits blossoming around AJAX - to take some of the pain away for the developer.

XAJAX is one such toolkit for PHP, and having used it for a production site, I have to say I like it a lot. Let’s take a look at what we do to make it work.

First, take a look at xajax.server.php. It is basically the code we used in the non-AJAX example put in to a function (createMap). Just before that, we have two other lines of code:

require(“xajax.common.php”);
$xajax->processRequests();

We’re including xajax.common.php (we’ll get to that in a minute). Then we’re telling the XAJAX object we instantiated in xajax.common.php to process requests.

There are a couple of key things to note in the function that are different than what we had before. First, the funciton is getting the argument $aFormValues. This holds all of the form values from our client-side page. For example, we can read the value of the hidden form field extent by looking at $aFormValues[“extent”].

Now let’s look at this:

$objResponse = new xajaxResponse();

The $objResponse object is going to send all of our information back to the client page. You can replace almost anything on the page - the text inside DIV’s, images, etc. You can also run javascript, append things - there are a whole lot of options. Here, we are telling the client page to replace the map image with the new one we just created:

$objResponse->addAssign(“mapa”, “src”, $image_url);

Next, check out xajax.common.php. There’s not much to this one. We insert the xajax class include and reference the xajax.server.php file. Then we register the functions we want to be available to AJAX requests. There might be 20 functions in your xajax.server.php file, but only the ones registered with XAJAX will be availble for asynchronous queries.

Finally, take a look at our client page, default2.php. We include the xajax.common.php page, and then we get one of these:

$xajax->printJavascript(‘xajax/‘);

This creates all of the client-side javascript need to send AJAX requests and process the return. No icky Javascript from us (phew!). XAJAX takes care of that.

The rest is fairly similar to what we had before, with one exception. As this is an asychronous page, we don’t use form submits (which would refresh the page). Instead, you’ll see things like this:

xajax_createMap(xajax.getFormValues(‘formMap’))

This is the createMap function we registered with XAJAX. It’s calling the function and passing it the values of our formMap form.

Aside from a little extra javascript to handle finding the X and Y coordinates of the mouse click across various browsers, viola, that’s it in a nutshell. If you have MapServer setup as we’ve talked about before, you now have a functioning AJAX mapping site. It’s a little more than our 19 lines of code, but the user experience is more desktop-like, the page never refreshes, the server does less work, the client machine does less work, and less information passes over the network.

I hope that gives you some ideas about what you can do with AJAX and mapping sites, and how easy it can be with a good toolkit. If you’re in to PHP and you’re looking for a good AJAX toolkit, I highly recommend XAJAX. This example didn’t scratch the surface of what XAJAX can do.

Good luck!