How To: Apply Effects on a PictureMarkerSymbol Feature in a Web Map Using the ArcGIS API f

Summary

Picture files can be used as a replacement for point or polygon features in ArcGIS API for JavaScript by using the PictureMarkerSymbol class. The documentation, ArcGIS API for JavaScript: Class: PictureMarkerSymbol provides further information.

In certain cases, effects can be implemented to the feature to emphasize the desired features to be selected, for example, the pulse effect. The pulse effect works by blinking the features in a specified time frame manner to emphasize them. This in turn can help prevent users from clicking the wrong feature.

Procedure

The following code snippets demonstrate how to apply effects on a PictureMarkerSymbole feature in a web map using ArcGIS API for JavaScript. To apply effects over a feature, the selected layer must be given an 'id' upon creation to refer to the styles in the CSS file. The example below demonstrates how to add an id to the layer.

...
var gl = new GraphicsLayer ({id: "blink"});
...

The styles are then set in the CSS file accordingly to the desired effects or animations in the <style></style> section. The code snippet below demonstrates an example of adding a pulse effect to a feature layer.

<style>
      html, body, #map {
        height: 100%; width: 100%; margin: 0; padding: 0; 
      }
      @-webkit-keyframes
       pulse
      {
        0%
        {
          opacity: 1.0;

        }
        45%
        {
          opacity: .20;

        }
        100%
        {
          opacity: 1.0;

        }
      }
      #blink_layer { 
        -webkit-animation-duration: 3s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-name: pulse;
        -moz-animation-duration: 3s;
        -moz-animation-iteration-count: infinite;
        -moz-animation-name: pulse;
      }
    </style>

Note:
The above code snippets is an example of declaring a new feature with an id referred called 'blink'. The CSS file is then modified, declaring a @keyframe properties to describe the behavior of the animation desired. The #blink_layer is used to define the recurrence of the animation for every features created with the 'blink' id.

Article ID: 000014734

Software: