JSFiddle - React, Tailwind, and code Playground

by cs09g

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Fit a map to a bounding box</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:500px; height: 500px; }

.fullscreen {
  width: 100% !important;
  height: 100% !important;
}
</style>
</head>
<body>
 
<style>
#fs {
display: block;
position: relative;
margin: 0px auto;
width: 50%;
height: 40px;
padding: 10px;
border: none;
border-radius: 3px;
font-size: 12px;
text-align: center;
color: #fff;
background: #ee8a65;
}
</style>
<div id='map'></div>
<br/>
<button id='fs'>Toggle Fullscreen</button>
 
</body>
</html>

JavaScript

mapboxgl.accessToken = 'pk.eyJ1Ijoic2luc3ctc2NpIiwiYSI6ImNqbG5oeXgxYjFqOTkza3BhaWFlZjloMXoifQ.IRI-P0nGufmlZs-02W-ZLQ';

var map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/mapbox/streets-v11',
	center: [-74.50, 40],
	zoom: 9
});

map.once('load', () => {
	map.fitBounds([[32.958984,-5.353521], [43.50585,5.615985]]);
});

const mapContainer = document.getElementById('map');  
document.getElementById('fs').addEventListener('click', () => {
   mapContainer.classList.toggle("fullscreen");
   map.resize();
});