Map does not render unless pitch is set and map is "tilted"

[lsimkins]

Mapbox does not render tiles unless map pitch is > 0 on certain Windows 7 systems. This may be related to #930 but in 930 the map was rendering. In this case, the map does not render anything at all until a pitch is set.

In the screenshots below, the rendering visible on the map is custom GL we've written and render on a separate canvas external to mapbox.

The same behavior also occurs across all mapbox-gl examples at https://www.mapbox.com/mapbox-gl-js/examples/

Map with no pitch set.

Map with pitch set to 60.

System Specs Screenshot (Processor)

System Specs Screenshot (Graphics Card)

mapbox-gl-js version: 0.15.0

Steps to Trigger Behavior

1. Test any current mapbox example. All examples are blank.
2. map.setPitch(45)
3. Tiles render correctly.
4. map.setPitch(0)
5. Map no longer renders.

Expected Behavior

Map renders normally.

Actual Behavior

Map does not render unless tilted/pitched.

[mourner]

This might have been fixed by #1606 — can you verify with the master branch version?

[blanchg]

I can see this happening on one machine and not the other even with a fresh trunk build from an hour ago and v0.18.0

[lsimkins]

Very sorry, we don't have an in-house machine that replicates the bug. This was happening on a client's computer that I don't have access to without a visit.

We did overcome the bug by setting the map pitch to an imperceptible 0.01. Hacky but did the trick.

[maptastik]

I found this issue trying to figure out why the Pokemon GO map shows up on my work machine, but most other mapbox-gl-js maps don't. As far as I can tell, I'm experiencing the same issue on my Windows 7 machine as @lsimkins: mapbox-gl-js maps only render when pitch > 0. When they don't render, there is no error in the console. I've run through many of the examples you all have just to check and pitch seems to be the common factor in determining whether or not the map renders. This is demonstrated in the GIF below taken from the interacting with the map in the example "Fly to a location based on scroll position"

var chapters = {
    'baker': {
        bearing: 27,
        center: [-0.15591514, 51.51830379],
        zoom: 15.5,
        pitch: 20
    },
    'aldgate': {
        duration: 6000,
        center: [-0.07571203, 51.51424049],
        bearing: 150,
        zoom: 15,
        pitch: 0
    },
...

The map renders properly on load for the 'baker' chapter where the pitch=20. However, when the map moves and finally settles at the aldgate chapter, where the pitch=0, the map disappears without error.

Follow OP's lead, here are my system and graphic specs:
System Information (Screenshot)

Display Information (Screenshot)

I'm happy to hunt down any other information that might be helpful. This is the last real hurdle - beyond learning the thing - to us adopting mapbox-gl-js.

Thanks!

[peterbodo]

Hi,

Is this issue already solved?
It has not rendered on my computer with 0.22.1 but works as expected with 0.23.0.

[mourner]

Possibly! I'm going to close for now then, and reopen in case this is confirmed to still be an issue on 0.24.

[peterbodo]

@mourner Sorry, but it is still an issue, with a colleagues computer with 0.24.

[maptastik]

I've tested this with 0.24 on Windows 7 and still have the same visibility issue. For what it's worth, I tried using mapbox-gl-js in an Ubuntu 14 virtual box running on the same Windows 7 machine and the library worked fine regardless of pitch. Would that not eliminate the graphics card as a contributing culprit?

After reading the "Fall Cleaning" post it seems using mapbox-gl-js is going to be more and more essential to using Mapbox services. Certainly to get the most out of it! I'm afraid I don't know quite where to begin to try and figure out this bug, but if there's any information I can provide that would be helpful for fixing this, I am happy to run tests and hunt that info down.

[ouchiko]

I'd just add that I had no joy with the graphics card updates and it failed in both Firefox and Chrome (latest v) on Windows 7.. I set the pitch to 1 [ mapgl.setPitch(1) ] and all was good. I added this during the mapgl.on('load', function(){});