Adds handling for browsers where WebGL is disabled or unavailable

[romeboards]

This was a tricky one. Apparently there is little or no accounting for this - I looked through react-mapbox-gl and tried some of the event handlers (onWebGlContextLost, onError?) but they didn't seem to affect anything.

So in the meantime I threw in some code that detects if the browser has WebGL or not (see MapHelpers), and throws up a terrible error message and doesn't allow the user to use the map at all:

How to reproduce

You can disable WebGL/hardware acceleration on Chrome in Settings > Advanced Settings > Use hardware acceleration when available:

@toolness @sraby interested to hear your thoughts! Specifically it would be good to know if we can find a way to degrade this in a better fashion so a version of the map could still maybe be displayed...

[toolness]

Oh interesting... what happens if you use canvas.getContext('3d') or something? I thought that was the canonical way to detect whether 3D was supported but I dunno.

[romeboards]

@toolness yeah I found the logic here: mapbox/mapbox-gl-js#3437 (comment)

[sraby]

If it makes you feel any better, Zola <https://zola.planning.nyc.gov/?commercial-overlays=false&zoning-districts=false>'s map also crashes when hardware acceleration is disabled...

…

On Tue, Oct 16, 2018 at 5:45 PM Dan Kass ***@***.***> wrote: @toolness <https://github.com/toolness> yeah I found the logic here: mapbox/mapbox-gl-js#3437 (comment) <mapbox/mapbox-gl-js#3437 (comment)> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#49 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AMPXD0902DlzjPZUSGdnyNmfpdPOnNgXks5ullNrgaJpZM4XiYQy> .