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){
});
Solved! Go to Solution.
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);
The graphics are getting removed before you've added the event handler. Move it up in the code.
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.
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>
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.
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);
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);
No, after adding the graphic, there was a two second pause before removing it as a visual test.