By David Crowther
Question:
I am trying to create an Information Bubble in MapThat which allows a User to click and open a Document or Image – how can I do this?
Answer:
MapThat Information Bubbles can utilise HTML to make their appearance bolder and more aesthetically pleasing:
In addition using HTML you can also create clickable links which open any form of document or image stored on a server. For example the HTML below has a clickable link which will open a photograph image as defined using a value in a specified field in the source data:
<p> </p>
<table>
<caption><strong>Liverpool Fibre Cabinet</strong></caption>
<tbody>
<tr>
<td style="vertical-align:"top"">Cabinet Type:</td>
<td style="vertical-align:"top""><strong>%type%</strong></td>
</tr>
<tr>
<td style="vertical-align:"top"">Location:</td>
<td style="vertical-align:"top""><strong>%address%</strong></td>
</tr>
<tr>
<td style="vertical-align:"top"">Cabinet Photo:</td>
<td style="vertical-align:"top""><a href="#" onclick="window.open('%picture%');">Click to Open Cabinet Photo</a></td>
</tr>
</tbody>
</table>
<p> </p>
Firstly the above HTML defines the Title for the Bubble – Liverpool Fibre Cabinet:
<caption><strong>Liverpool Fibre Cabinet</strong></caption>
It then reveals two fields from the source table and uses an alias to give them the label of Cabinet Type and Location:
<tr>
<td style="vertical-align:"top"">Cabinet Type:</td>
<td style="vertical-align:"top""><strong>%type%</strong></td>
</tr>
<tr>
<td style="vertical-align:"top"">Location:</td>
<td style="vertical-align:"top""><strong>%address%</strong></td>
</tr>
And then the HTML uses the value in the ‘Picture’ field to define the location of each image and defines an ‘On-Click’ command to open that ‘Picture’ in a new browser:
<tr>
<td style="vertical-align:"top"">Cabinet Photo:</td>
<td style="vertical-align:"top""><a href="#" onclick="window.open('%picture%');">Click to Open Cabinet Photo</a></td>
</tr>
The User then simply clicks the clickable link in the Information Bubble:
….and the image opens in a new browser window: