Karten-Einbettungen: Das anfängliche Pop-up hat einen transparenten Hintergrund

Question

Ich binde eine Webkarte in meine Website ein. Die Karte ist in Bereiche unterteilt, und wenn man auf einen Bereich klickt, wird ein Pop-up mit weiteren Informationen dazu angezeigt. Das Problem ist, dass dieses Pop-up nicht richtig angezeigt wird. Es hat einen transparenten Hintergrund, und einige CSS-Eigenschaften werden zunächst auf display:none; oder width:0; gesetzt – dadurch wird es nicht richtig angezeigt.

Die eingebettete Karte ist zunächst hinter einem Tab ausgeblendet (mit display:none;). Der Tab verwendet JavaScript. Ich glaube, dadurch entsteht das Problem.

Sobald man auf das Symbol „Maximieren“ klickt, erscheint der weiße Hintergrund, und alles funktioniert wie erwartet.

Das ist das JavaScript, das ich für die Tabs zum Ein- und Ausblenden verwende:

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

Gibt es eine Möglichkeit, die Karte neu zu zeichnen oder die Werte für Breite/Höhe/Anzeige zurückzusetzen – entweder nach dem Laden der Seite oder beim Anklicken des Tabs? Ich würde das anfängliche Pop-up gern normal mit weißem Hintergrund anzeigen lassen, damit man den Inhalt lesen kann.

Danke,

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