Mapbox is not filling Hype rectangle

I have used Mapbox inside hype in some projects before and I was able to fix this using some cheap hacks, but I am looking to fix it for good this time.

The problem is, that mapbox is having some trouble rendering the map inside a rectangle shape, the map is not filling the rectangle container until I resize the browser. (97.5 KB)

The way I have fixed it in the past is to make the rectangle change size using no more than 5 frames at the start, but I believe there should be a way to fix this that I am not seeing.

Turns out that the solution is indeed more simple that I thought:

I found this site:

And using the map.resize(); fixes the problem, but I am still open to any alternative. Meanwhile, this patches the problem.

The thing that doesn’t makes me completely happy using this, is that I have to use a TimeOut in order to work:
setTimeout(function () { console.log("resize triggered"); map.resize(); }, 200);

1 Like

i’d guess that you can wrap the whole mapbox-init-function in a setTimeout with a timevalue of 1 … without resize() …


No need to even do that ( which works)

Just call the javascript from the Main Timeline after 1 frame using a timeline action.

And for anyone else reading this, this issue sis not a hype issue it is an issue for many html container platforms.


Yeah, both solutions do the trick. Thanks a lot!