Large sprite sheet .png pixel size + many symbols onscreen -> rbush.js error

[kristfal]

Environment:

OS X Yosemite
Chrome 39.0.2171.95 (64-bit)

Using a custom dataset (hosted @mapbox).
Using custom styling and sprite sheet generated by latest mapbox-gl-js release.

I can share the style, sprite sheet and dataset in a PM if needed.

Issue:
In regions (and at lower zoom levels) with a high amount of symbols (roughly 20-30 onscreen) rendered from the sprite sheet, symbols switch sprite source from the correct symbols to random symbols in the sprite sheet. Additionally, tiles with sprites do not render when viewing new areas and the console prints error:

rbush.js:252 Uncaught TypeError: Cannot read property 'leaf' of undefined

The sprite sheet contains 54 sprites.
The normal sheet is 35kb, at 814x814px.
The retina sheet is 80kb, at 1614x1614px.

Hotfix/workaround:

We reduced sprite sheet pixel size:

The sprite sheet still contains 54 sprites.
The normal sheet is now 30kb, at 482x442px.
The retina sheet is now 66kb, at 982x876px.

The issue is no longer present, even when forcing screen resolution to 3000x3000px and viewing 80+ symbols onscreen.

Let me know if you need more info.

[jfirebaugh]

This is probably similar to #653 / #141 in that the sprite atlas (internal storage for sprite images) is overflowing.

[andrewsunglaekim]

@kristfal where did you change the sheet pixel size?

[kristfal]

@andrewsunglaekim you'll have to reduce the size of the .pngs that you use to generate the sprite sheet. Remove any padding (or in worst case resuce icon size, and overscale them in you style).

[mourner]

@kristfal is this still reproducible?

[kristfal]

@mourner Sorry for slow reply. I'm unable to reproduce, feel free to close