Make full use of tooltip in Autodesk Infrastructure Map Server(AIMS) or MapGuide Open Source

By Daniel Du

My colleague Partha wrote up an post about creating multiline mouse over Tool tip for your map in Autodesk Infrastructure Map Server / MapGuide Enterprise, in this post, I would dive deeper to introduce more interesting ways to make full use of tool-tip in AIMS, it also applies to MapGuide Open Source. I posted some articles about this topic in Chinese in my personal blog years ago, but I am kind of obligated to rewrite it in English to spread to more audience.

 

Improvement of CONCAT

Before we start, here is a tip you want to know to make your life easier. As you know, to join multiple components in Advanced mode, we can use “concat”. For example:

concat(State_Name, concat(‘: ‘,Population))

But you may get lost if you have so many components to join, it may make you crazy with so many “contact” and brackets. The good news is, contact function is improved from MapGuide Enterprise 2011/Map 3D 2011. CONCAT takes any number of arguments, which can be any property type except Geometry or Raster. The return value uses the String data type.Use ‘n’ to insert a line break. To include static text labels or spaces, surround them with single quotes. When you use CONCAT with a Boolean property, the operation generates 1/0 (not True/False) as a result.

Syntax

CONCAT(Property, Property, …)

Example

CONCAT(First_Name, ' ', Last_Name,
'n Address: ', Street_number, ' ',       Street_name, ' ', Suffix) 

Here is the result：

John Smith

Address: 123 Maple Street

 

Embed hyperlink into tooltip

Tooltip is implemented in the viewer as HTML div containers, that means you can embed any HTML tags in tooltip to create many pretty cool stuffs in tooltip with your basic HTML knowledge. We can add a hyperlink in tooltip by following code snippet to tooltip of parcel layer.

Double click parcels from Site Explorer in Infrastructure Studio to open the layer editor,

concat('ParcelnName: ', RNAME,
'nAddress: ', RBILAD,'
nfeatid:', Autogenerated_SDF_ID ,
'n <a href="http://www.google.com" target=_blank>
Click here to launch google search
</a>')

It will look like:

 

Embed image into tooltip

Now, let’s add an <image> tag to embed an image into the tooltip, at the same time, add a hyperlink to this image.

concat('ParcelnName: ', RNAME,
'nAddress: ', RBILAD,'
nfeatid:', Autogenerated_SDF_ID ,
'n <a href="http://www.google.com" target=_blank>
Click here to launch google search </a>',
'n <a href=http://www.autodesk.com target=_blank>
<image src="http://img1.mediabea.com/images
/3/37/Autodesk_logo.jpg"
alt="Autodesk" height=50, width=100>
</image>
</a>')

It will look like:

 

Embed other tags

Now I believe you’ve got the idea. we can embed any HTML tag into tooltip, so just use your imagination!

 

Let’s do something cool—Display Chart/Pie in tooltip

I do know many people are trying to display chart on map, and it is not easy to do with native MapGuide API. I was suffering this as well until I came across Google Chart API. The Google Chart API returns a chart image in response to a URL GET or POST request. The API can generate many kinds of charts, from pie or line charts to QR codes and formulas. All the information about the chart that you want, such as chart data, size, colors, and labels, are part of the URL. To make the simplest chart possible, all your URL needs to specify is the chart type, data, and size. You can type this URL directly in your browser, or point to it with an <img> tag in your web page. For example, follow this link for a pie chart:

https://chart.googleapis.com/chart?chs=250×100&chd=t:60,40&cht=p3&chl=Hello|World

You will get a chart image:

 

As per our discussion above, you can create the chart image and embed it into tooltip of MapGuide. MapGuide Open Source guru Jackie Ng created a post to demonstrate how to do this. please refer to his blog for more information.

 

 

Display more comprehensive information in tooltip

You may find it too complicated by joining contacting HTML tag directly if you want display more complicated information in tooltip. In this case, we can create a separate page then embed this page into tooltip with <iframe> tag.

Here is an example, I an trying to display detailed feature information in tooltip, so I created a web page named  as FeatureInformation.aspx to retrieve detailed information of feature by feature ID, then embed it into tooltip:

concat('ParcelnName: ', RNAME,
'nAddress: ', RBILAD,'
nfeatid:', Autogenerated_SDF_ID ,
'n <a href="http://www.google.com" target=_blank>     Click here to launch google search </a>',
'n <a href=http://www.autodesk.com target=_blank>      <image src="http://img1.mediabea.com/images                          /3/37/Autodesk_logo.jpg"              alt="Autodesk" height=50, width=100>      </image>    </a>',
'n<iframe width=500 height=500       src= http://localhost/WebcastDemo/              FeatureInformation.aspx?MyFeatID=',                            Autogenerated_SDF_ID ,                           '&session=',                           URLENCODE(SESSION()),

'></iframe>')

 

Actually I can display any information this page, I can even query information from other system, like ERP/CRM, to implement the integration of MapGuide and other systems.

Did I mention that the it works for both Ajax viewer and Fusion viewer?

 

I know someone is trying to add panoramic image and video into tooltip, do you have any other ideas to make full use of tooltip?