How to apply CSS effects to custom graphics layer?

RobertMartin2

I noticed that the Mobile ArcGIS.com tutorial uses CSS to make the GPS indicator (a blue dot) pulse when shown. This is the selector:

#map_graphics_layer {  -webkit-animation-duration:3s;  -webkit-animation-iteration-count:infinite;  -webkit-animation-name:pulse;  -webkit-animation-timing-function:ease-in-out; }

Unfortunately I can't do this because I use the map.graphics layer for other things that shouldn't pulse. Instead I made a custom graphics layer for the GPS point and gave it its own ID, like "gps-graphics-layer". I tried using the same CSS on #gps-graphics-layer but that didn't work. Does anyone know how to do this?

Thanks!

derekswingley1

The key thing to pick up on is that the element you want to style gets an ID of <layer-id>_layer. So, if you add a graphics layer with:

var gl = new GraphicsLayer({ id: "blink" });

Your CSS would look like:

      #blink_layer {          -webkit-animation-duration: 3s;         -webkit-animation-iteration-count: infinite;         -webkit-animation-name: pulse;         -moz-animation-duration: 3s;         -moz-animation-iteration-count: infinite;         -moz-animation-name: pulse;       }

Full example:  http://jsbin.com/iLuMAwE/1/edit

We've got a couple things related to this coming up at the next release and we'll have more docs/examples for this kind of thing.