• Blog posts

    Bio

    By David Crowther

    MapThat___Clickable_Information_Bubbles_-_1.PNG

    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:

    MapThat___Clickable_Information_Bubbles_-_2.PNG

    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:

    MapThat___Clickable_Information_Bubbles_-_3.PNG

    <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:

    MapThat___Clickable_Information_Bubbles_-_4.PNG

    ….and the image opens in a new browser window:

    MapThat___Clickable_Information_Bubbles_-_5.png