Drawing symbols like legend without dijit legend

GuillaumeArnaud

Hi,

I want to make a personal legend in WebAppBuilder but i need to draw symbol.

It's easy when type is esriPMS but when it's esriSFS or esriSLS or esriSMS , I don't know how to make an image with esri symbol.

sample :

"symbol":{"type":"esriSFS","style":"esriSFSSolid","color":[76,230,0,255],"outline":{"type":"esriSLS","style":"esriSLSSolid","color":[255,0,0,255],"width":2}},"value":"0","label":"Zone humide élémentaire","description":""},{"symbol":{"type":"esriSFS","style":"esriSFSSolid","color":[211,255,190,255],"outline":{"type":"esriSLS","style":"esriSLSSolid","color":[255,190,190,255],"width":2}},"value":"1","label":"Zone humide élémentaire gelée","description":""}]

Is there someone to explain me ?

Thanks.

Guillaume ARNAUD

RobertScheitlin__GISP

Guillaume,

  This is not really a simple task but here is a code snippet that I use in some of my widgets:

This code takes the symbol class and creates a div that has the symbol inside it.

<SPAN class="token function">define</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
<SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN>
<SPAN class="string token">'dojox/gfx'</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">'dojo/dom-construct'</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">'dojo/dom-class'</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">'dojo/dom-attr'</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">'esri/symbols/jsonUtils'</SPAN>

<SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN>

<SPAN class="keyword token">var</SPAN> iconDiv <SPAN class="operator token">=</SPAN> domConstruct<SPAN class="punctuation token">.</SPAN><SPAN class="token function">create</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"div"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
domAttr<SPAN class="punctuation token">.</SPAN><SPAN class="keyword token">set</SPAN><SPAN class="punctuation token">(</SPAN>iconDiv<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"id"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"some id"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
domClass<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>iconDiv<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"iconDiv"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
domConstruct<SPAN class="punctuation token">.</SPAN><SPAN class="token function">place</SPAN><SPAN class="punctuation token">(</SPAN>iconDiv<SPAN class="punctuation token">,</SPAN> div<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>


<SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>document<SPAN class="punctuation token">.</SPAN>all <SPAN class="operator token">&&</SPAN> <SPAN class="operator token">!</SPAN>document<SPAN class="punctuation token">.</SPAN>addEventListener<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp; <SPAN class="comment token">//do nothing because it is IE8</SPAN>
&nbsp; <SPAN class="comment token">//And I can not produce swatches in IE8</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="keyword token">else</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp; <SPAN class="keyword token">var</SPAN> mySurface <SPAN class="operator token">=</SPAN> gfx<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createSurface</SPAN><SPAN class="punctuation token">(</SPAN>iconDiv<SPAN class="punctuation token">,</SPAN> <SPAN class="number token">40</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">40</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

<SPAN class="comment token">//symbol below is the symbol class that you want to create image of</SPAN>

&nbsp; <SPAN class="keyword token">var</SPAN> descriptors <SPAN class="operator token">=</SPAN> jsonUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getShapeDescriptors</SPAN><SPAN class="punctuation token">(</SPAN>symbol<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN>descriptors<SPAN class="punctuation token">.</SPAN>defaultShape<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="keyword token">var</SPAN> shape <SPAN class="operator token">=</SPAN> mySurface<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createShape</SPAN><SPAN class="punctuation token">(</SPAN>descriptors<SPAN class="punctuation token">.</SPAN>defaultShape<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">setFill</SPAN><SPAN class="punctuation token">(</SPAN>descriptors<SPAN class="punctuation token">.</SPAN>fill<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">setStroke</SPAN><SPAN class="punctuation token">(</SPAN>descriptors<SPAN class="punctuation token">.</SPAN>stroke<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; shape<SPAN class="punctuation token">.</SPAN><SPAN class="token function">applyTransform</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> dx<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">20</SPAN><SPAN class="punctuation token">,</SPAN> dy<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">20</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp; <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>‍</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>