<div id="map"></div>
<div id="menu">
  <input id="blue" type="radio" name="rtoggle" value="blue" checked="checked">
  <label for="blue">blue</label>
  <input id="green" type="radio" name="rtoggle" value="green">
  <label for="green">green</label>
</div>

body {
  margin: 0;
  padding: 0;
}
#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}
#menu {
  position: absolute;
  background: #efefef;
  padding: 10px;
  font-family: "Open Sans", sans-serif;
}

mapboxgl.accessToken =
  "pk.eyJ1Ijoib3R0eWxhYiIsImEiOiJjbTNsYmhxdWwwaWJtMnFxenIzNmJuaGJmIn0.QEnCKZZKJQBAbK8GFBzAcw";

const map = new mapboxgl.Map({
  container: "map", // container ID
  // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
  style: "https://gist.githubusercontent.com/OttyLab/f4526ddf444b8f4add296ad337bcc601/raw/3bc488ba52a3a63b3ba64f22054c86bd5e0f3b87/blue.json", // style URL
  center: [-2.81361, 36.77271], // starting position [lng, lat]
  zoom: 1 // starting zoom
});

const layerList = document.getElementById("menu");
const inputs = layerList.getElementsByTagName("input");

for (const input of inputs) {
  input.onclick = (layer) => {
    const layerId = layer.target.id;
    map.setStyle("https://gist.githubusercontent.com/OttyLab/f4526ddf444b8f4add296ad337bcc601/raw/3bc488ba52a3a63b3ba64f22054c86bd5e0f3b87/" + layerId + ".json");
  };
}