topic Re: CSS controlled point feature layer in ArcGIS JavaScript Maps SDK Questions

CSS controlled point feature layer

CarolineSteer — Tue, 06 May 2014 15:07:04 GMT

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-farage-animated-map). 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

Re: CSS controlled point feature layer

Noah-Sager — Sat, 11 Dec 2021 09:37:54 GMT

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

Re: CSS controlled point feature layer

CarolineSteer — Sat, 11 Dec 2021 09:37:56 GMT

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;