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 · Accepted solution]

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.

define([
...
'dojox/gfx',
'dojo/dom-construct',
'dojo/dom-class',
'dojo/dom-attr',
'esri/symbols/jsonUtils'

...

var iconDiv = domConstruct.create("div");
domAttr.set(iconDiv, "id", "some id");
domClass.add(iconDiv, "iconDiv");
domConstruct.place(iconDiv, div);


if(document.all && !document.addEventListener){
  //do nothing because it is IE8
  //And I can not produce swatches in IE8
}else{
  var mySurface = gfx.createSurface(iconDiv, 40, 40);

//symbol below is the symbol class that you want to create image of

  var descriptors = jsonUtils.getShapeDescriptors(symbol);
  if(descriptors.defaultShape){
    var shape = mySurface.createShape(descriptors.defaultShape).setFill(descriptors.fill).setStroke(descriptors.stroke);
    shape.applyTransform({ dx: 20, dy: 20 });
  }
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[GuillaumeArnaud]

Thank you, it work's !

[RobertScheitlin__GISP]

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.