How to Include an Image in a Data Grid or Map Tip

Owned by Lucy Minato (Unlicensed)
Last updated: 16 Aug, 2022
2 min read

When you have images associated with records in a table it is possible to include the image in a Data Grid or Map Tip. In order for the image to be included in either of these, it must be part of the Data Definition used.

Step-by-step guide

  1. Identify which table and field contains the image name and location, or just the image name. This will be needed so that every feature has its corresponding file link. 
     

  2. In your Data Definition, add a parameter for the image file link. It's best to enclose the file path with a CDATA section to ensure all characters are interpreted correctly. Weave will need to serve the image using a web server so put in the correct reference to your images through the web server, e.g.  http://servername/path/image_name
     

  3. If you do not have a web server you can use Weave's web server. However for this to work you need to store your images in a folder recognised by the Weave web server. For example you could create an "images" folder in your webapps folder (C:\weave\jetty_base\webapps\images) and put all your linking images in there.
     

  4. As mentioned in Step 3, if you have put your images in a Weave web server folder, and the name of the image is stored in a field called tree_photo, then to include those images in a Data Definition you could use the code below.

    <parameter type="string" name="imageparam" label="Image">
	<column>
		<![CDATA['<img src="http://localhost:8080/images/'||tree_photo||'" height="30" width="30" />']]>
	</column>
</parameter>

    If the image file extension is not stored in the field of the image name, you can append it to the file name as shown below.

    <parameter type="string" name="imageparam" label="Image">
	<column>
		<![CDATA['<img src="http://localhost:8080/images/'||tree_photo||'.jpg" height="30" width="30" />']]>
	</column>
</parameter>

  5. Alternatively you could add a link to the image to your Data Definition, rather than displaying the image itself. In this case you set the parameter of type as "url" as shown below.

    <parameter type="url" name="imagelink" label="Image Link" column="'http://localhost:8080/images/'||tree_photo"/>

  6. If you do not want to use a web server you could also use the file: reference to add a link to your images in a Data Definition, but this only works if the user is using Internet Explorer as their browser. If you do want to try the file: reference, two alternatives for this are shown below, where mycomp is the name of the computer where the images are stored in the folder C:/images/flora.

    <parameter type='url' name="link1" label="UNC File Link" text="open">
	<column>
		<![CDATA['file://mycomp/c$/images/flora/tree1.png']]>
	</column>
</parameter>

<parameter type='url' name="link2" label="UNC Directory Link" text="open">
	<column>
		<![CDATA['file://mycomp/c$/images/flora/']]>
	</column>
</parameter>


    There are security implications with allowing web sites to access your local file system via the file: reference so in some environments this may not work and you may have to use the http: reference as described in Step 5. 


For further information on Data Definitions: Datasource Data Connection