Fun with CGDI Services, OpenLayers and jQuery
For years in the CGDI, we’ve had various ‘common’ services; basic XML over HTTP / OGC-ish web services which allow a user to lookup and geocode based on different Canadian spatial identifiers, or keywords. In their first life (mid 1990s), these existed as embedded lookup tools to facilitate searching and publishing in the GeoConnections Discovery Portal (GDP), then called Canadian Earth Observation Network (CEONet).
CEONet started to publish reusable components (RUCs), which allowed a developer to create an HTML template with special tags to embed these RUCs so as to spatially enable their applications. Because of the JavaScript security model, the developer passed the template to the CEONet RUC server, which slurped the template and served it up from its own domain.
In both iterations, the backends were driven by database or HTML scrapes which outputted CSV-ish type output.
Since v3, (2001-ish) and the rise of Web Services, these RUCs became services themselves, thereby eliminating the need to go through GDP.
If I had a dime every time someone asked about middleware tools to be able to interact with these services, well….At any rate, the typical approach was as follows:
- setup HTML form with input parameters
- send request to middleware
- middleware invokes web services request, gets result, spits back HTML accordingly to the user
I’ve done these in many different languages. For awhile, one of our projects had bundled a spatial clients .war which Java developers can plop into their webapps.
These days, using OpenLayers and jQuery lets you develop light, interactive ways of accomplishing this without server side middleware. Trying this against the CGDI NTS Lookup Service provides a neat example:
<form id="ntsForm" action="javascript:zoomToNTS();">
<label for="nts">NTS Mapsheet:</label>
<input type="text" name="nts" id="nts" size="6" maxlength="6"/>
</form>
And now the JavaScript:
function zoomToNTS() {
// build request URL
url = '/mapbuilder/server/php/proxy.php?url=' + // simple proxy script
escape('http://geoservices.cgdi.ca/NTS/NTSLookup?') +
escape('version=1.1.0&request=GetMapsheet&mapsheet=') +
jQuery('input#nts').val();
// send and process result
jQuery.get(url,{},function(xml){
// get the bbox of the result
jQuery('gml\\:boundedBy',xml).each(function(i) {
c = jQuery(this).find('gml\\:coordinates').text().split(',');
map.zoomToExtent(new OpenLayers.Bounds(c[0], c[1], c[2], c[3]));
});
});
}
That’s it! That will get your OpenLayers map zoomed in based on the NTS boundaries. Notes:
- you’ll need a proxy script to deal with remote URLs
- you need to escape namespace’d XML elements/attributes per above, possibly wrapping into a function for reuse. Same goes for elements seperated with ‘.’ (like <foo.bar>)
Anyone have suggestions on improving the example above? Or any similar snippets? It would be nice to build up plugins like this for gazetteers, catalogs, and the like.
