Is there a way to show popups on hovering over a feature?

Question

In the ArcGIS JS API v 3.x there was a way to show popups on hovering over a feature: Feature layer hover | ArcGIS API for JavaScript

Is it possible to do something similar using the v 4.0 API?

Also, is there a way to run custom code on the onClick event of a feature on a layer? (We need to be able to display something other than a popup when a feature is clicked.

Thanks!

AshrafDar · Answer

Hi Mukta,

The maptip in the 3.x JavaScript APIs for Arcgis was displaying the content in it from the map service that is already loaded into the memory. However in the latest APIs the logic has completly chaged to load the latest content from the server everytime user clicks on a feature in the map. Therefore if the maptip is bound on mouseover, it would have lots of requests to the server which will impact the performance. Hence the maptip is bound on click.

However to fulfill our requirement, I wrote a small piece of code to display the maptip on mouse hover using the event that is also mentioned by Jack.

Here is the sample code:

var featureDetailsRequest;
   app.sceneView.on("pointer-move", function (args) {
       app.sceneView.hitTest(args).then(function (evt) {
          if (evt.results[0].graphic == null) {
             app.sceneView.popup.close();
          }
          else {
          app.sceneView.popup.dockOptions = {
             // Disable the dock button so users cannot undock the popup
             buttonEnabled: false,
             // Dock the popup when the size of the view is less than or equal to 600x1000 pixels
             breakpoint: false,
             position: "top-right"
          };

var query = evt.results[0].graphic.layer.createQuery();
          query.objectIds = [evt.results[0].graphic.attributes.objectid];
          query.outFields = ["*"]; // You can also build the output fields based on the field mentioned in the Popup content definition to reduce the content served by the server.
          // This is to cancel any existing running requests
          if (featureDetailsRequest && !featureDetailsRequest.isFulfilled()) {

featureDetailsRequest.cancel();
          }

featureDetailsRequest = evt.results[0].graphic.layer.queryFeatures(query).then(function (result) {
             var content = "Popup Definition Here"; // You can use esriLang.substitute() to substitute the actual values
             var title = "Popup Title Here"; // You can use esriLang.substitute() to substitute the actual values
             app.sceneView.popup.open({
                location: evt.results[0].mapPoint, // location of the click on the view
                title: title, // title displayed in the popup
                content: content, // content displayed in the popup
             });
          });
       }
    });
});

Note: The above code snippet will send requests to server on every mouse move, I have wrote a small logic to send request per object under mouse pointer, if you need that, please let me know.

Regards,

Mohammad Ashraf

JackFairfield · Answer

Looks like they added a few more events since this question was asked.

I think the "pointer-move" event should work for you.

Something like this:

app.mapView.on("pointer-move", function(event) {
    console.log(event);

//Do some stuff here

});

Here is the documentation:

MuktaPuri · Answer

Yep, there are no mouse-over/mouse-out events for the view. I hope they add this functionality in soon.