Hey Folks,
So... faced with the challenge of how to elegantly display query results on
top of a google map (queries from assorted data services, such as geonames,
etc), I settled on jGrowl. The look was right, the controls were right...
just a few things I needed to tweak. I figured I'd post the problems and
solutions in case they're of use to anyone, and in hopes that if someone
knows of a better way to accomplish the same, they might offer advice, as
I'm still rather new to all of this.
So...
0) Retarget jGrowl towards a customDiv with customJGClass. customJGClass is
then positioned overtop the map.
1) We need to limit how much space jGrowl can take up on the map. Overflow
could work, but is awkward, ugly, or inelegant. Better would be if we
simply limit the number of Growls that can appear in the customDiv jGrowl.
To do this, we use jGrowl's beforeOpen function as follows.
var checkGrowlLimit= function (e,m,o) {
var queryResultsObj =this.find('.jGrowl-notification').slice(1); //
skip the spaceholder
if (queryResultsObj.length > (o.maxGrowls || 6) ) {
queryResultsObj.eq(0).children('div.close').unbind('click.jGrowl').parent().remove();
}
}
and use jQuery('#customDiv').jGrowl('A
message!',{sticky:true,beforeOpen:checkGrowlLimit});
This also supports adding a new option of maxGrowls.
Problems:
* If we try to make that a while loop, such that setting maxGrowls of 2
would prune away the extra additional growls... it crashes FF3. I'm sure
theres an obvious reason why, but I'm missing it.
* We can't support animation on the checkGrowlLimit, because if we used the
closing animations, then spamming the Growler would result in the same growl
being targetted for destruction multiple times... in other words, we could
spam past the limit.
2) However, some of these jsonp queries are multi tiered and take 30-40
seconds. (Parcel queries, through a geoserver web feature server... first
we query a parcel status layer, response determines if there is data, and if
so, where we should look for it). Thats entirely too long to go without
showing the user that something is actually happening. Therefore, we'd like
to show a message or spinner of some brand or another in a Growl, and then
replace it with our data, once the json arrives.
But how can we target a specific Growl? To do this, we will make use of the
jGrowl's theme options. Setting a theme simply sets a class for the jGrowl.
id might be better, but I don't know of any way to set the id of a Growl,
so we'll have to make do with class.
function queryWithFeedback() {
var d = new Date();
var constant = 'arbClass_' +d.getTime() ;
....
..... {sticky:true,beforeOpen:checkGrowlLimit,theme:constant + ' default'}
makes for a reliably unique class.
After that, once our final query returns, we just declare the growl once,
and then
jQuery('#customDiv').find('.'+constant).find('.message').text('Our
new message!');
Problems
* close and beforeClose will use the original message rather than the new
one.
In any case, those are the tweaks. They work, but I suspect there are
better ways of handling the issues, and would welcome any feedback/advice.
Thanks!
Josh
