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

3563
4
12-15-2015 11:38 AM
MS2
by
New Contributor II

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

0 Kudos
4 Replies
SteveCole
Frequent Contributor

Check out this previous thread.

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

KenBuja
MVP Honored Contributor

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);

        });

    }

});

EvelynHernandez
Regular Contributor

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

0 Kudos
MS2
by
New Contributor II

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