Change a map's style

Switch to another map style. See the example: https://docs.mapbox.com//mapbox-gl-js/example/setstyle/

by jscastro76

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css">



<div id="map"></div>
<div id="menu">
    <input
        id="streets-v11"
        type="radio"
        name="rtoggle"
        value="streets"
        checked="checked"
    />
    <label for="streets-v11">streets</label>
    <input id="light-v10" type="radio" name="rtoggle" value="light" />
    <label for="light-v10">light</label>
    <input id="dark-v10" type="radio" name="rtoggle" value="dark" />
    <label for="dark-v10">dark</label>
    <input id="outdoors-v11" type="radio" name="rtoggle" value="outdoors" />
    <label for="outdoors-v11">outdoors</label>
    <input id="satellite-v9" type="radio" name="rtoggle" value="satellite" />
    <label for="satellite-v9">satellite</label>
</div>

CSS

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

    #menu {
        position: absolute;
        background: #fff;
        padding: 10px;
        font-family: 'Open Sans', sans-serif;
    }

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoianNjYXN0cm8iLCJhIjoiY2s2YzB6Z25kMDVhejNrbXNpcmtjNGtpbiJ9.28ynPf1Y5Q8EyB_moOHylw';
		var map = new mapboxgl.Map({
		  container: 'map',
		  style: 'mapbox://styles/mapbox/streets-v11',
		  center: [-122.486052, 37.830348],
		  zoom: 14
		});
		var l = 'routeL';
		var s = 'routeS';
		var layerList = document.getElementById('menu');
		var inputs = layerList.getElementsByTagName('input');

		function addSource() {
		  map.addSource(s, {
		    'type': 'geojson',
		    'data': {
		      'type': 'Feature',
		      'properties': {},
		      'geometry': {
		        'type': 'LineString',
		        'coordinates': [
		          [-122.48369693756104, 37.83381888486939],
		          [-122.48348236083984, 37.83317489144141],
		          [-122.48339653015138, 37.83270036637107],
		          [-122.48356819152832, 37.832056363179625],
		          [-122.48404026031496, 37.83114119107971],
		          [-122.48404026031496, 37.83049717427869],
		          [-122.48348236083984, 37.829920943955045],
		          [-122.48356819152832, 37.82954808664175],
		          [-122.48507022857666, 37.82944639795659],
		          [-122.48610019683838, 37.82880236636284],
		          [-122.48695850372314, 37.82931081282506],
		          [-122.48700141906738, 37.83080223556934],
		          [-122.48751640319824, 37.83168351665737],
		          [-122.48803138732912, 37.832158048267786],
		          [-122.48888969421387, 37.83297152392784],
		          [-122.48987674713133, 37.83263257682617],
		          [-122.49043464660643, 37.832937629287755],
		          [-122.49125003814696, 37.832429207817725],
		          [-122.49163627624512, 37.832564787218985],
		          [-122.49223709106445, 37.83337825839438],
		          [-122.49378204345702, 37.83368330777276]
		        ]
		      }
		    }
		  });
		}

		function addLayer() {
		  map.addLayer({
		    'id': l,
		    'type': 'line',
		    'source': s,
		    'layout': {
		      'line-join': 'round',
		      'line-cap':...