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;
}
SOLVED:
1 - import 'mapbox-gl/dist/mapbox-gl.css';
2 - override css class called .mapboxgl-canvas
.mapboxgl-canvas {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
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%;
}
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
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:
<!-- 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' />
I was having the same issue and this fixed it.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With