Understanding Events in the ArcGIS JavaScript API

Oct 13, 2025 by pinkandtrash.com 77 views

Introduction

When working with the ArcGIS JavaScript API, especially in conjunction with the editor widget, it's essential to understand the various events that can be leveraged to enhance the user experience and improve the overall functionality of your application. In this article, we will delve into the world of events in the ArcGIS JavaScript API, focusing on how to utilize them to get the selected features being used by the attribute inspector and when features are added to the map.

Understanding Events in the ArcGIS JavaScript API

The ArcGIS JavaScript API provides a robust set of events that can be used to respond to various user interactions and changes within the application. These events can be categorized into different types, including:

UI events: Triggered by user interactions with the UI components, such as button clicks, dropdown selections, and text input changes.
Map events: Triggered by changes to the map, such as map loads, zoom levels, and layer additions.
Editor events: Triggered by changes to the editor widget, such as feature selection, editing, and validation.

Getting the Selected Features using the Attribute Inspector

The attribute inspector is a powerful tool in the ArcGIS JavaScript API that allows users to view and edit the attributes of selected features. To get the selected features being used by the attribute inspector, you can utilize the following events:

editor.on("feature-clicked"): This event is triggered when a user clicks on a feature in the map. You can use this event to get the selected feature and update the attribute inspector accordingly.
editor.on("feature-selected"): This event is triggered when a user selects a feature in the map. You can use this event to get the selected feature and update the attribute inspector accordingly.

Here's an example code snippet that demonstrates how to use these events to get the selected features:

require([
  "esri/Map",
  "esri/views/MapView",
  "esri/layers/FeatureLayer",
  "esri/widgets/Editor",
  "dojo/on"
], function(Map, MapView, FeatureLayer, Editor, on) {
  // Create a map and add a feature layer
  var map = new Map({
    basemap: "streets"
  });
  var featureLayer = new FeatureLayer({
    url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/World_Street_Map/FeatureServer/0"
  });
  map.add(featureLayer);
// Create a view and add the editor widget
var view = new MapView(
container "viewDiv",
map: map
);
var editor = new Editor(
view view
);
view.ui.add(editor, "top-right");
// Get the selected features using the attribute inspector
on(editor, "feature-clicked", function(event) 
var selectedFeature = event.feature;
console.log("Selected feature", selectedFeature);
);
on(editor, "feature-selected", function(event) 
var selectedFeature = event.feature;
console.log("Selected feature", selectedFeature);
);
});

Getting Features Added to the Map

When features are added to the map, you can utilize the following events to get the new features:

editor.on("feature-added"): This event is triggered when a new feature is added to the map. You can use this event to get the new feature and update the map accordingly.

Here's an example code snippet that demonstrates how to use this event to get the new features:

require([
  "esri/Map",
  "esri/views/MapView",
  "esri/layers/FeatureLayer",
  "esri/widgets/Editor",
  "dojo/on"
], function(Map, MapView, FeatureLayer, Editor, on) {
  // Create a map and add a feature layer
  var map = new Map({
    basemap: "streets"
  });
  var featureLayer = new FeatureLayer({
    url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/World_Street_Map/FeatureServer/0"
  });
  map.add(featureLayer);
// Create a view and add the editor widget
var view = new MapView(
container "viewDiv",
map: map
);
var editor = new Editor(
view view
);
view.ui.add(editor, "top-right");
// Get the new features added to the map
on(editor, "feature-added", function(event) 
var newFeature = event.feature;
console.log("New feature", newFeature);
);
});

Conclusion

Introduction

In our previous article, we explored the various events in the ArcGIS JavaScript API that can be used to get the selected features being used by the attribute inspector and when features are added to the map. In this article, we will answer some frequently asked questions (FAQs) related to these events.

Q: What is the difference between `editor.on("feature-clicked")` and `editor.on("feature-selected")`?

A: The editor.on("feature-clicked") event is triggered when a user clicks on a feature in the map, while the editor.on("feature-selected") event is triggered when a user selects a feature in the map. The feature-clicked event is typically used to get the feature that was clicked, while the feature-selected event is used to get the feature that was selected.

Q: How can I get the feature that was added to the map using the `editor.on("feature-added")` event?

A: To get the feature that was added to the map using the editor.on("feature-added") event, you can access the event.feature property. This property contains the feature that was added to the map.

Q: Can I use the `editor.on("feature-clicked")` event to get the feature that was clicked, even if it's not selected?

A: Yes, you can use the editor.on("feature-clicked") event to get the feature that was clicked, even if it's not selected. This event is triggered when a user clicks on a feature in the map, regardless of whether the feature is selected or not.

Q: How can I prevent the `editor.on("feature-clicked")` event from being triggered when a user clicks on a feature that is not selected?

A: To prevent the editor.on("feature-clicked") event from being triggered when a user clicks on a feature that is not selected, you can add a check to see if the feature is selected before triggering the event. You can use the editor.getSelectedFeatures() method to get the selected features and then check if the clicked feature is in the list of selected features.

Q: Can I use the `editor.on("feature-added")` event to get the feature that was added to the map, even if it's not selected?

A: Yes, you can use the editor.on("feature-added") event to get the feature that was added to the map, even if it's not selected. This event is triggered when a new feature is added to the map, regardless of whether the feature is selected or not.

Q: How can I get the feature that was edited using the `editor.on("feature-edited")` event?

A: To get the feature that was edited using the editor.on("feature-edited") event, you can access the event.feature property. This property contains the feature that was edited.

Q: Can I use the `editor.on("feature-edited")` event to get the feature that was edited, even if it's not selected?

A: Yes, you can use the editor.on("feature-edited") event to get the feature that was edited, even if it's not selected. This event is triggered when a feature is edited, regardless of whether the feature is selected or not.

Conclusion

In this article, we answered some frequently asked questions related to the events in the ArcGIS JavaScript API that can be used to get the selected features being used by the attribute inspector and when features are added to the map. We hope this article has been helpful in clarifying any confusion you may have had about these events.