malwoodsantoro/index.html

## index.html
<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css" rel="stylesheet" />
    <style>
    body {
        margin: 0;
        padding: 0;
    }

    #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
    }
    </style>
</head>

<body>
    <style>
    #menu {
        position: absolute;
        background: #fff;
        padding: 10px;
        font-family: 'Open Sans', sans-serif;
    }
    </style>
    <div id='map'></div>
    <div id='menu'>
        <input id='outdoors' type='radio' name='rtoggle' value='outdoors' checked='checked'>
        <label for='outdoors'>outdoors</label>
        <input id='satellite-streets' type='radio' name='rtoggle' value='satellite-streets'>
        <label for='streets'>satellite-streets</label>
        <input id='streets' type='radio' name='rtoggle' value='streets'>
        <label for='streets'>streets</label>
    </div>
    <script>
    mapboxgl.accessToken = 'pk.eyJ1IjoibWFsLXdvb2QiLCJhIjoiY2oyZ2t2em50MDAyMzJ3cnltMDFhb2NzdiJ9.X-D4Wvo5E5QxeP7K_I3O8w';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        zoom: 2.5,
        center: [-103, 36],
        hash: true
    });

    var customLayers = [{
        source: {
            type: "vector",
            url: "mapbox://mapbox.us_census_states_2015"
        },
        layer: {
            id: 'states',
            source: 'states',
            'source-layer': 'states',
            type: 'fill',
            paint: {
                'fill-color': 'red',
                'fill-opacity': 0.3,
                'fill-outline-color': 'black'
            }
        }
    }]

    map.on('style.load', function() {
        // Always add the same custom soruces and layers after a style change

        for (var i = 0; i < customLayers.length; i++) {
            var me = customLayers[i]
            map.addSource(me.layer.source, me.source);
            map.addLayer(me.layer, 'waterway-label')
        }
    });

    var layerList = document.getElementById('menu');
    var inputs = layerList.getElementsByTagName('input');

    function switchLayer(layer) {
        var layerId = layer.target.id;
        map.setStyle('mapbox://styles/mapbox/' + layerId + '-v11');
    }

    for (var i = 0; i < inputs.length; i++) {
        inputs[i].onclick = switchLayer;

    }
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset='utf-8' />
	<title></title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
	<link href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css" rel="stylesheet" />
	<style>
	body {
	margin: 0;
	padding: 0;
	}

	#map {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	}
	</style>
	</head>

	<body>
	<style>
	#menu {
	position: absolute;
	background: #fff;
	padding: 10px;
	font-family: 'Open Sans', sans-serif;
	}
	</style>
	<div id='map'></div>
	<div id='menu'>
	<input id='outdoors' type='radio' name='rtoggle' value='outdoors' checked='checked'>
	<label for='outdoors'>outdoors</label>
	<input id='satellite-streets' type='radio' name='rtoggle' value='satellite-streets'>
	<label for='streets'>satellite-streets</label>
	<input id='streets' type='radio' name='rtoggle' value='streets'>
	<label for='streets'>streets</label>
	</div>
	<script>
	mapboxgl.accessToken = 'pk.eyJ1IjoibWFsLXdvb2QiLCJhIjoiY2oyZ2t2em50MDAyMzJ3cnltMDFhb2NzdiJ9.X-D4Wvo5E5QxeP7K_I3O8w';
	var map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/mapbox/streets-v11',
	zoom: 2.5,
	center: [-103, 36],
	hash: true
	});

	var customLayers = [{
	source: {
	type: "vector",
	url: "mapbox://mapbox.us_census_states_2015"
	},
	layer: {
	id: 'states',
	source: 'states',
	'source-layer': 'states',
	type: 'fill',
	paint: {
	'fill-color': 'red',
	'fill-opacity': 0.3,
	'fill-outline-color': 'black'
	}
	}
	}]

	map.on('style.load', function() {
	// Always add the same custom soruces and layers after a style change

	for (var i = 0; i < customLayers.length; i++) {
	var me = customLayers[i]
	map.addSource(me.layer.source, me.source);
	map.addLayer(me.layer, 'waterway-label')
	}
	});

	var layerList = document.getElementById('menu');
	var inputs = layerList.getElementsByTagName('input');

	function switchLayer(layer) {
	var layerId = layer.target.id;
	map.setStyle('mapbox://styles/mapbox/' + layerId + '-v11');
	}

	for (var i = 0; i < inputs.length; i++) {
	inputs[i].onclick = switchLayer;

	}
	</script>
	</body>

	</html>