Incorporações de mapas: o pop-up inicial tem fundo transparente

Question

Estou incorporando um mapa da Web ao meu site. O mapa é dividido em áreas e, quando você clica em cada área, um pop-up exibe mais informações sobre ela. O problema é que esse pop-up não está sendo exibido corretamente. Ele fica com o fundo transparente, e algumas propriedades CSS iniciais são definidas como display:none; ou width:0; — o que impede que ele seja exibido corretamente.

O mapa incorporado fica inicialmente oculto (com display:none;) atrás de uma aba (funcionalidade em JavaScript). Acho que isso está causando o problema.

Depois que você clica no ícone de "maximizar", o fundo branco aparece e tudo funciona como esperado.

Este é o JavaScript que estou usando para mostrar/ocultar as abas:

http://jsbin.com/lorovu/edit?html,js

Há alguma maneira de redesenhar o mapa ou redefinir os valores de largura/altura/exibição... seja depois que a página carregar, seja quando a aba for clicada? Eu gostaria muito que o pop-up inicial fosse exibido normalmente, com o fundo branco, para que fosse possível ler o conteúdo.

Obrigado,

Dave

khutchins · Answer

Just tested the jsbin in incognito mode and I can't repro either the popup issue or the console errors you are seeing. Also tried testing the map outside of an iframe in incognito mode and everything is working for me.  Tested in Chrome on Mac.

https://rrpdc.maps.arcgis.com/apps/Embed/index.html?webmap=89edafaaf60b4d2383e825a682ed3221&extent=-78.4946,37.1293,-76.…

deleted-user-pDhHNdx3RgUH · Answer

Kelly Hutchins , actually, upon further review, it's sometimes working, and sometimes not working. I've cleared all my cache, and have tried opening it in a private browsing window. I'm testing mostly in Chrome on Mac, but I'm seeing the issue in Mac/Safari as well. And in Mac/Firefox, the iframe actually doesn't load on the initial page load. If I right-click and choose "reload frame," it then displays correctly. I noticed some errors with the js.arcgis.com files in the web console (attached screenshot). Not sure if you were aware of those.

And upon pulling up your example on JS Bin again, I was seeing the problem right there in JS Bin. If you clear your cache, or try it in a private browsing window, I think you might be able to re-create it. It seems as though if you have already loaded that maps URL in your browser once, it will work fine. But if it is the very first time you are loading that map, that's when the issue arises.

Is there any way, using javascript, to reload the map when an element on the page is clicked? I could try adding that code to my javascript that runs on the clicking of the tabs that show/hide the map.

Thanks!

JS Bin, error reproduced

Web console errors in Mac/Firefox

deleted-user-pDhHNdx3RgUH · Answer

Thanks Kelly. I really appreciate you trying to recreate the issue in JS Bin.

Without changing any code, the issue appears to have resolved itself. I did launch the site on a live domain, and it's now served up via https, but those are the only things I can think of that have changed from the testing environment.

Either way, it's working now, which is fantastic.

Happy New Year!

Dave