Get named map layers from CARTO

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Load a public CARTO Builder URL dynamically</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.css" rel="stylesheet" />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
 
<style>
.map-overlay {
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
position: absolute;
width: 500px;
top: 0;
left: 0;
padding: 10px;
}
 
.map-overlay .map-overlay-inner {
background-color: #fff;
box-shadow:0 1px 2px rgba(0, 0, 0, 0.10);
border-radius: 3px;
padding: 10px;
margin-bottom: 10px;
}
 
.map-overlay-inner fieldset {
border: none;
padding: 0;
margin: 0 0 10px;
}
 
.map-overlay-inner fieldset:last-child {
margin: 0;
}
 
.map-overlay-inner input {
width: 100%;
}
 
.map-overlay-inner label {
display: block;
font-weight: bold;
margin: 0 0 5px;
}
 
.map-overlay-inner button {
display: inline-block;
width: 36px;
height: 20px;
border: none;
cursor: pointer;
}
 
.map-overlay-inner button:focus {
outline: none;
}
 
.map-overlay-inner button:hover {
box-shadow:inset 0 0 0 3px rgba(0, 0, 0, 0.10);
}
</style>
 
<div id="map"></div>
<div class="map-overlay top">
<div class="map-overlay-inner">
<fieldset>
<label>Enter URL</label>

<input id="cartoUrl" type="text" value="https://team.carto.com/u/athompson/builder/4255e850-441b-4583-8b47-1e152693af88/embed">
<select name="layers" id="layerList">
    <option value="">--Please choose layers--</option>
    <option value="all">All (includes basemap+labels on top)</option>
    <option value="1">1 - Polygons</option>
    <option value="2">2 - Lines</option>
    <option value="3">3 - Points</option>
    <option value="1,2,3">1,2,3 (without basemap)</option>
    <option value="1,3">1,3 (without basemap)</option>
</select>
<input type="button" value="Load URL" onclick="gettiles()">
</fieldset>
</div>
</div>
 
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiamF0b3JyZSIsImEiOiJFMUhQUHdzIn0.My_BXfSzI30ma8kNllg5tg';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
center: [-75,40.1],
zoom: 9
});
 
function gettiles() {
  
  var layerList = document.getElementById('layerList').value;
  if (layerList == "") {
    console.log("hey no layer selected");
    return false;
  }
	var url = document.getElementById('cartoUrl').value;
	var namedMapTemplate = url.split("/builder/")[1].split("/")[0];
	namedMapTemplate = "tpl_"+namedMapTemplate.replace(/-/g,"_")

if (url.includes("/u/")) {
		username = url.split("/u/")[1].split("/")[0];
	} else {
		username = url.split("//")[1].split(".")[0];
	}

}

</script>
 
</body>
</html>

https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.js