How to apply CSS effects to custom graphics layer?

3421
5
Jump to solution
08-26-2013 04:10 PM
RobertMartin2
Occasional Contributor II
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!
0 Kudos
1 Solution

Accepted Solutions
derekswingley1
Frequent Contributor
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.

View solution in original post

0 Kudos
5 Replies
derekswingley1
Frequent Contributor
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.
0 Kudos
RobertMartin2
Occasional Contributor II
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?
0 Kudos
derekswingley1
Frequent Contributor
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.
0 Kudos
RobertMartin2
Occasional Contributor II
Thanks again Derek. Could you explain what "circle" means in that selector? It's not working as is but sounds promising!
0 Kudos
derekswingley1
Frequent Contributor
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
0 Kudos