Flashing a graphic on an ArcGIS API for JavaScript map

Hi people! It's been a while since I last posted, but I am definitely not falling off - just been a bit busy. Still not an excuse for not posting. Now that the apology is out of the way, let's get back to these posts, shall we?

Recently, a client requested us to make an application where he would be able to query points and zoom to them individually. OK, no problem. However, he had an additional requirement, he wanted the queried graphic to 'flash' after being zoomed to because it would be in the midst of other points and would need to be distinguishable from the rest. Though we asked the client to consider highlighting the point, he would have none of it and insisted on the flashing requirement. As my manager always says - the customer is always right, even if he is wrong. We therefore got to work on it and the result, however unflattering it may be, is what we will look at today.

Before we start, just in case someone is wondering what I mean by flashing , the GIF below should be of some assistance. The GIF is an example of a flashing graphic, derived from an implementation of the same from the browser based version of Operations Dashboard for ArcGIS.

Yes, that's what I mean by flashing

SO how do we go about flashing a graphic? A while back, this method would have helped us get there quick but sadly, the times they-are-a-changing. That said, the concept remains the same and this is what we shall focus on understanding. 

The method that we ended up using relies heavily on dojo.Animation - the foundation class for all Dojo animations. It provides several simple methods good for controlling your animation, such as play, pause, and stop. Several types of animation are made possible through this class but our main interest was in two of these methods - namely the fadeIn and the fadeOut methods. To use these functions, we included the dojo.fx module:

The fadeIn and fadeOut methods do exactly what you think they do - they make the graphic appear to be fading in and fading out. These are exactly the type of effects that will be used to make our graphic appear to be flashing. In the example in the jsfiddle below, the map loads a FeatureLayer on to it and at the click of the button on its top right hand corner, a random graphic flashes.




The following is the procedure that was followed:

After loading the map, a point FeatureLayer is added to it - no fancy properties need to be placed in the constructor. The bulk of the work, if not all of it, actually happens when one clicks the 'Flash a point' button.

Clicking the button begins the flashing process. In this application, only one point is flashed at a time therefore the graphic must be identified. Since we intend to flash random points in the layer, we first determine how many points there are in the layer using the following line:


Once we know how many points the layer contains, we can now apply a formula to make sure each time the flash button is clicked, a random feature within the layer is picked and flashed.


Once our random graphic has been identified, we can now get to the bit of flashing it. (Please note that in a more realistic case, the graphic to be flashed will be determined through a query that fits certain parameters. This is just an example). The next thing we do is add this graphic to the default graphics layer(map.graphics) or a graphics layer that you have designated.

The animateGraphic method/function takes in the graphic and applies the dojo methods that we talked about earlier. Both fadeIn and fadeOut methods have a standard set of properties for specifying animation settings, some of these include:

• node - The domNode reference or string id of a node to apply the animation effects to. In our case, we use the .getDojoShape().getNode() graphics method to get the node by which our graphic is referenced by.
• duration - how long the animation will run in milliseconds. In this case we chose to make both fadeIn and fadeOut animations last 0.7 seconds.
• easing - A timing function applied to the animation effect. In our example, the fading is applied linearly.

As seen below, these properties are applied to both functions.

All that code only accounts for one fadeIn and fadeOut cycle. Hoowever, we'd like to have three of those in quick succession. What to do? Probably what Aretha Franklin talked about in the hook of this 1968 hit. Enter the dojo.fx module and the chain convenience function which merges the animations into a single animation, playing back each of the animations one right after the other.
In our example, we create an array of animations based on repeating animations A and B three times, chain that together and then play the animation - resulting in a graphic that flashes 3 times then disappears.


(Though our example ends there, it may be prudent to clear graphics once you are done flashing them).

Well then, I hope you have enjoyed getting to know how we implemented flashing of graphics in our application. Feel free to point out any ways our code can be made cleaner or faster.

Happy coding!!