Features

// Use reactiveUtils to watch the view's click event.
reactiveUtils.on(() => view, "click",
(event) => {
  // Call fetchFeatures and pass in the click event screenPoint
  featuresWidget.fetchFeatures(event.screenPoint).then((response) => {
    // Access the response from fetchFeatures
    response.allGraphicsPromise.then((graphics) => {
    // If there are no graphics in the click event, then make sure
    // the Features widget is not showing.
      if(graphics.length === 0){
        featuresWidget.visible = false;
      }
      // If graphics do exist, set the Features widget features property to the returned
      // graphics from fetchFeatures and set the visible property to true.
      else{
        featuresWidget.features = graphics;
        featuresWidget.visible = true;
      }
    });
  });

view.on("click", function(event){
  // event is the event handle returned after the event fires.
  console.log(event.mapPoint);
});

// Use reactiveUtils to watch the view's click event.
reactiveUtils.on(() => view, "click",
(event) => {
  featuresWidget.open({
    // Title and content displayed in the widget
    title: `Click location: (${event.mapPoint.x},${event.mapPoint.y})`,
    content: "This is the default content displayed on click."
  });
});

// The Features widget must have a view set on the widget along with the
// location property to fetch features.
// Use reactiveUtils to watch the view's click event.
reactiveUtils.on(() => view, "click",
(event) => {
  featuresWidget.open({
    location: event.mapPoint,
    // Display the content for the selected feature(s) if a popupTemplate is defined.
    fetchFeatures: true
  });
});

// Open the Features widget with a specified array of graphics that already
// have a PopupTemplate set and display the feature menu when it opens.
featuresWidget.open({
  // array of graphics
  features: graphics,
  // selected features initially display in a list
  featureMenuOpen: true
});

featuresWidget.open({
  location: event.mapPoint,
  fetchFeatures: true,
  featureMenuOpen: true,
  actions: [{
    // This text is displayed as a tooltip
    title: "Zoom out",
    // The ID used to reference this action in the event handler
    id: "zoom-out",
    // Sets the icon font used to style the action button
    className: "esri-icon-zoom-out-magnifying-glass"
  },
  {
    title: "Delete Feature",
    id: "delete-feature-action",
    icon: "trash"
  }]
});

// Fires each time an action is clicked
reactiveUtils.on(()=> featuresWidget, "trigger-action", (event)=>{
  // If the zoom-out action is clicked, execute the following code
  if(event.action.id === "zoom-out"){
    // Zoom out two levels (LODs)
    view.goTo({
      center: view.center,
      zoom: view.zoom - 2
    });
  }
});