Renderprobleme beim expandieren einer Karte

Communities Deutschland (Germany)
1

Hallo,

ich möchte eine OpenStreetMap auf meiner Webseite zunächst in einer Höhe von 70 Pixeln laden. Wenn der User auf “Karte aufklappen” klickt, soll die Karte auf 400 Pixel Höhe erweitert werden. Ich realisiere dies indem ich per Javascript einfach die Höhe des Karten-Kontainers anpasse. Leider führt dies zu einem Render-Problem, denn der untere Bereich der Karte bleibt grau.

Dies ist die Karte im zugeklappten Zustand:

Wenn der User auf aufklappen klickt, wird die Karte auf 400 Pixel Höhe erweitert:

Das Problem lässt sich lösen, indem die Karte zunächst in 400 Pixel Höhe geladen wird und automatisch per window.setTimeout() nach 1,5 Sekunden auf 70 Pixel Höhe gesetzt wird. Da dies jedoch eine nicht so schöne Lösung ist, wollte ich hier mal nachfragen. Weiss jemand wo das Problem liegt? Kennt jemand eventuell eine elegantere Lösung, um das Problem zu beheben?

Vielen Dank!
Niklas

2

Das Problem liegt wohl einfach nur daran, dass die Kacheln nur bei einem MouseMove Event nachgeladen werden, aber nicht nach einem Resize Event. Bindest du in deinem Karten-Kontainer die map per iframe ein? Dann wüsste ich keine “elegante” Lösung.

3

Hallo Harald,

vielen Dank für Deine Antwort.

Die Karte ist ohne Iframe sondern direkt in die Webseite eingebunden. Auch wenn man den Kartenausschnitt mit der Maus bewegt, bleibt der graue Bereich bestehen. Lediglich der Rest des Kartenauschnitts wird neu geladen.

Hast Du eine Idee was man machen könnte wenn die Karte nicht über ein Iframe eingebunden ist?

Niklas

4

Hab das in meinen Karten so gelöst:


      window.onresize = function()
      {
        setTimeout( function() { 
                 map.updateSize();
              }, 200);
      }

wenn sich die Größe des Fenstes ändert, mach ich ca 0.2 Sekunden später einen map.updateSize().

Auf jeden Fall sollte map.updateSize() der richtige Weg sein.

Gruss
walter

5

Nicht wirklich dazu fehlen mir noch ein paar Details: Welches JavaScript Framework nutzt du? Leaflet? OpenLayer?
Wie gesagt, irgendwie müsstest du halt das Event des Resizings des Containers dazu verwenden um eben die Kacheln nachzuladen. Was ich nicht nachvollziehen kann ist deine Tatsache, dass der graue Bereich auch nach einem MouseMove /-Drag verbleibt?!
Da war wambacher wohl schneller :wink:

6

Sieht nach Leaflet aus, da muss wohl invalidateSize explizit aufgerufen werden, siehe z.B. issue #2711.

Sehr schöne Karte übrigens, welche ist das?

Gruß,
Norbert

7

oops, war mal wieder voll auf der OpenLayers-Schiene :frowning:

8

:lol:<- sorry aber das konnt ich mir jetzt nicht verkneifen und nimms mir bitte nicht übel, ist definitiv nicht persönlich gemeint, aber dann hätte ich mir das del für meinen Post sparen können :wink:

9

Vielen Dank für die vielen Antworten!

Es ist Leaflet mit der Sommermap von ecmaps.de (http://ecmaps.de/?s=Sommer%20OSM)

Issue #2711 scheint tatsächlich das Problem bzw. die Lösung zu sein!

Vielen Dank nochmal.
Viele Grüße,
Niklas