Insert an image into your HTML Pop-up in ArcMap

This one had me stumped for awhile. I wanted to insert an image into an HTML pop-up in ArcMap, which is another way to identify data. The pop up can be formatted to embed links, video, images, and colored to look nicer than the plain identify box that ArcMap typically uses. The pop-up box is formatted by modifying stylesheets and the style sheets are in XSL format. -sigh- yet another ‘programming’ language to hack at. Esri provides stylesheet examples, but I couldn’t find a sample of how to embed an image file into the pop-up box. It seems like that would be the most commonly desired thing, but no samples that I could find. So I searched around the internet and finally cobbled together something that works. Here it is. I hope this saves you a bit of hunting.

The important part excerpted here is this:

<xsl:when test="FieldValue[starts-with(., '\\')]">
<img width="350" height="210">
<xsl:attribute name = "src"><xsl:value-of select="FieldValue"/></xsl:attribute>
Click on through to see the whole template XSL file:
Here is the template in it’s entirety.  I started witht the Esri “Green.xsl” template and modified the one scenario where the attribute starts with “\\” because my pictures were stored on a local server and the path was formatted as such “\\myserver\path\to\theimage.jpg”.  You can modify the search criteria or add another by copying and pasting the test case and making it fit your scenario.
 
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">
<xsl:template match="/">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
</head>
<body>
<xsl:variable name="nameCol" select="FieldsDoc/Fields/Field/FieldName"/>
<table border="1" width="600" cellpadding="5" cellspacing="0">
<tr bgcolor="#8AA37B">
<xsl:if test="string-length($nameCol) != 0">
<th width="30%" align="left">Field Name</th>
</xsl:if>
<th width="70%" align="left">Field Value</th>
</tr>
<xsl:variable name="index" select="1"/>
<xsl:for-each select="FieldsDoc/Fields/Field">
<tr>
<xsl:if test="(position() +1) mod 2">
<xsl:attribute name="bgcolor">#C0D9AF</xsl:attribute>
</xsl:if>
<xsl:if test="string-length($nameCol) != 0">
<td>
<xsl:value-of select="FieldName"/>
</td>
</xsl:if>
<td>
<xsl:choose>
<xsl:when test="FieldValue[starts-with(., 'www.')]">
<a target="_blank"><xsl:attribute name="href">http://<xsl:value-of select="FieldValue"/>
</xsl:attribute><xsl:value-of select="FieldValue"/>
</a>
</xsl:when>
<xsl:when test="FieldValue[starts-with(., 'http:')]">
<a target="_blank"><xsl:attribute name="href"><xsl:value-of select="FieldValue"/>
</xsl:attribute><xsl:value-of select="FieldValue"/>
</a>
</xsl:when>
<xsl:when test="FieldValue[starts-with(., 'https:')]">
<a target="_blank"><xsl:attribute name="href"><xsl:value-of select="FieldValue"/>
</xsl:attribute><xsl:value-of select="FieldValue"/>
</a>
</xsl:when>

<xsl:when test="FieldValue[starts-with(., '\\')]">
<img width="350" height="210">
<xsl:attribute name = "src"><xsl:value-of select="FieldValue"/></xsl:attribute>
</img>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="FieldValue"/>
</xsl:otherwise>
</xsl:choose>
</td>
</tr>
</xsl:for-each>
</table>
<br/>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Advertisements

12 thoughts on “Insert an image into your HTML Pop-up in ArcMap

  1. Hey, I saw your presentation at the UC Lightening talk. I am glad I noted your blog address. I thought I would see postings on the user interface, but am pleasantly surprised to see python code.

    • Thanks Yeon! Glad you stopped by to visit and take time to comment. I’m a dabbler… many things vie for my interest. I like chickens also and I haven’t figured out how to merge that in yet. 🙂

  2. Hi,

    I want to add images to my Google sites KML map. I’m guessing i could do this by using your code. where in your code do i insert the image links? I hope that question makes sense. Thanks ahead of time for any help.

    • Hi Jane
      Thanks for stopping by. I haven’t done exactly what you are talking about , but here is what I would try first.
      Around line 35 there is the line
      In the next line (36) is where you would tweak your settings I think, since it’s going to point to a http address. Do you have a field in your GIS data that stores the web address to your map? This script looks at the content and searches for a http address (on line 36) and displays whatever it is linked to. That’s where I would start. Copy the img settings from line 47 and put them in that http section.

      Good luck. I hope it points you on the right path!

      • Thanks for your quick and helpful reply. I still need some help however.

        How do I change your code to make the image show instead of the link?

        I changed what you suggested. Yes, there is a field where my web addresses are stored (attributes table on my layer). When I view my pop-up in ArcMap the image shows up as a live click-able link that works but I’d prefer the image to show and not the link.

        My end result is to export my layer as a KML file and posted it on Google Maps using Google Sites. The pop-up feature from ArcMap carries over, which is way neat. 🙂 I’d like that image to carry over too.

  3. Nevermind! I just figured it out! I feel so smart. I had to delete some of your code to get to the image to show up! This is so exciting! It showed up on Google Maps too!

    If you can’t tell, i’m new at this. THANKS AGAIN!!! 🙂

    • Jane
      Congrats! Don’t you love that feeling?
      Could you post your solution here so that others the end up here searching for the same thing get the final answer?

      I’m interested in the solution too!

  4. Outcome: Display an ArcMap layer in Google Maps with pop-ups including photos.

    Purpose: I have no access to admin rights on a website, external links to Google Maps posted on restricted website allows me to edit Google link as I please without admin rights.

    Steps: Store the photo link in the attributes table of the layer in ArcMap. Keep in mind the “text” field has a cut off limit of 256 characters, keep links short. My photo links started with https:// and ended with .jpg and they are stored on Google Sites. I edited the code from this blog by cutting out some of the middle stuff and changing it to match web links instead of hard drive paths. The edited code was pasted in the HTML Popup tab of Layer properties in ArcMap. Use the “Layer to KML” tool to export your layer. Than upload the KML file to a Google Sites. Copy, paste the layer link generated from Google Sites into Google Maps Search Bar, enter, shows layer in Google Maps with pop-up info.

    To view an example of my work go here & click on “Pleasant Grove Creek HP Tributary – 1” to view a photo in the pop-up.

    https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=https://sites.google.com/site/rsvlaac/adoptacreek/AAC_PG_Watershed.kmz&aq=&sll=38.749532,-121.25679&sspn=0.100675,0.154324&ie=UTF8&ll=38.784063,-121.308804&spn=0.100627,0.154324&z=13

    I can post the code that I used but I thought this post would be too cluttered.

    • Could you post your script, because I am having problem trying to show a chart in html popup using arcgis desktop. Can’t seem to get the path right after modifying esri cal template. Thanks!

    • Jane,

      I’m looking to replicate your results, but don’t know xml very well. What exactly did you cut out? Or perhaps you could just post your code somewhere accessible?

      Thanks,
      Jeff

  5. Hola

    one question … can it be changed to use relative paths in hard disk?… the project and pictures are going to be delivered in folders and subfolders (DVD or USB disk) so i will not know machine name or drive letter… thank you

  6. Hi.. just to clarify… i need to use the HTML popup with more than one field in the same layer, with pictures saved in a folder… thanks

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s