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.
Solved! Go to 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ě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.
Robert,
I need to use a specific png image. Is it possible or I would have to choose only icons available in the font?
There are online utilities to create fonts by importing images. Just Google "create font from image".
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.
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"));
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"));
You can use a online font viewer like this:
http://torinak.com/font/lsfont.html
The likely value is \eu65
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.
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?