CSS controlled point feature layer

[CarolineSteer]

Hi there,

I'm currently trying to create an animated point feature layer. I'm trying to create something similar to this(http://www.theguardian.com/news/datablog/interactive/2014/apr/03/twitter-responded-nick-clegg-nigel-...). I've got the CSS animation to work however I can't find a way of assigning this to my feature layer. Each point is represented with the same symbology, there are no class breaks. All of the examples include class breaks and are polygon data sets, does anyone have any hints about how to get CSS to control the look of my points?

Many thanks!

Caroline

[Noah-Sager]

Hi Caroline,

Have you seen the SVG and CSS Transitions JavaScript sample? This may be useful to you.

Another option would be to set a renderer with the featureLayer (if you have an animated .gif), here is a code snippet.

pictureSymbol = new esri.symbol.PictureMarkerSymbol("http://www.soccerposttn.com/~media/elements/AnimatedClipart/toys_and_hobbies/animations/soccer_ball__bouncingA.gif", 45, 65);
var renderer = new esri.renderer.SimpleRenderer(pictureSymbol);
featureLayer.setRenderer(renderer);
map.addLayer(featureLayer);

Hope this helps!

-Noah

[CarolineSteer]

Thanks for your help Noah, I ended up asking my web-guru friend who gave me this genius answer, assign a class to it and then you can control it through CSS eg.

function addFeatureLayer() {
            var featureLayer = new FeatureLayer("http://services.arcgis.com/7eMCKfEPV8BkFVLQ/arcgis/rest/services/PubsFaceWatch/FeatureServer/0", {
                id:"featureLayer",
                styling:false,
                dataAttributes:["Incidents"]
            });
   console.log(featureLayer);

            if (featureLayer.surfaceType === "svg") {
                on(featureLayer, "graphic-draw", function (evt) {
    className = "svgClass";

                    // set the data attribute for the current feature
                     
     evt.node.setAttribute("data-class", className); 
                });
            } else {
                alert("Your browser does not support SVG.\nPlease user a modern web browser that supports SVG.");
                dom.byId("legend").innerHTML = "Your browser does not support SVG.";
            }
            map.addLayer(featureLayer);
            return featureLayer;