topic Re: How to emulate the red glow effect from the Flex API in JavaScript API? in ArcGIS JavaScript Maps SDK Questions

How to emulate the red glow effect from the Flex API in JavaScript API?

MS2 — Tue, 15 Dec 2015 19:38:14 GMT

I am trying to emulate the red glow effect from the Flex API in JavaScript API. All my graphics layers are rendered in SVG. If I have N number of Graphics object in my GraphicsLayer, How can I apply the red glow effect that is present in flex to a particular Graphic in GraphicsLayer using JavaScript and CSS?. I'm trying to apply effect one like in the below link. But couldn't add such animation effect to a Graphics object rendered in SVG. Any help or examples will be much appreciated.

Sample glow effect URL :Map marker in CSS

Re: How to emulate the red glow effect from the Flex API in JavaScript API?

SteveCole — Tue, 15 Dec 2015 20:13:37 GMT

Check out this previous thread.

Here's a rough demo. Not great but maybe you can refine it.

Re: How to emulate the red glow effect from the Flex API in JavaScript API?

KenBuja — Sat, 11 Dec 2021 16:56:34 GMT

This is the code I use to "flash" a feature. It's used in this application. To see it in action, turn on the Habitat Boundary layer, select a polygon, then click on a row in the grid to see it flash.

require(["dojo/aspect", "dojo/fx", "dojox/gfx/fx", ... ], function(aspect, coreFx, dojoxGfxFx, ... ){ ... 

    function flashFeature(graphic) {
        if (graphic === null) { return; }

        var graphicFlash, extent;

        var symbolFlashPoint = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10,
                      new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 1),
                      new Color([255, 0, 0, 0.5]));
        var symbolFlashPolyline = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                               new Color([255, 0, 0, 0.5]), 3);
        var symbolFlashPolygon = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
                              new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 2),
                              new Color([255, 0, 0, 0.25]));

        switch (graphic.geometry.type) {
            case "point":
                extent = graphic.geometry;
                graphicFlash = new Graphic(graphic.geometry, symbolFlashPoint);
                break;
            case "multipoint":
                extent = graphic.geometry.getExtent();
                graphicFlash = new Graphic(graphic.geometry, symbolFlashPoint);
                break;
            case "polyline":
                extent = graphic.geometry.getExtent();
                graphicFlash = new Graphic(graphic.geometry, symbolFlashPolyline);
                break;
            case "polygon":
                extent = graphic.geometry.getExtent();
                graphicFlash = new Graphic(graphic.geometry, symbolFlashPolygon);
                break;
            case "extent":
                extent = graphic.geometry;
                graphicFlash = new Graphic(graphic.geometry, symbolFlashPolygon);
                break;
        }

        if (!map.extent.contains(extent)) { return; }

        map.graphics.add(graphicFlash);

        var shape = graphicFlash.getDojoShape();
        var animStroke = dojoxGfxFx.animateStroke({
            shape: shape,
            duration: 500,
            color: { end: new Color([0, 0, 0, 0]) }
        });
        var animFill = dojoxGfxFx.animateFill({
            shape: shape,
            duration: 500,
            color: { end: new Color([0, 0, 0, 0]) }
        });
        var anim = coreFx.combine([animStroke, animFill]).play();
        aspect.after(anim, "onEnd", function () {
            map.graphics.remove(graphicFlash);
        });
    }
});

Re: How to emulate the red glow effect from the Flex API in JavaScript API?

EvelynHernandez — Tue, 15 Dec 2015 21:29:19 GMT

Idk if u can, but its an idea.

Why u dont put a .gif image per each graphic on the map for the query result?, setting the source of the marker symbol.

Will be interesting if u share the code when u solve ur problem

Re: How to emulate the red glow effect from the Flex API in JavaScript API?

MS2 — Wed, 16 Dec 2015 17:08:34 GMT

Thank you for your input Steve Cole, Ken Buja and Evelyn Hernandez. Based on the inputs provided, I'm able to arrive at below glow effect using CSS animation. It may not be a perfect solution, but able to emulate the glow effect and it works in IE11, Chrome and Firefox.

JSFiddle Link