topic Re: How to animate symbols (PictureMarkerSymbol in my example) using css. in ArcGIS JavaScript Maps SDK Questions

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

deleted-user-OOe4JK-9Abnm — Tue, 15 May 2018 13:59:40 GMT

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'

});

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

deleted-user-OOe4JK-9Abnm — Wed, 16 May 2018 06:20:03 GMT

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

No answer either.

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

JordanBaumgardner — Wed, 16 May 2018 13:06:46 GMT

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

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

deleted-user-OOe4JK-9Abnm — Tue, 22 May 2018 12:23:15 GMT

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?

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

JordanBaumgardner — Tue, 22 May 2018 13:43:59 GMT

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

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

deleted-user-OOe4JK-9Abnm — Wed, 30 May 2018 09:06:56 GMT

Thank you, Jordan!

I will check it out