Basic example of using Mapbox GL JS map classes for style changes

<!DOCTYPE html>
<html lang='en'>
	<head>
	    <meta charset='utf-8' />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Mapbox GL JS class demo</title>
	    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.21.0/mapbox-gl.js'></script>
	    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.21.0/mapbox-gl.css' rel='stylesheet' />
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>
		<style>
	        body { margin:0; padding:0; }

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

#infoWindow {
				position: absolute;
				right: 10px;
				top: 10px;
			}

</style>
	</head>
	<body>

<div id='map'></div>

<div id='infoWindow'>
	</div>

// ajzeigert key
	mapboxgl.accessToken = 'pk.eyJ1IjoiYWp6ZWlnZXJ0IiwiYSI6IldLdVhKN1UifQ.43CCALwNLBzVybtPFvcaJQ';

var map = new mapboxgl.Map({
	    container: 'map', // container id
	    style: 'mapbox://styles/mapbox/light-v9', //stylesheet location
	    center: [-121.3, 44.05], // starting position
	    zoom: 10, // starting zoom
		hash: true
	});

map.on('load', function(){
		map.addSource('fails', {
			'type': 'geojson',
			'data': 'fails.geojson'
		});
		map.addLayer({
			'id': 'fails',
			'source': 'fails',
			'type': 'circle',
			'paint': {
				'circle-radius': 10,
				'circle-color': '#7aa0b4',
			},
			'paint.foo': {
				'circle-radius': 20,
				'circle-color': '#d9b410'
			}
		});
		var button = document.createElement('button');
		button.classList.add('btn', 'btn-info', 'pull-right');
		button.setAttribute('type', 'button');
		button.innerHTML = 'Add foo class';
		button.addEventListener('click', function(e){
			if (map.hasClass('foo') === false ) {
				map.addClass('foo');
				this.innerHTML = 'Remove foo class';
			} else {
				map.removeClass('foo');
				this.innerHTML = 'Add foo class';
			}
		});
		var overlay = document.getElementById('infoWindow');
		overlay.appendChild(button);
	})

</script>

</body>
</html>

https://api.tiles.mapbox.com/mapbox-gl-js/v0.21.0/mapbox-gl.js

https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js

https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js