topic Re: Is there a way to show popups on hovering over a feature? in ArcGIS JavaScript Maps SDK Questions

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

MuktaPuri — Mon, 16 May 2016 23:02:27 GMT

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!

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

AndrewFarrar — Tue, 17 May 2016 13:24:27 GMT

I appears that for v4.0, esri ditched the dijit popup, and added it into the "MapView" class.

MapView | API Reference | ArcGIS API for JavaScript 4.0

You should be able to utilize the same logic in the new class utilizing mouse-over, mouse-out, and click events.

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

Jean-MarcRoy — Fri, 20 May 2016 08:09:21 GMT

It seems that the view.on methods does only have the click event and not the mouse-over/mouse-out events. Any other Idea to show Popopup on mouse hovering?

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

AndrewFarrar — Fri, 20 May 2016 13:47:01 GMT

Wow I hadn't realized that....Hopefully they add those in soon, because most of my apps rely on those mouse events. I'm not seeing it anywhere in the documentation though. I won't be making the jump to 4.0 until then.

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

MuktaPuri — Fri, 20 May 2016 14:28:08 GMT

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

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

JackFairfield — Thu, 16 Mar 2017 17:51:30 GMT

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:

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

AshrafDar — Thu, 07 Dec 2017 11:44:29 GMT

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