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

[deleted-user-OOe4JK-9Abnm]

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]

I found a related question: https://community.esri.com/thread/66487 

No answer either.

[JordanBaumgardner]

You might try subclassing the PictureMarkerSymbol, you might be able to change the class or animations there.

I need to make a custom renderer that would display any symbol. This was my solution.

Custom SimpleRenderer JS 4.3 

[deleted-user-OOe4JK-9Abnm]

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?

[JordanBaumgardner]

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]

Thank you, Jordan!

I will check it out