nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Any way to hide an infoWindow on a mouse click?

JayGregory

Was curious if anyone's found a way to hide an infoWindow when a user clicks outside the infoWindow (instead of having to click the "x" or click on another map graphic which displays another infoWindow.
I tried setting a dojo.connect event handlers like dojo.connect(map, "onClick", map.infoWindow.hide()); but that doesn't seem to work.

Thanks!

Jay

Find more posts tagged with

Accepted answers

StephenLead

But clicking on a graphic would then also constitute a click on the map

You can trap for that using:

dojo.connect(map, "onClick", function(evt) {   if(!evt.graphic) {     console.log("map click");   } });

All comments

StephenLead

I tried setting a dojo.connect event handlers like dojo.connect(map, "onClick", map.infoWindow.hide()); but that doesn't seem to work.

Try this instead:

dojo.connect(map, "onClick", function() {
  map.infoWindow.hide();
});

JayGregory

Thanks for the suggestion. That just seems to hide the infoWindow as soon as it's shown - it's only up for a second. I also tried

dojo.connect(map.infoWindow, "onShow", function() {
 dojo.connect(map, "onClick", function() {
  map.infoWindow.hide();
 });
 });

and that didn't seem to work either. Same behavior - just hides the infoWindow right away.

Jay

StephenLead

That just seems to hide the infoWindow as soon as it's shown - it's only up for a second.

It sounds like you might be using a mouse click on the map to open the infoWindow in the first place?

What's displayed in the infoWindow - can you trigger it to open when you click on something else( a feature, graphic, or layer) instead?

Steve

JayGregory

The infoWindow only shows when you click on a graphic. But clicking on a graphic would then also constitute a click on the map, which fires the infoWindow.hide() function too, hence the hiding. I tried setting a handler to only connect the infoWindo.hide() on a mouse click _once_ the infoWindow is shown. And then as soon as the infoWindow is hidden, diconnect the event handler. But that didn't work either.

StephenLead

But clicking on a graphic would then also constitute a click on the map

You can trap for that using:

dojo.connect(map, "onClick", function(evt) {   if(!evt.graphic) {     console.log("map click");   } });

DavidTreering

Is there a way to do this yet? I have the InfoWindow closing automatically by a number of different events, using:

   function hideInfoWindow(){
    map.infoWindow.hide();
     }

But I can't find an "event" for clicking on the map anywhere to close the infoWindow.

JayGregory

Thanks Steven! That did it!

DavidTreering

Thanks Steven! That did it!

I'm pretty new to JS and I didn't quite get this yet. Can you explain what I need to do to this?

  dojo.connect(map, "onClick", function(evt) {
     if(!evt.graphic) {
       console.log("map click");
     }
     hideInfoWindow();
  });
   function hideInfoWindow(){
    map.infoWindow.hide();
     }

JayGregory

In your case, the hideInfoWindow() is executing outside the if statement - that is, no matter if you clicked on a graphic or not. You need to move the hide statement inside the if statement, although you can make it simpler by just attaching this handler instead - no need to call the extra function just to execute one line of code. The !evt.graphic means "if you didn't click on a graphic". Hope that helps!

dojo.connect(map, "onClick", function(evt) {
  if(!evt.graphic) {
    map.infoWindow.hide();
  }
});

DavidTreering

Still not working. Is a polygon tiled layer used as a basemap considered a graphic? Or only the dynamic feature layer?

StephenLead

Is a polygon tiled layer used as a basemap considered a graphic? Or only the dynamic feature layer?

Hi David,

No, a tiled or dynamic layer isn't considered a graphic. A feature layer is, as is a graphics layer, or a single graphic.

Can you post your whole code, or a link to your site?

Cheers,
Steve

DavidTreering

Steve, Here's my code...this is a work in progress. Not everything works. Please let me know if my services are coming through alright or if you cannot see them load.
Thanks,
David

lurec_051412_working.zip

DavidTreering

I'll also want to hide the infoWindow if scale changes beyond the visible scale range for the layer. Hmmmm.
I appreciate your time, and any ideas would be a great help.

DavidTreering

I've tried opening it up. Can you try again?

StephenLead

Hi David,

I think the map's onClick handler isn't being initiated because it's not sitting inside a function. Try moving that listener immediately underneath the map declaration (eg around line 368).

I'll also want to hide the infoWindow if scale changes beyond the visible scale range for the layer

This is a bit trickier since the API doesn't directly tell you whether a layer is "on but outside its scale range". See the post here for some pointers you may be able to use.

You may need to hard-code something in your code, then check the current scale range on each zoom change.

Good luck,
Steve

DavidTreering

Try moving that listener immediately underneath the map declaration

That worked, thanks!

I'll try to

hard-code something in your code, then check the current scale range on each zoom change

, and post what I do. I'll probably choose to store variables rather than send a query every onZoomChange.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.