Search jQuery

jQuery Forum

SOLVED: Calling Mapbox's map.resize() method from within jQuery

in Using jQuery Plugins • 6 years ago

I have a Mapbox map embedded on a page, which loads into a sliding panel which is controlled by jQuery.

If I change the browser window size and toggle the panel, the map often appears only partially filling its container. This is a known issue with the Mapbox GL API.

From their documentation:

If you’re hiding your map initially with something like display:none and showing it dynamically with JavaScript, it may have some problems appearing and sizing correctly. The map can’t figure out its own size when it’s hidden from the page, since it doesn’t have a size in the browser’s calculation.
With Mapbox GL JS you can call map.resize() to detect and resize the map

So, I need to call Mapbox's map.resize() function from within my jQuery code, when the sliding panel is opened. Trouble is, I can't seem to get it to work. I've tried the following:

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

Thing is, I'm not sure about my syntax here and the correct way to call a function in another script from within jQuery. I've checked that the 'map' variable is global, as typing 'map.resize()' into my browser's dev tools console works. I just can't seem to get jQuery to pass the command.

Also strange that the '$(window).trigger('resize')' didn't work, as manually resizing the browser window automatically triggers the 'map.resize()' function too.

Replies(6)

jakecigar

Re: Calling Mapbox's map.resize() method from within jQuery

6 years ago

map.resize() assumes you have a variable named map. That’s how you call it.

var map = new mapboxgl.Map({

…

})

makes a local variable. Maybe you need a global.

Remember that mapbox is not using jQuery.

JΛ̊KE

stiobhart

Re: Calling Mapbox's map.resize() method from within jQuery

6 years ago

Whoops! –I forgot to mention that I've globalised the 'map' variable inside the mapbox.js as follows:

//init new map
map = new mapboxgl.Map({
<snip>
});
window.map = map;
//end init new map

So that should make the 'map' variable available to jQuery as '$(map) or $(window.map), shouldn't it?

jakecigar

Re: Calling Mapbox's map.resize() method from within jQuery

6 years ago

I would have coded

window.map = new mapboxgl.Map({

Then when you want to resize,

map.resize()

Stop trying to force jQuery syntax.

JΛ̊KE

watusiware

Re: Calling Mapbox's map.resize() method from within jQuery

6 years ago

$(map) makes no sense. What are you trying to accomplish with that?

stiobhart

Re: Calling Mapbox's map.resize() method from within jQuery

6 years ago

@jakecigar

window.map = new mapboxgl.Map({

Unfortunately that didn't work either. I even tried putting a delay on it, in case the 'resize()' function needed to wait for the map overlays to finish loading, but that made no difference either -even when I ratcheted the delay up to a second:

$(window.map).delay(1000).resize();

The annoying thing is that, no matter what permutations I try, I can't be absolutely sure that the MapboxGL function is even being called in the first place. If it were my own function I could at least put a `console.log("blah blah")` in there, but the mapbox.js script runs on their servers, so I can't edit it.

The other major puzzle [as I mentioned before] is that trying to take a slightly more roundabout approach and force the map to automatically redraw by sending:

$(window).trigger('resize');

...from jQuery doesn't work either. According to the Mapbox docs, resizing the browser window automatically triggers the map.resize() function and indeed, as soon as I manually resize the window, the map instantly snaps to its correct size. So why doesn't it work programmatically? [I wonder if Mapbox are using some other means to detect a window resize than listening for the JS 'resize' event ??? ]

Oh well. Back to the drawing board!

stiobhart

Re: Calling Mapbox's map.resize() method from within jQuery

6 years ago

Aha! –methinks I've sussed it.

Seeing as the map is being revealed with a slideToggle(), I wondered if map.resize() was being sent by jQuery to the Mapbox script before the slideToggle animation was complete, thus causing the map to draw at its default size, as the containing div hadn't finalised its dimensions yet.

Looks like that was the case. I've now re-jjgged it so the map.resize() fiunction is delayed until the slideToggle animation completes:

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

...and that does the trick. It's not perfect. The map still appears at its default size of 400x300 for a split second and then snaps to fill the containing div. But i'll settle for that. It was a bit of an edge case anyway, as people are pretty unlikely to be toggling the map on and off while resizing the browser window in between. But I like to try and cover all my bases!

Top Reply

Response title

Attachments

jQuery Forum

SOLVED: Calling Mapbox's map.resize() method from within jQuery

Replies(6)

Re: Calling Mapbox's map.resize() method from within jQuery

Re: Calling Mapbox's map.resize() method from within jQuery

Re: Calling Mapbox's map.resize() method from within jQuery

Re: Calling Mapbox's map.resize() method from within jQuery

Re: Calling Mapbox's map.resize() method from within jQuery

Re: Calling Mapbox's map.resize() method from within jQuery

Statistics

Tags

Actions