React-map-gl: Update the website documentation

[paulosandinof]

When creating a new create-react-app application and using this module, the web browser console keeps throwing the following warning: This page appears to be missing CSS declarations for Mapbox GL JS, which may cause the map to display incorrectly. Please ensure your page includes mapbox-gl.css, as described in https://www.mapbox.com/mapbox-gl-js/api/.

Adding the stylesheet like this doesn't fix the warning:

<!-- index.html -->
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.42.0/mapbox-gl.css' rel='stylesheet' />

And importing in the app.js like this doesn't work either:

// app.js
import 'mapbox-gl/dist/mapbox-gl.css';

The way I found that fix this problem with the current version of the module is add the updated stylesheet:

<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' />

The website should be updated with the new version of this file.

[d3netxer]

Where does the updated stylesheet go?

[paulosandinof]

@d3netxer At the header of your HTML page. In a create-react-app, at the header of your index.html at your public folder.

[d3netxer]

Thank you @paulosandinof, this worked for me!

[mzagaja]

Agree that this fixes the issue, but I think that an ambitious contributor should ascertain how to get import working so we can serve and use the CSS file via import instead of having to pull it in via CDN.

[dfalling]

While we wait for a longer term fix, I opened #858 to address this in the short term. This should make ReactMapGL work out of the box rather than forcing users to search for this workaround.

[Pessimistress]

I would replace the specific version in the doc with something like <your_current_mapbox_version> to avoid future confusion.

Note that if a mapbox stylesheet is not found in the document, we do attach it dynamically: https://github.com/uber/react-map-gl/blob/master/src/mapbox/mapbox.js#L462 and this is why everything is displayed correctly despite of the console warning.

The problem is that we detect the current mapbox version by importing mapbox-gl, and by importing it we'd already have triggered the warning. I believe the proper fix needs to happen inside mapbox-gl, e.g. only perform the CSS check when a Map is constructed.

[dfalling]

Hrm, it actually didn't work for me until I fixed the CSS import. This is with a fresh install of 5.0.7 today. I'm down for changing it to <your_current_mapbox_version> Is there a good page to suggest users consult for this version? It doesn't seem to correspond with any package.json dependencies.

[Pessimistress]

Hmm, our missing CSS detection only catches the scenario where the page is missing the stylesheet, not where it is using the wrong version of the stylesheet. The latter is much harder since Mapbox considers it private API and may change it at any time.

[Pessimistress]

@paulosandinof I believe if you import mapbox-gl/dist/mapbox-gl.css before importing react-map-gl, the warning would go away.

[Wael-Alsabbouh]

@paulosandinof I believe if you import mapbox-gl/dist/mapbox-gl.css before importing react-map-gl, the warning would go away.

Thanks man, I had the same issue and it's fixed with just importing the mapbox-gl.css before the react-map-gl.

[Pessimistress]

Documentation was updated by https://github.com/uber/react-map-gl/pull/858