How to Dynamically Change GIF Image Color in API for JS 4.12?

571
6
09-04-2019 06:35 PM
JerryChen
New Contributor III

I have GIF images as PictureMarkerSymbols. The images are filled in black(as shown below, the letters 'N', 'F', 'R', 'L', 'Z').

Now I want to change the color of these GIFs to red or blue. I've tried some changing color codes in JS, but I'm not able to work them out successfully. Is there any other way to change GIF color dynamically in code in ArcGIS API? Thanks so much!

Snippet of my code :

var letterGraphic = new Graphic({
geometry: {
type: "multipoint",
points: [[0, 12]]
},
symbol: {
type: "picture-marker",
url: "http://localhost:{Port}/{Project name}/letterR.gif",
width: "80px",
height: "80px"
}
});
view.graphics.add(letterGraphic);

0 Kudos
6 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Jerry,

   You should switch to using a textSymbol then. 

0 Kudos
JerryChen
New Contributor III

I also have GIFs that are not texts so I need url reference to each of my images which a TextSymbol is lack of. I've successfully changed image color using HTML5 canvas, but I have no clue how to implement it in the an ArcGIS map. I found v3.x APIs seem to support canvas, but not in v4.x.

By the way, sorry for providing too little detail.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Jerry,

   Image manipulation is going to be hard to implement. I still say use a true type font. There are a couple of free font creator apps out there and you can import your non-text images into those programs and create a true type font for them. Then you create a pbf file for that font as explained in this thread.

https://community.esri.com/thread/227210-api-v410-adding-a-local-font-esri-weather 

0 Kudos
BenElan
Esri Contributor

I also suggest using TextSymbols. Here is a good sample to get you started 

JerryChen
New Contributor III

Thanks for your suggestion, Ben. But unfortunately, I have non-text images so using TextSymbols may not be a solution. What I need to achieve is to transform HTML5 canvas into a ArcGIS Graphic like I mentioned under Robert's comment.

0 Kudos
BenElan
Esri Contributor

Alternatively, you could create overlapping symbols of different colors, and then toggle their opacity when you want to switch.

0 Kudos