Currently working on rendering a map using Mapboxgl, Bootstrap 4, and React.
The goal is to make the map take up 100% of the page height and display in the first column of a two-column grid.
However, there's an issue when using React where the width of the map extends beyond the first column and overlaps with the second column.
To better visualize the problem, check out these examples on jsfiddle:
Map displaying correctly (without React) https://jsfiddle.net/apphancer/jhxy5c63/
Map width issue (with React) https://jsfiddle.net/apphancer/9g71ovn6/
To address the height issue, I am applying the following CSS:
.map-wrapper {
position: fixed;
width: 100%;
height: 100%;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
The problem seems to be related to how the map renders with React since it works fine with pure HTML.
Looking for guidance on how to resolve this issue. Any insights?
HTML
<div id="app"></div>
CSS
body, html {
height: 100%;
}
#app, .row, .col-9 {
height: 100%;
}
.col-3 {
background-color: rgba(0, 0, 0, 0.5);
border: 1px solid red;
}
.map-wrapper {
position: fixed;
width: 100%;
height: 100%;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
JS
mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
class Application extends React.Component {
componentDidMount() {
const map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/light-v9', // stylesheet location
center: [13.392, 52.523], // starting position [lng, lat]
zoom: 9 // starting zoom
});
map.addControl(new mapboxgl.NavigationControl());
map.resize(); // tried with this to see if it would help
}
render() {
return (
<div className="row no-gutters">
<div className="col-9">
<div className="map-wrapper">
<div ref={el => this.mapContainer = el} id="map"/>
</div>
</div>
<div className="col-3">
2 of 2
</div>
</div>
)
}
}
ReactDOM.render(<Application/>, document.getElementById('app'));