How to Hide InfoWindow/Popup when "no information available" or when buffering?

Question

I have an app that does some buffering, only problem is when I click on the map to put in the point/line/polygon vertices to do the buffer, I get popups at every mouseclick. It doesn't interrupt the buffer process but its super annoying.

At first thought I wanted to try and disable the popups so that they didn't show when "No information available" was the result. But I figure there will be more times than not when a popup will return some results and thus, need to disable/hide the popup so that it doesn't appear at all while the buffer process is running.

I've tried putting map.infoWindow.hide(); within the buffer without success and also saw this post recommending an onClick handler and have been unsuccessful as well. Any tips appreciated.

Answer 1

This question is a year old but this alternate solution may be helpful to others.

If you are using the Popup class you can set the Popup to a global variable so that you can set it not to show the window while updating. To prevent getting the "No information available" window, just set visibleWhenEmpty to false and hideDelay to 0:

var popup = new Popup(...);
popup.visibleWhenEmpty= false;
popup.hideDelay = 0;        // Number of milliseconds after which the popup window will be hidden when visibleWhenEmpty is false & number of features is 0

map = new Map("...", {
    ...
    infoWindow: popup
});

map.on("update-start", function () {
    popup.popupWindow= false;        // Indicates whether the popup window should be displayed.
}

map.on("update-end", function () {
    popup.popupWindow= true;        // Indicates whether the popup window should be displayed.
}

Unfortunately, this does not prevent the "Searching" window from popping up so you'll still briefly get a popup window even if there are no results. It may actually be preferable to get the "No information available" window for a few seconds instead of not seeing it at all.

Answer 2

Look at this post for a good example JS API Toggle Pop-Up On & Off. When you add connect to the onclick event to the map or featurelayer etc, you need to save the reference to the clickHandle. Then when a workflow is started where you don't want popups on, you disconnect and then re-connect when finished.

//instead of this -- don't do this
dojo.connect(featureLayer,"onClick",function(evt){
   map.infoWindow.setFeatures([evt.graphic]);
   map.infoWindow.show(evt.mapPoint);
});

//do this -- save the click handle to disconnect or reconnect later
var clickHandlePopup = dojo.connect(featureLayer,"onClick", showPopup(evt));

//clickhandler
function showPopup(evt){
   map.infoWindow.setFeatures([evt.graphic]);
   map.infoWindow.show(evt.mapPoint);
}

//start buffering -- disconnect
if (clickHandlePopup) {
    dojo.disconnect(clickHandlePopup);
    clickHandlePopup = null;
}

//stop buffering -- connect
if (!clickHandlePopup) {
    clickHandlePopup = dojo.connect(featureLayer, "onClick", showPopup(evt));
}

Also, see this post for turning popups on and off when using webmaps Turn Popups On/Off in ArcGIS Online Webmap via Javascript API Web Application

Answer 3

There are so many people are asking for this change to remove the "no information is available" popup yet ESRI refuses to change it. The default should be that the popup is disabled if the user does not click on a feature. This is just common sense for a user interface.

Anyway, I was able to disable the popup when the user click on one of my features on a graphics layer. Otherwise, the popup is enabled when the user clicks on a feature from our GIS system configured by the GIS team via webmap in Portal. Unfortunately, it still pops up when the user clicks an empty space. I have not found a way to detect a click on empty space and disable it only when that occurs.

var promiseCreateMap = arcgisUtils.createMap(webmapID, "main-map", options);

promiseCreateMap.then(function(response) {
  MainPage.map = response.map;

  MainPage.clickEventHandle = response.clickEventHandle;
  MainPage.clickEventListener = response.clickEventListener;
  ...
}

// Graphics layer on click event show my own Bootstrap dialog instead of InfoWindow
self.graphicsLayer.on("click", function(evt) {
  MainPage.disableInfoWindow();
  $('#dialog-irthnet').modal('show');
  $(document).on('hide.bs.modal', '#dialog-irthnet', function() {
    MainPage.enableInfoWindow();
  });
});

MainPage.disableInfoWindow = function() {
  // Connect editor
  if (MainPage.clickEventHandle) {
    dojo.disconnect(MainPage.clickEventHandle);
    MainPage.clickEventHandle = null;
  }
};

MainPage.enableInfoWindow = function() {
  // Disconnect editor
  if (!MainPage.clickEventHandle) {
    MainPage.clickEventHandle = dojo.connect(MainPage.map, "onClick", MainPage.clickEventListener);
  }
};