1

I have an ESRI Web Appbuilder web app with custom widgets and am having a weird issue when trying to register mouse-over events on a feature layer. I noticed that when the Chrome Dev Tools are closed and the browser window is in focus, the mouse-over doesn't appear to be working. A label should appear with the name of the feature when hovering over a point, but nothing seems to be happening. On further inspection the mouse-over is firing, but so is the mouse-out event. They both seem to be firing continuously and preventing the popup from staying open. I have 11 esri point layers with the same problem, but the polygon layers are working as expected.

I am using the recommended method based on ESRI docs and it worked fine in the ArcGIS API for JavaScript sandbox the first time I tested, but today I am getting the exact same behavior in the sandbox as in the app. Something else must be interfering when the window is in focus but it is difficult from me to debug since the issue only occurs with dev tools closed. I am not sure how to debug at this point, or where to look for the cause. Here is the code for one of the layers:

var map = window._viewerMap;

hoverLabel = new Tooltip ({
  id: "",
  style: "position:absolute; z-index:100; background-color:transparent;"
});
hoverLabel.startup();

var infoTemplate = new InfoTemplate ({
  title: "Waterbody",
  content: "<p>${Waterbody}</p><p><a href='https://myDomain/${Region}/${Brochure}/' Target='_blank'>View Brochure</a></p>"
});

var wbLayer = new FeatureLayer('https://my/rest/service/layer/2', {
  id: "Waterbody Info",
  content: infoTemplate,
  mode: FeatureLayer.MODE_SNAPSHOT,
  outFields: ["*"],
  opacity: 1
});      
            
var symbol = new PictureMarkerSymbol ({
  "url": "https://widgets/LocalLayer/images/i_hydro.png",
   "height": 16,
   "width": 16,
   "type": "esriPMS",
   "angle": 0
}) 
      
//Add layer to map and set mouse events
var renderer = new SimpleRenderer(symbol);
wbLayer.setRenderer(renderer);
map.addLayer(wbLayer, 2);
wbLayer.on('load', function(evt) {
  map.setExtent(wbLayer.fullExtent.expand(1.5));
  loading = document.getElementById("loading-div");
  loading.style.display = "none";
  addMouseEvents(wbLayer);   
});

function addMouseEvents(wbLayer) {
  
  wbLayer.on("mouse-over", function(evt) {
     console.log("mouse-over waterbody cluster");
     map.setMapCursor("pointer");
     evt.graphic.getShape().moveToFront();
     wbNameLabel(evt);
  });
      
   wbLayer.on( "mouse-out", lang.hitch(this, function(evt) {
      console.log("mouse-out waterbody cluster");      
      map.setMapCursor("default");
      closeLabel(hoverLabel);            
   }));
}

function wbNameLabel(evt) {
  console.log(evt.graphic.attributes.Waterbody, "waterbody");
  let content = evt.graphic.attributes.Waterbody;
  hoverLabel.setContent(content);
  DijitPopup.open({
    popup: hoverLabel,
    x: evt.pageX,
    y: evt.pageY
  });          
}

function closeLabel(hoverLabel) {
  DijitPopup.close(hoverLabel);
}

Screenshot of hover label working. The cursor is pointer (won't appear in screenshot)

enter image description here

Screenshot with focused window and dev tools closed. No popup and and cursor showing is the default

enter image description here

If anyone has had a similar issue and can provide some ideas on possible causes at least that would be a start.

2
  • A couple of comments on your code: I don't see mouseoverLabel getting initialized anywhere. The addMouseEvents function has weLayer as an argument, but you use wbLayer in the code
    – kenbuja
    Jul 19, 2021 at 15:01
  • Thank you for letting me know, not sure how I did that but I have a similar code for 11 layers, so I might have pasted the tooltip from another place.
    – GeoGene
    Jul 19, 2021 at 20:46

1 Answer 1

1

The issue ended up being the Dijit Popup interfering with the mouse events after opening. I fixed this by simply offsetting the popup a few pixels:

function showLabel(e) {                  
    map.setMapCursor("pointer");
    e.graphic.getShape().moveToFront();
    let content = e.graphic.attributes.Waterbody;
    console.log("showing label for ", content);
    hoverLabel.setContent(content);           
    DijitPopup.open({
      popup: hoverLabel,
      x: e.pageX,
      y: e.pageY,
      padding:{
        x:5,
        y:3
      }
    })                                         
  }

The events work now as expected, however I am still not sure why the window focus and dev tools state affected the events.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.