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 · Accepted solution]

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.

[RobertMartin2]

Thanks Derek! The _layer suffix did the trick. The pulse effect is causing strange problems for me though in Chrome (it bounces around the screen when you pan). I have an idea for another effect, but I would need a selector for just that one graphic from the graphics layer. I don't suppose that's possible?

[derekswingley1]

The pulse effect is causing strange problems for me though in Chrome (it bounces around the screen when you pan).

That's been a recurring but intermittent issue with Chrome for a while...I don't know of a fix.

I have an idea for another effect, but I would need a selector for just that one graphic from the graphics layer. I don't suppose that's possible?

This is brittle but works:

      #blink_layer circle:first-child { 
        -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;
      }

This will be easier with 3.7 as we're adding a way for you to put custom data-* attributes on graphics you create. You can then target those graphics with css selectors and style one or groups of graphics a particular way.

[RobertMartin2]

Thanks again Derek. Could you explain what "circle" means in that selector? It's not working as is but sounds promising!

[derekswingley1]

Circle is an svg circle element. Depending on the type of symbol you're using, this could be different. Dig into the markup for the map to find out what you need to use in your selector:  http://cl.ly/image/2Q103V093M1S