How to make content fit the full screen (Mapbox)

user_9454906 0
Viewed 600

I'm using a map api (Mapbox). I'm trying to make the map fit the full screen, but nothing I try seems to work.

I have a wrapper and container for the map. I've tried to different solutions, but I'm still having problems.

Option 1: problem: the map doesn't fit the viewport, instead a scroll bar is added forcing the user to scroll down to view the entire map

jsfiddle #1

Option 2: problem: the map fills the entire viewport, but the bottom portion of the map is cut off (notice the mapbox logo is missing at the bottom)

jsfiddle #2

How can I get the map to fit the view port without being cutoff or adding a scroll bar?

Full code for reference:

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());
    }

    render() {
        return (
<div>
<h2>Hello</h2>
<p>Hi</p>    
                    <div className="map-wrapper">
                        <div ref={this.mapContainer} id="map"/>
                    </div>
              </div>
        )
    }
}

ReactDOM.render(<Application/>, document.getElementById('app'));
body, html {
    height: 100%;
}

.map-wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
}

#map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
   height: 100% !important.
}
<div id="app"></div>

mapbox-gl-js reactjs css
1 Answers

No need for the wrapper. Simply set your height and width to 100vh and 100vw respectively.

#map {
    width: 100vw;
    height: 100vh;
}
user_106008960
Related