Missing MapBox CSS using React

Question

I'm trying to work with MapBox using React. I've created the project with create-react-app, added mapbox-gl ("mapbox-gl": "^0.46.0-beta.1"), but I have a problem with css file. It shows me this 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/

I've followed all steps:

1 - Install the npm package: npm install --save mapbox-gl

2 - Include the CSS file in the of your HTML file: <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />.

But how I'm using react with ES6, I've added in index.js css file import 'mapbox-gl/dist/mapbox-gl.css';

If I import css file, it doesnt show me anything, and If I comment that import it shows me map without desing and it shows me the warning.

How can I solve it??? Thanks for your help

Here is my code:

import React, { Component } from 'react';

import mapboxgl from 'mapbox-gl';

mapboxgl.accessToken = 'my_token';

class MapComponent extends Component {

  constructor(props) {
      super(props);
      this.state = {
        lng: 1.2217,
        lat: 39.8499,
        zoom: 6.48
      };
      
    }

  componentDidMount() {
      const { lng, lat, zoom } = this.state;
  
      var map = new mapboxgl.Map({
        container: 'map',
        center: [lng, lat],
        style: 'mapbox://styles/mapbox/streets-v10',
        zoom: zoom
      });
  
      map.on('move', () => {
        const { lng, lat } = map.getCenter();
  
        this.setState({
          lng: lng.toFixed(4),
          lat: lat.toFixed(4),
          zoom: map.getZoom().toFixed(2)
        });
      });
  }

  render() {
      const { lng, lat, zoom } = this.state;
      return (
        <div className="App">
            <div className="inline-block absolute top left mt12 ml12 bg-darken75 color-white z1 py6 px12 round-full txt-s txt-bold">
              <div>{`Longitude: ${lng} Latitude: ${lat} Zoom: ${zoom}`}</div>
            </div>
          <div id="map" />
        </div>
      );
  }
}

export default MapComponent;

SOLUTION:

As I said, I added mapbox-gl.css, import 'mapbox-gl/dist/mapbox-gl.css'; but doesnt show the map.

On css file shows next css attributes:

<canvas class="mapboxgl-canvas" tabindex="0" aria-label="Map" width="951" height="844" style="position: absolute; width: 951px; height: 844px;"></canvas>

I've modified canvas properties by this:

.mapboxgl-canvas {
    position: fixed !important;
    height: 100% !important;
}

Are there any errors shown in the console? Either javascript or 404 for CSS, etc. — Colin Young, Jun 18 '18 at 12:31
No, only show me the warning but If comment or remove the css import doesnt show me anything. If I view html, canvas exists but is not visible — Javier, Jun 18 '18 at 12:43
What about the network tab? Does that show the required CSS being downloaded correctly? Are the contents what you expect? Is there a `visibility` or `display` setting on the map html element that is preventing it from displaying? — Colin Young, Jun 18 '18 at 12:51
Can you add your solution as the answer? It makes it easier for others who find this question later. — Colin Young, Jun 19 '18 at 12:16
It's better as an answer since that will make the question show as having an answer. It's okay to answer your own question. — Colin Young, Jun 20 '18 at 12:09
Please do not edit solution announcements into the question. Accept (i.e. click the "tick" next to it) one of the existing answer, if there are any. You can also create your own answer, and even accept it, if your solution is not yet covered by an existing answer. Compare https://stackoverflow.com/help/self-answer — Yunnosch, Nov 30 '22 at 08:15

score 7 · Answer 1 · edited Apr 19 '19 at 09:40

7

1 - import 'mapbox-gl/dist/mapbox-gl.css';

2 - override css class called .mapboxgl-canvas

.mapboxgl-canvas {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

edited Apr 19 '19 at 09:40

eMarine

1,158
1
14
26

answered Jun 20 '18 at 12:38

Javier

1,975
3
24
46

score 4 · Answer 2 · answered Oct 03 '19 at 18:21

4

1 - Create a randomName.css file

2 - Add this code to your randomName.css file

#yourMapDivName {
position:absolute; 
top:0; 
bottom:0; 
width:100%;
}

body { 
margin:0; 
padding:0;
}

3 - import './randomName.css', to your index.js file

answered Oct 03 '19 at 18:21

Szelek

2,629
5
17
25

score 4 · Answer 3 · edited Jun 20 '20 at 09:12

The warning is also displayed when using an older version of the Mapbox stylesheet as described here:

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

<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' />

I was having the same issue and this fixed it.

`` also fixed my problem. Thanks! – JackWilson Jan 20 '22 at 08:51 — JackWilson, Jan 20 '22 at 08:51

score 1 · Accepted Answer · answered Jan 17 '23 at 23:09

import the Mapbox stylesheet in your index.scss file

import 'mapbox-gl/dist/mapbox-gl.css';
Import the index.scss file into your app.js

import './styles/index.scss';

Put your map div inside a div wrapper and give the css rule to it. By default Mapbox give 100% width and height to the map div :

<div class="myMapWrapper"><div id="map" class="mapboxgl-map" style="position: relative; width: 100%; height: 100%;"></div></div>`

so then you can adjust it as your need in css. Fullscreen, for example:

 .myMapWrapper {
    height: 100vh;
    width: 100vw;
}

Missing MapBox CSS using React

4 Answers4

Linked