topic Re: Change png icon's background color dynamically for feature in feature layer in Web AppBuilder Custom Widgets Questions

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

ZdeněkSoldán — Sun, 12 Dec 2021 07:30:10 GMT

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.

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

RobertScheitlin__GISP — Tue, 25 Apr 2017 12:48:29 GMT

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.

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

ZdeněkSoldán — Tue, 25 Apr 2017 13:21:44 GMT

Robert,

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

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

RobertScheitlin__GISP — Tue, 25 Apr 2017 13:25:33 GMT

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

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

KumarHarish — Tue, 25 Apr 2017 13:46:22 GMT

Zdeněk,

Robert suggestion is right. Alternative convert the PNG image into SVG format. Use the https://developers.arcgis.com/javascript/3/jssamples/graphics_svg_path.html tutorial to change the color of icon

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

ZdeněkSoldán — Wed, 26 Apr 2017 10:19:37 GMT

Kumar,

Thank you. This method works for me but it change directly the color of my svg picture but I want to change only the background of it.

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

ZdeněkSoldán — Sun, 12 Dec 2021 07:30:12 GMT

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.

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

RobertScheitlin__GISP — Sun, 12 Dec 2021 07:30:15 GMT

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"));‍‍‍‍‍‍‍‍‍‍‍‍‍‍

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

ZdeněkSoldán — Wed, 26 Apr 2017 14:41:44 GMT

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"));‍

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

RobertScheitlin__GISP — Wed, 26 Apr 2017 15:11:35 GMT

You can use a online font viewer like this:

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

The likely value is \eu65

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

ZdeněkSoldán — Thu, 27 Apr 2017 09:20:44 GMT

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.

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

RobertScheitlin__GISP — Thu, 27 Apr 2017 12:42:45 GMT

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?

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

ZdeněkSoldán — Thu, 27 Apr 2017 13:15:57 GMT

Robert,

in this link is printscreen from online font viewer http://imgur.com/a/0IFv4

so from the prinscreen I think that my icon should be \0040. Am I wrong?

And to my step 4 - the folder with fonts has the name fonts already maybe it's not clear from my post but the path to the 4 files TraficLight.eot, TraficLight.svg, TraficLight.ttf and TraficLight.woff already was WebAppBuilderForArcGIS\server\apps\apID\widgets\nameOfTheWidget\fonts

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

RobertScheitlin__GISP — Thu, 27 Apr 2017 13:35:05 GMT

That would be \eu0040

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

ZdeněkSoldán — Fri, 28 Apr 2017 07:30:09 GMT

Robert,

in my font the icon in on the place of the upper A so when my code is

var textSymbol = new TextSymbol('A', new Font("20pt", Font.STYLE_NORMAL, Font.VARIANT_NORMAL, Font.WEIGHT_BOLD, "TraficLight"));

it works!

But this way I know only how to change color of the TextSymbol but is it possible to change only the background color of TextSymbol?

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

ZdeněkSoldán — Fri, 28 Apr 2017 08:54:22 GMT

Robert,

I used a halo property of the TextSymbol and it's good enough for me.

So thank you a lot for your help.

Zdenek