How to animate symbols (PictureMarkerSymbol in my example) using css.

Question

Hi,

I need to make some animations on PictureMakerSymbol which is SVG-image. But I can not find any way to add css-class to the symbol. I use 4.7 api version. I expected that it would be a parameter in the symbol definition like "className". In addition to this I build a React solution and it is not so trivial to get access to the dom-node of the symbol. I found very little info about animations for js-api. I think animations is one of the key functionality which make maps more productive and fun to use.  I would appreciate any answer around this theme. Thank you in advance.

var symbol = new PictureMarkerSymbol({ url: image,className: 'myStyle'  });

deleted-user-OOe4JK-9Abnm · Answer

Thank you, Jordan!

I will check it out

JordanBaumgardner · Answer

Ya, that is not really clear. It's Object Oriented JS - So some objects inherit all the properties and methods of its base class and it's parents base class, and so on. So.... Way way back is Accessor. [Accessor | API Reference | ArcGIS API for JavaScript 4.7  ]

This gives each class the ability to create a copy of its code, with that copy you can overwrite any method you wish.

I needed to change the symbology to Any Color/Size/Outline the user wanted - So I createSubclass and overwrote its "getSymbol" method. I'm thinking you can do the same but instead of changing color and style, you could insert some CSS to or an animated SVG. Either way, you could place a hook on it that you could use the DOM to look for later after render.

community.esri.com/thread/192639-custom-simplerenderer-js-43

Hope that helps

deleted-user-OOe4JK-9Abnm · Answer

Thank you for the answer. I will definitly check it out.

I use 4.7 api and I can't find

SimpleRenderer.createSubclass

method in the documentation: SimpleRenderer | API Reference | ArcGIS API for JavaScript 4.7

How does it work for you?