MapThat - Clickable Information Bubbles

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>&nbsp;</p>
<table>
<caption><strong>Liverpool&nbsp;Fibre Cabinet</strong></caption>
<tbody>
<tr>
<td style="vertical-align:&quot;top&quot;">Cabinet Type:</td>
<td style="vertical-align:&quot;top&quot;"><strong>%type%</strong></td>
</tr>
<tr>
<td style="vertical-align:&quot;top&quot;">Location:</td>
<td style="vertical-align:&quot;top&quot;"><strong>%address%</strong></td>
</tr>
<tr>
<td style="vertical-align:&quot;top&quot;">Cabinet Photo:</td>
<td style="vertical-align:&quot;top&quot;"><a href="#" onclick="window.open('%picture%');">Click to Open Cabinet Photo</a></td>
</tr>
</tbody>
</table>

<p>&nbsp;</p>

 Firstly the above HTML defines the Title for the Bubble – Liverpool Fibre Cabinet:

 <caption><strong>Liverpool&nbsp;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:&quot;top&quot;">Cabinet Type:</td>
<td style="vertical-align:&quot;top&quot;"><strong>%type%</strong></td>
</tr>
<tr>
<td style="vertical-align:&quot;top&quot;">Location:</td>
<td style="vertical-align:&quot;top&quot;"><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:&quot;top&quot;">Cabinet Photo:</td>
<td style="vertical-align:&quot;top&quot;"><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: