infoWindow appearing in incorrect location

[Ana_Velasquez]

Hello.

I am having a frustrating problem with my infoWindow using ArcGIS API for JS.

The scenario is this:

I have 4 buttons, each one of them loads a map (a different one for each button) and each map has one layer associated. So I have four buttons that creates 4 different maps and each map has a layer (layers are also different from each other). I'm also implementing infoWindows, so every time I click the map, it brings up an infoWindow with some information about the layers that were clicked upon. The first time I click any button, the map loads just fine, with the proper size (width=100% y height=100%) and the infoWindow shows up in the right place, where I clicked.

The problem is this:

As I mentioned above, it works everything just the first time I click a button. If I want to see another map, I should click another button and here is where the problem is. When I click another button, this creates a new map and the corresponding layer is added BUT... When the map loads, the size of the map is 400px X 400px and when I click the map, the infoWindow pops up (seemingly randomly) in a incorrect location. I've read countless forum posts on this issue, which telling me to use map.resize(). I either am not understanding where exactly to use these functions, or they're simply not working.

P.S.: On a browser if I load a second map (i.e., after loading the first one) , this is, as described above, the infoWindow pops up in bad location, but if I change the size of the browser, the map starts to show the infoWindow just in the right place, where I clicked. Aalthough the size of the map remains unchanged (400x400).

I've been dealing with this problem over a week now. I'm frustrated and I don't know what else I can do.

Every help, every light is welcome.

Regards,

--

Ana

[IsaiahAguilera · Accepted solution]

I have had similar issues to this one.  What I would try is to call the resize method and the reposition method AFTER the changes to the map window have been made. The trick is to let the map know it has been moved or resized after the moving and resizing have been done.  You could even put a delay on the calls by 500ms to insure that the map div is resized and moved before the methods are called.  Something like this.

setTimeout(function(){
     map.reposition();
     map.resize();
}, 500);    

Hope this helps!

Isaiah Aguilera

[Ana_Velasquez]

Hi Isaiah Aguilera  Thanks a lot!! This just solve my life. I combined what you suggest me with another piece of code that I already had.

I'll leave it here in case someone else is having my problem.

LayerPR.setDisableClientCaching(true);

if (layerPR.disableClientCaching) {
   aspect.after(layerPR, "onUpdateEnd", function () {
      setInterval(function () {
         mapPR.reposition();  
         mapPR.resize();
      }, 500); 
   });
}

Muchas gracias, de verdad!

Regards,

--

Ana

[IsaiahAguilera]

Ana,

I'm sorry I want able to get back to you sooner! I'm glad everything worked out for you!

Thanks,

Isaiah Aguilera