Call Mapbox GL Funktion von jQuery

Question

Ich habe eine Mapbox Karte auf einer Seite, die in ein gleitendes Panel lädt, die von jQuery gesteuert wird.

Wenn ich die Größe des Browserfensters ändere und das Feld umschalte, wird die Karte oft nur teilweise gefüllt. Dies ist ein bekanntes Problem mit der Mapbox GL API.

Aus ihrer Dokumentation:

Wenn Sie Ihre Karte versteckt sind zunächst mit so etwas wie display: none und sie dynamisch mit JavaScript zeigt, kann es einige Probleme haben erscheinen und Dimensionierung korrekt. Die Karte kann ihre eigene Größe nicht herausfinden, wenn sie von der Seite ausgeblendet wird, da sie in der Browser-Berechnung keine Größe hat.

Mit MapBox GL JS Sie können map.resize() rufen Sie die Karte zu erkennen und die Größe

Also, ich brauche MapBox die map.resize() Funktion aus meinem jQuery-Code aufzurufen, wenn die Schiebefenster ist geöffnet. Das Problem ist, ich kann es nicht funktionieren lassen. Ich habe versucht, die folgenden:

1: $(map).trigger('resize'); 
2: $(window.map).resize(); 
3: $(window.map).trigger('resize'); 
as well as 
4: $(window).trigger('resize'); 

Das Ding ist, ich bin nicht sicher über meine Syntax hier und die richtige Art und Weise eine Funktion in einem anderen Skript in jQuery Wohnsitz zu rufen. Ich habe bestätigt, dass das 'map'-Objekt global ist, da die Eingabe von map.resize() direkt in die Dev-Tools-Konsole meines Browsers funktioniert [dh. behebt die Kartenanzeige]. Ich kann jQuery einfach nicht dazu bringen, die Funktion zu bestehen.

Auch seltsam ist, dass $(window).trigger('resize') hat nicht funktioniert, wie manuelle Größenanpassung des Browser-Fensters löst automatisch die Funktion "map.resize()" auch [und behebt das Map-Rendering].

EDIT:

Sollte erwähnt haben. Ich habe das map Objekt global verfügbar gemacht mit: window.map = map; innerhalb des mapbox.js Skripts und dafür gesorgt, dass das mapbox.js Skript vor dem jQuery geladen wird, aber immer noch keine Freude.

Answer 1

Ich habe es geschafft, dies am Ende zu lösen. Das Problem war, dass der Code war ich mit der Karte redraw auszulösen war wie folgt:

//inside jQuery map click function 
$("#map").slideToggle(200); 
$(window.map).resize(); 

Sein ein bisschen ein jQuery Neuling, ich [idiotisch] angenommen, dass diese Befehle der Reihe nach würde Feuer aber natürlich, die slideToggle() Animation ist asynchron. Daher rief jQuery die Funktion Mapbox resize() auf, bevor das Schiebefeld seine endgültigen Abmessungen erreicht hatte. Damit die Karte auf seine Ausweich Größe von 400x300px auf Standard verursacht

Alles, was ich tun musste, um den Anruf zu halten wurde resize() in eine anonyme Funktion MapBox, ausgelöst, nachdem die slidetoggle() abgeschlossen hat:

$("#map").slideToggle(200, function() 
{ 
     $(window.map).resize(); 
}); 

Es ist immer noch ein kleiner visueller Fehler darin, dass die Karte anfänglich bei 400x300px erscheint, bevor sie schnell fangt, um ihren Container zu füllen. Aber da dies ein bisschen ein Randfall war, abhängig davon, dass der Benutzer sein Browserfenster zwischen dem Öffnen und Schließen der Karte in der Größe verändert hat, ist es gut genug, um es als gelöst zu betrachten.