topic Re: How to Dynamically Change GIF Image Color in API for JS 4.12? in ArcGIS JavaScript Maps SDK Questions

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

JerryChen — Thu, 05 Sep 2019 01:35:32 GMT

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

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

RobertScheitlin__GISP — Thu, 05 Sep 2019 12:35:26 GMT

Jerry,

You should switch to using a textSymbol then.

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

BenElan — Thu, 05 Sep 2019 16:51:35 GMT

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

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

JerryChen — Fri, 06 Sep 2019 01:23:39 GMT

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.

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

JerryChen — Fri, 06 Sep 2019 01:33:19 GMT

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.

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

RobertScheitlin__GISP — Mon, 09 Sep 2019 12:47:42 GMT

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

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

BenElan — Mon, 09 Sep 2019 15:37:39 GMT

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