Change png icon's background color dynamically for feature in feature layer

[ZdeněkSoldán]

Hello,

I have a point feature layer created from feature collection. As symbol for features in this FL is a png image with transaprent background. For every feature I have a html code of color readed from web service. Is it possible to change the background color for every feature using this hex code?  

I tried a pictureMarkerSymbol:

var symb = new PictureMarkerSymbol("images/trafLight.png",12,25);
var colorHex = Color.fromHex('#'+ String(item.color));
symb.setColor(colorHex);
var geometry = new Point({"x":"-"+item.geometry.y,"y":"-"+item.geometry.x,"spatialReference":{"wkid":102067}});
var graphic = new Graphic(geometry);
graphic.setSymbol(symb);
features.push(graphic);‍‍‍‍‍‍‍

The color doesn't change and if so I think it would change color of the border lines not the background color. 

[RobertScheitlin__GISP · Accepted solution]

Zdeněk,

   I am actually not sure why PictureMarkerSymbol has a color property. The color does not change the image that is used. To do what you are after you need to use a TextSymbol and a font that contains the icons you want to use and setting the color will work fine for that.

[ZdeněkSoldán]

Robert,

I need to use a specific png image. Is it possible or I would have to choose only icons available in the font?

[RobertScheitlin__GISP]

There are online utilities to create fonts by importing images. Just Google "create font from image".

[ZdeněkSoldán]

Robert,

I have never did this before so I am not sure if I did it right. But I have installed my new font TraficLight with my icon. And now how to add this icon to Text Symbol?

I tried this

var textSymbol = new TextSymbol({
             font: { 
                 size: 20,
                 family: 'TraficLight'
             }
          });
          graphic.setSymbol(textSymbol);‍‍‍‍‍‍‍

 but it doesn't work. There is no icon on feature in the map.

[RobertScheitlin__GISP]

Zdeněk,

  I don't see where you are specifying the text of the textSymbol (i.e. which character it is using).

Here is some snippets of where I use a font for a symbol:

//my css rule
//This css rule is a little complicated as it covers all know browser issue with using embeded fonts
//a lot of this depends on what font files you actually have i.e. woff, svg, ttf, eot
      @font-face {
        font-family: 'tool-icons';
        src: url('../fonts/tool-icons.eot?23344103');
        src: url('../fonts/tool-icons.eot?23344103#iefix') format('embedded-opentype'), url('../fonts/tool-icons.woff?23344103') format('woff'), url('../fonts/tool-icons.ttf?23344103') format('truetype'), url('../fonts/tool-icons.svg?23344103#tool-icons') format('svg');
        font-weight: normal;
        font-style: normal;
      }

//My code for the textSymbol
var textSymbol = new TextSymbol('\ue803', new Font("20pt", Font.STYLE_ITALIC, Font.VARIANT_NORMAL, Font.WEIGHT_BOLD, "tool-icons"));‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[ZdeněkSoldán]

Ok,

Now I see something. But not my icon. How can I get a code number of my icon in my font? When I open my font in ArcMap's Symbol Selector - Symbol Property Editor - Character Marker Symbol  I see that the icon has a Unicode of 65. I tried to put this number to my code but it's wrong.

var textSymbol = new TextSymbol('\65', new Font("20pt", Font.STYLE_ITALIC, Font.VARIANT_NORMAL, Font.WEIGHT_BOLD, "TraficLight"));‍

[RobertScheitlin__GISP]

You can use a online font viewer like this:

http://torinak.com/font/lsfont.html 

The likely value is \eu65

[ZdeněkSoldán]

Robert,

I'm still fighting with your suggestion. Here is a list what I did. Can you please look at it and tell me what's missing or what's wrong?

1. create a .png image

2. convert the image to svg

3. convert the svg to font TraficLight

4. copy folder fonts with 4 files - TraficLight.eot, TraficLight.svg, TraficLight.ttf and TraficLight.woff to folder WebAppBuilderForArcGIS\server\apps\apID\widgets\nameOfTheWidget

5. add css rule you posted above to style.css of my widget 

    @font-face {
         font-family: 'TraficLight';
         src: url('../fonts/TraficLight.ttf');

         font-weight: normal;
         font-style: normal;
    }

6. to my widget.js add the code

    var textSymbol = new TextSymbol('\0040', new Font("20pt", Font.STYLE_NORMAL, Font.VARIANT_NORMAL, Font.WEIGHT_NORMAL, "TraficLight"));

    graphic.setSymbol(textSymbol);

I am not sure if this process is right so I very appreciated your help.

[RobertScheitlin__GISP]

The issue I see in your steps is that you say:

4. copy folder fonts with 4 files - TraficLight.eot, TraficLight.svg, TraficLight.ttf and TraficLight.woff to folder WebAppBuilderForArcGIS\server\apps\apID\widgets\nameOfTheWidget

5. add css rule you posted above to style.css of my widget 

    @font-face {
         font-family: 'TraficLight';
         src: url('../fonts/TraficLight.ttf');

         font-weight: normal;
         font-style: normal;
    }

That would need to be copy folder fonts with 4 files to WebAppBuilderForArcGIS\server\apps\apID\widgets\nameOfTheWidget\fonts

Did you use the online font viewer to determine the text should be \0040?