Add Image to Attribute Expression

jaykapalczynski

Is it possible to add an URL image to an attribute Expression?

I want the text to be follow by a specific image based on the field value. I can get the text to change with no issues but want to add a specific image

function symbol<SPAN class="punctuation token">(</SPAN>feature<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>

   image1 <SPAN class="operator token">=</SPAN> <SPAN class="string token">"https://img.icons8.com/color/search/96 "</SPAN> 
   image2 <SPAN class="operator token">=</SPAN> <SPAN class="string token">"https://img.icons8.com/color/search/96 "</SPAN>

   var display <SPAN class="operator token">=</SPAN> When<SPAN class="punctuation token">(</SPAN>feature <SPAN class="operator token">==</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'Permittee'</SPAN> <SPAN class="operator token">+</SPAN> image1<SPAN class="punctuation token">,</SPAN> feature <SPAN class="operator token">==</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'Trap'</SPAN> <SPAN class="operator token">+</SPAN> image2<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'n/a'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

   <SPAN class="keyword token">return</SPAN> display 
<SPAN class="punctuation token">}</SPAN>

symbol<SPAN class="punctuation token">(</SPAN>$feature<SPAN class="punctuation token">.</SPAN>LOK<SPAN class="punctuation token">)</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

jaykapalczynski

I was able to do it this way....I assigned an IMAGE to an expression and then used that expression in the popup

EXPRESSION ( IMAGE{expression/expr4})

function GetImageOnClass<SPAN class="punctuation token">(</SPAN>feature<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
     var lst <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">'95'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'96'</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
     var base_url <SPAN class="operator token">=</SPAN> <SPAN class="string token">'https://img.icons8.com/color/search/'</SPAN><SPAN class="punctuation token">;</SPAN>

     var url <SPAN class="operator token">=</SPAN> <SPAN class="string token">''</SPAN><SPAN class="punctuation token">;</SPAN>
     <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>feature <SPAN class="operator token">==</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          url <SPAN class="operator token">=</SPAN> base_url <SPAN class="operator token">+</SPAN> lst<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
     <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>feature <SPAN class="operator token">==</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          url <SPAN class="operator token">=</SPAN> base_url <SPAN class="operator token">+</SPAN> lst<SPAN class="punctuation token">[</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
     <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
          url <SPAN class="operator token">=</SPAN> <SPAN class="string token">'https://www.yahoo.com'</SPAN><SPAN class="punctuation token">;</SPAN>
     <SPAN class="punctuation token">}</SPAN>
    <SPAN class="keyword token">return</SPAN> url<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
var cnapper <SPAN class="operator token">=</SPAN> $feature<SPAN class="punctuation token">.</SPAN>FieldName

<SPAN class="keyword token">return</SPAN> GetImageOnClass<SPAN class="punctuation token">(</SPAN>cnapper<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

HTML on the POPUP

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN><SPAN class="style-attr language-css token"><SPAN class="attr-name token"> <SPAN class="attr-name token">style</SPAN></SPAN><SPAN class="punctuation token">="</SPAN><SPAN class="attr-value token"><SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN> 100%<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN>30px<SPAN class="punctuation token">;</SPAN> <SPAN class="property token">vertical-align</SPAN><SPAN class="punctuation token">:</SPAN>middle<SPAN class="punctuation token">;</SPAN>   </SPAN><SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
         <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>div</SPAN> <SPAN class="attr-name token">style</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>
             width: 5%; 
             vertical-align: middle; 
             float: left;<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN> 
             <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>img</SPAN> <SPAN class="attr-name token">alt</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>alternative text<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">src</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>{expression/expr4}<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">style</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>
                 width:25px;
                 height:25px;<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="punctuation token">/></SPAN></SPAN>
      <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
 <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>div</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>