Mapbox gl switch styles

Switch mapbox styles

HTML

<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.css">
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.js"></script>
<script src="	https://npmcdn.com/@turf/turf/turf.min.js"></script>
<div id="map">
<div>
<button id="icon">
Switch layers
</button>

</div>

</div>

CSS

#map {
  height: 500px;
}

#icon {
  position: absolute;
  top: 15px;
  left: 15px;
  color: black;
  z-index: 1;
}

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoiZmFyYWRheTIiLCJhIjoiTUVHbDl5OCJ9.buFaqIdaIM3iXr1BOYKpsQ';
let map = new mapboxgl.Map({
  container: 'map', // container id
  style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location
  center: [-1.77, 52.73],
  zoom: 3,
});

let icon = document.getElementById('icon');

icon.addEventListener('click', function(e) {
	map.setStyle('mapbox://styles/mapbox/light-v9');
}, false)