how to hook events on graphics layer at 4.6

BanchanaPandey · ‎02-10-2018

With 4.6 version of JSAPI, many events that we could hook into for the GraphicsLayer and many other things like Map,etc have gone away. How can we tap into and event when graphics are added to a graphicslayer on a map or how can we implement something like this pulsing graphics layer - JSFiddle in 4.6 since similar events on Map are no more available and MapView doesn't offer anything like that.

RobertScheitlin__GISP · ‎02-12-2018

Banchana,

Here is a sample that duplicate what you have.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Intro to graphics - 4.6</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">
  <script src="https://js.arcgis.com/4.6/"></script>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/Graphic",
      "esri/layers/GraphicsLayer",
      "dojo/domReady!"
    ], function(
      Map, MapView, Graphic, GraphicsLayer
    ) {

      var map = new Map({
        basemap: "dark-gray"
      });

      var view = new MapView({
        center: [-84.51, 39.098],
        container: "viewDiv",
        map: map,
        zoom: 13
      });

      /*************************
       * Create a point graphic
       *************************/

      // First create a point geometry (this is the location of the Titanic)
      var point = {
        type: "point", // autocasts as new Point()
        longitude: -84.511437,
        latitude: 39.098506
      };

      // Create a symbol for drawing the point
      var markerSymbol = {
        type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
        color: [68, 140, 203],
        size: 16,
        outline: { // autocasts as new SimpleLineSymbol()
          color: [255, 255, 255],
          width: 1
        }
      };

      // Create a graphic and add the geometry and symbol to it
      var pointGraphic = new Graphic({
        geometry: point,
        symbol: markerSymbol
      });

      var pulseLayer = new GraphicsLayer();

      view.when(function() {
        map.add(pulseLayer);
        pulseLayer.on('layerview-create', function(evt) {
          // Add the graphics to the view's graphics layer
          pulseLayer.add(pointGraphic);
          pulse();
        });
      });

      function pulse() {
        var opacity = 1;
        function reduceOpacity() {
          // fade
          pulseLayer.removeAll();
          markerSymbol.color = [68, 140, 203, opacity];
          markerSymbol.outline.color = [255, 255, 255, opacity];
          pointGraphic = new Graphic({
            geometry: point,
            symbol: markerSymbol
          });
          pulseLayer.add(pointGraphic);
          opacity = opacity - 0.01;
          if (opacity <= 0) {
            clearInterval(fade);
            return;
          }
        }
        var fade = setInterval(reduceOpacity, 1);
        setTimeout(pulse, 1000); // repeat
      }

    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

JordanBaumgardner · ‎02-12-2018

Some of the events are gone, but the hooks are still there. You can inherit the class and override some of the key functions.

For example, I used a custom renderer to allow for any range of unique symbology. You could modify this to allow each symbol to do whatever you wanted. Add a timer to pulse, change color, size, rotation, add listeners to other events ie data changes, render a d3 svg. We used something like the code below to show a pie-graph for each points symbol. Be careful with this though, you will get one of these for each item displayed on your map. You must also clean up your objects and event handlers when your object is destroyed by the map.

Hope it helps.

https://community.esri.com/thread/192639-custom-simplerenderer-js-43
https://jsbin.com/doticip/4/edit?html,output

        var map = new Map({
          basemap: "hybrid"
        });

        var view = new MapView({
          container: "viewDiv",
          map: map,
          center: [-73.950, 40.702],
          zoom: 11,
        });

        var CustomSymbolRenderer = 
            SimpleRenderer.createSubclass(SimpleRenderer,
                {
                getSymbol: function (prm1,prm2) {
                    var sym = this.inherited(arguments);
                    console.log(Math.floor(Math.random() * 255) + 1);
                    sym.color = new Color([
                      Math.floor(Math.random() * 255) + 1, 
                      Math.floor(Math.random() * 255) + 1, 
                      Math.floor(Math.random() * 255) + 1, 
                      .5]);
                    this.set("symbol",sym.clone());
                    return sym;
                }
            });      
      
      
            var featureLayer = new FeatureLayer({
                url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NYCDemographics1/FeatureServer/0"
                , renderer: new CustomSymbolRenderer({
                    symbol: new SimpleFillSymbol({
                        color: "red",
                        outline: {
                            color: [128, 128, 128, 0.5],
                            width: "0.5px"
                        }
                    })
                })
            });

        map.add(featureLayer);
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍