Looking for GraphicsLayer post remove event

636
7
Jump to solution
03-22-2023 07:04 AM
GregoryBologna
Occasional Contributor II

I am adding buffer graphics to 2D MapView and would like to have an event on the add\remove to check for errors. The "on" event below doesn't report an event.

const bufferLayer = new GraphicsLayer({
  title: 'some-bufferLayer',
});
	
let geometry = sketchGeometry; // a polygon

const bufferGeometry = geometryEngine.geodesicBuffer(
	geometry,     // geometry, The buffer input geometry
	buffer_size,  // distance, The specified distance(s) for buffering
	unitType,     // unit, Measurement unit of the distance
	false         // unionResults, Default Value: false
);

if (bufferLayer.graphics?.length === 0) {
	bufferLayer.add(
		new Graphic({
			geometry: bufferGeometry,
			symbol: sketchViewModel.polygonSymbol,
		})
	);

} else {
	
	bufferLayer.remove(bufferGeometry);
	bufferLayer.graphics.getItemAt(0).geometry = bufferGeometry;
}
view.map.add(bufferLayer);

// ???
// No event happening here.
bufferLayer.graphics.on("after-remove", function(event){
});‍‍‍‍‍‍‍

 

0 Kudos
1 Solution

Accepted Solutions
KenBuja
MVP Esteemed Contributor

This worked equally as well in that example

      const polygonGraphic = new Graphic({
        geometry: polygon,
        symbol: fillSymbol
      });

      const bufferLayer = new GraphicsLayer({
        title: 'some-bufferLayer',
      });
      view.map.add(bufferLayer);

      bufferLayer.graphics.on("after-add", () => { console.log("Added"); });

      bufferLayer.add(polygonGraphic);

      setTimeout(() => {
        bufferLayer.graphics.on("after-remove", () => { console.log("Removed"); });
        bufferLayer.graphics.removeAll();
      }, 2000);

 

View solution in original post

7 Replies
KenBuja
MVP Esteemed Contributor

The graphics are getting removed before you've added the event handler. Move it up in the code.

0 Kudos
GregoryBologna
Occasional Contributor II

Sorry, I should have made it clear that the after-remove fragment in my post is not in context. I did place the after-remove event before line 14.

 

0 Kudos
KenBuja
MVP Esteemed Contributor

This code (taken from this sample) shows the event listeners responding when graphics are added or removed

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
      Intro to graphics | Sample | ArcGIS Maps SDK for JavaScript 4.26
    </title>

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

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

    <script>
      require(["esri/Map", "esri/views/MapView", "esri/Graphic"], (
        Map,
        MapView,
        Graphic
      ) => {
        const map = new Map({
          basemap: "hybrid"
        });

        const view = new MapView({
          center: [-80, 35],
          container: "viewDiv",
          map: map,
          zoom: 3
        });

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

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

        // Create a symbol for drawing the point
        const markerSymbol = {
          type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
          color: [226, 119, 40],
          outline: {
            // autocasts as new SimpleLineSymbol()
            color: [255, 255, 255],
            width: 2
          }
        };

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

        /****************************
         * Create a polyline graphic
         ****************************/

        // First create a line geometry (this is the Keystone pipeline)
        const polyline = {
          type: "polyline", // autocasts as new Polyline()
          paths: [
            [-111.3, 52.68],
            [-98, 49.5],
            [-93.94, 29.89]
          ]
        };

        // Create a symbol for drawing the line
        const lineSymbol = {
          type: "simple-line", // autocasts as SimpleLineSymbol()
          color: [226, 119, 40],
          width: 4
        };

        // Create an object for storing attributes related to the line
        const lineAtt = {
          Name: "Keystone Pipeline",
          Owner: "TransCanada",
          Length: "3,456 km"
        };

        /*******************************************
         * Create a new graphic and add the geometry,
         * symbol, and attributes to it. You may also
         * add a simple PopupTemplate to the graphic.
         * This allows users to view the graphic's
         * attributes when it is clicked.
         ******************************************/
        const polylineGraphic = new Graphic({
          geometry: polyline,
          symbol: lineSymbol,
          attributes: lineAtt,
          popupTemplate: {
            // autocasts as new PopupTemplate()
            title: "{Name}",
            content: [
              {
                type: "fields",
                fieldInfos: [
                  {
                    fieldName: "Name"
                  },
                  {
                    fieldName: "Owner"
                  },
                  {
                    fieldName: "Length"
                  }
                ]
              }
            ]
          }
        });

        /***************************
         * Create a polygon graphic
         ***************************/

        // Create a polygon geometry
        const polygon = {
          type: "polygon", // autocasts as new Polygon()
          rings: [
            [-64.78, 32.3],
            [-66.07, 18.45],
            [-80.21, 25.78],
            [-64.78, 32.3]
          ]
        };

        // Create a symbol for rendering the graphic
        const fillSymbol = {
          type: "simple-fill", // autocasts as new SimpleFillSymbol()
          color: [227, 139, 79, 0.8],
          outline: {
            // autocasts as new SimpleLineSymbol()
            color: [255, 255, 255],
            width: 1
          }
        };

        // Add the geometry and symbol to a new graphic
        const polygonGraphic = new Graphic({
          geometry: polygon,
          symbol: fillSymbol
        });

        // Add the graphics to the view's graphics layer
        view.graphics.on("after-add", () => {console.log("Added");});
        view.graphics.addMany([pointGraphic, polylineGraphic, polygonGraphic]);
        
        setTimeout(()=>{
          view.graphics.on("after-remove", () => {console.log("Removed");});
          view.graphics.removeAll(); 
        }, 2000);
      });
    </script>
  </head>

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

 

0 Kudos
GregoryBologna
Occasional Contributor II

Thanks. I'm doing buffering and adding \ removing graphics from a GraphicsLayer as the buffer increases or decreases. The view.graphics.on in the sample fires dozens of times regardless of any buffer graphics, so that's not going to work. Also, I'm not facing any issues with my buffer. I just wanted to capture the remove event.

 
0 Kudos
KenBuja
MVP Esteemed Contributor

This worked equally as well in that example

      const polygonGraphic = new Graphic({
        geometry: polygon,
        symbol: fillSymbol
      });

      const bufferLayer = new GraphicsLayer({
        title: 'some-bufferLayer',
      });
      view.map.add(bufferLayer);

      bufferLayer.graphics.on("after-add", () => { console.log("Added"); });

      bufferLayer.add(polygonGraphic);

      setTimeout(() => {
        bufferLayer.graphics.on("after-remove", () => { console.log("Removed"); });
        bufferLayer.graphics.removeAll();
      }, 2000);

 

GregoryBologna
Occasional Contributor II

Ok. It's working now. I think my second try was still in the wrong place. Thanks. 

Do I need the time out?

bufferLayer.graphics.on("after-add", (event) => { 
console.log(event); 
});

//setTimeout(() => {
bufferLayer.graphics.on("after-remove", (event) => { 
  console.log(event); 
});
//}, 2000); 

 

0 Kudos
KenBuja
MVP Esteemed Contributor

No, after adding the graphic, there was a two second pause before removing it as a visual test.