They look simple enough, you use them to display certain attributes when your mouse pointer is over a feature. But what some may not realise is how these tooltips are implemented in the AJAX (or Fusion) viewer.
These tooltips are implemented in the viewer as HTML div containers. What this means is that given some knowledge of basic HTML, you can create some really cool and powerful tooltips.
Case in point, I present to you exhibit A:
(from the SpokaneMaps.com MapGuide Application)
The HTML for this tooltip would be something similar to this (image only, I gave up on trying to escape markup in blogger):
Suppose we want to represent the values of RYEAR, GEOEXTRA and RBLDGVC in a pie chart (I know this probably makes no sense from a reporting perspective, it's just for the sake of argument)
The tooltip expression for the Parcels layer would be something like:
When we now put our mouse over a Parcel, this is what we get:
Pretty cool eh? So now you may be thinking, how far can I take this?
If you know your HTML, you know that there is an element called IFRAME. Short for Inline Frame, this element allows you to "embed" other web content inside the iframe element. What this means is that, armed with the knowledge of iframes and MapGuide expressions, you can embed almost anything inside your tooltip!
I'll leave this to your imagination. But before you go too crazy on tooltips, just remember that the tooltip will always be following the mouse pointer, so it's kind of pointless to put HTML content that requires user input in there (like forms or buttons)
Happy tooltipping!
The HTML for this tooltip would be something similar to this (image only, I gave up on trying to escape markup in blogger):
In MapGuide Studio/Maestro this would translate as something like (image only for the same reasons):
It might look incredibly complex, but what that expression is basically doing is stringing together multiple fragments of HTML with specific feature class attributes. It's a bit cumbersome to have to use so many nested concat() calls, but the Expression Editor in MapGuide Studio can really help you here. It is also worth noting that there is going to be a cleaner concat() function in the near future, so until then this is the only way to do it.
Here's a practical example.
Google offers a free API that lets you generate dynamic charts and graphs all from a simple url. This graph below is one such example (right click and view the page source if you want)
This chart is basically a HTML img tag with the following url:
http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=HelloWorld
If you study the url carefully, you'll see that there is a parameter asking for the values to be charted, and another parameter asking for the labels for these charted values. Now consider the Parcels layer of the Sheboygan sample dataset:
Here's a practical example.
Google offers a free API that lets you generate dynamic charts and graphs all from a simple url. This graph below is one such example (right click and view the page source if you want)
This chart is basically a HTML img tag with the following url:
http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250x100&chl=HelloWorld
If you study the url carefully, you'll see that there is a parameter asking for the values to be charted, and another parameter asking for the labels for these charted values. Now consider the Parcels layer of the Sheboygan sample dataset:
Suppose we want to represent the values of RYEAR, GEOEXTRA and RBLDGVC in a pie chart (I know this probably makes no sense from a reporting perspective, it's just for the sake of argument)
The tooltip expression for the Parcels layer would be something like:
When we now put our mouse over a Parcel, this is what we get:
Pretty cool eh? So now you may be thinking, how far can I take this?
If you know your HTML, you know that there is an element called IFRAME. Short for Inline Frame, this element allows you to "embed" other web content inside the iframe element. What this means is that, armed with the knowledge of iframes and MapGuide expressions, you can embed almost anything inside your tooltip!
I'll leave this to your imagination. But before you go too crazy on tooltips, just remember that the tooltip will always be following the mouse pointer, so it's kind of pointless to put HTML content that requires user input in there (like forms or buttons)
Happy tooltipping!
Update (19 August): Fixed the 2nd code image
Posts
16 comments:
A very useful and timely post for me, with one problem that the second code image (for mapguide studio) showing (I assume) the concat function, isn't readable- it's too small, even when you click on it and display in a new page. Is there any chance you could post a clearer version?
Thanks
Jo
Hmmm, I'll replace that image when I have time. Thanks for the heads up.
2nd image is too small, and the link is broken or something like that, can you re-post the 2nd image? it would be great!!!
your blog is amazing, i am learning so much!
v.bellini
buenos aires, argentina
I've updated the 2nd image. Should be much clearer now.
A litte tool helping to generate the correct concat() string from html. Hope it helps.
http://geographic-information-systems.blogspot.com/2009/09/mapguide-tooltip-tool.html
I have the pic up in tool tip, but every time when I try to click the image(mouse moves) the tool tip will disppear, can you make the tool tip stay for a few seconds?
Tooltips follow your mouse pointer, so you cannot effectively interact with the content inside the tooltip.
How do you allow the user to "Click here For More Information" when the tool tip disappears as soon as the mouse is moved?
You can't really. I suppose you could hack the AJAX viewer so that the tooltip "stays around" for a few seconds.
Thank you Jackie for your blog!
I wonder if you could explain more what you meant with “hack the AJAX viewer so that the tooltip "stays around" for a few seconds”.
Sofia
Thank you Jackie for your blog!
I wonder if you could explain more what you meant with “hack the AJAX viewer so that the tooltip "stays around" for a few seconds".
Sofia
In the AJAX viewer, whenever a tooltip displays, it will disappear and reposition itself the moment you move the mouse.
If your tooltip has something interactive like a button, you will *never* be able to click that button.
If you can find a way to "pin" that tooltip in its current location for a few seconds, then you can interact with any content inside the tooltip.
Hope that makes sense.
Do you have any idea how to do that? I have two hyperlinks that I want to include. I know that I can get with a little work the links to show in right pane but it would be so much nicer in the tool tip.
Sofia
Sweden
Take a look at how this is done in fusion. Their tooltips actually stick around.
Ideally, that behaviour should be brought into the AJAX viewer.
I've posted an update on this situation with regards to the AJAX viewer:
http://themapguyde.blogspot.com/2010/09/expressive-power-of-mapguide-tooltips.html
For reference to any future Googlers, MapGuide 2.2 (which I've tested) includes the improved Concat() function that supports multiple parameters instead of only two. The first example would be simplified to: Concat('<div><img src="http://somepublicallyavailablewebserver.com/parcels/image.php?ParcelID=', PARCEL_ID, '"/><br/> Parcel ID: ', PARCEL_ID, ' <br/>Owner Name: '... and so on.
Post a Comment