Make "Missing Mapbox GL JS CSS" a console warning

[jfirebaugh]

Putting "Missing Mapbox GL JS CSS" in the DOM has confused at least one user (#5785) and causes other issues (#5359 (comment)).

Instead, it should be a console warning that's logged when a map is created and there's no CSS rule targeting .mapboxgl-map present. This can be checked using CSSOM APIs.

[rtwalz]

For now the workaround I'm using is adding display: none to the class mapboxgl-missing-css

[stevage]

Just encountered another confused user. (He told me that "the CSS isn't loading", on the strength of that DOM element.) Another possible solution would be deleting the DOM element once the CSS has indeed loaded.

[jczaplew]

FWIW, the CSSOM APIs only function as expected with cross-loaded CSS resources when the attribute crossorigin="anonymous" is added to the <link>.

If you load the CSS as most people do, with <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />, the rules of the stylesheet are not available via document.styleSheets. I'm uncertain as to whether this is a chromium bug or feature, but you could hack around this by making an additional request for all stylesheets that do not contain a rules or cssRules attribute, but that seems like a heavy-handed solution for a fairly small problem.

In the absence of a better solution, simply checking the computed style of .mapboxgl-map might suffice. Something like

let mapboxglMap = document.querySelector('.mapboxgl-map')
if (!mapboxglMap || window.getComputedStyle(mapboxglMap).overflow != 'hidden') {
    // CSS error
}

The nasty bit is that it depends on a hardcoded CSS value that could change in the future. Thoughts as to whether this might be an appropriate method of checking if the CSS has loaded?