sabman/index.html

## index.html
<!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/jatorre/builder/920d2509-193b-4b2d-acef-e0886cbf2e30/embed">-->
<input id="cartoUrl" type="text" value="https://moose.geodb.host/user/spendmapp-admin/builder/5c4792fc-fa39-42a5-89d9-e767891bfb05/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: [144.92567079258154,-37.92245952882404],
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("/user/")[1].split("/")[0];
	} else {
		username = url.split("//")[1].split(".")[0];
	}

  var xyzReq = "https://moose.geodb.host/user/spendmapp-admin/api/v1/map/named/"+namedMapTemplate+"/"+layerList+"/{z}/{x}/{y}.png";

  if (map.getLayer('carto')) map.removeLayer('carto');
  if (map.getSource('carto')) map.removeSource('carto');
  console.log(xyzReq);

  map.addLayer({
				'id': "carto",
				'type': "raster",
				'source': {
					'type': 'raster',
					'tiles': [ xyzReq ],
					'tileSize': 256
				}
			});

}

</script>

</body>
</html>
	<!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/jatorre/builder/920d2509-193b-4b2d-acef-e0886cbf2e30/embed">-->
	<input id="cartoUrl" type="text" value="https://moose.geodb.host/user/spendmapp-admin/builder/5c4792fc-fa39-42a5-89d9-e767891bfb05/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: [144.92567079258154,-37.92245952882404],
	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("/user/")[1].split("/")[0];
	} else {
	username = url.split("//")[1].split(".")[0];
	}

	var xyzReq = "https://moose.geodb.host/user/spendmapp-admin/api/v1/map/named/"+namedMapTemplate+"/"+layerList+"/{z}/{x}/{y}.png";

	if (map.getLayer('carto')) map.removeLayer('carto');
	if (map.getSource('carto')) map.removeSource('carto');
	console.log(xyzReq);

	map.addLayer({
	'id': "carto",
	'type': "raster",
	'source': {
	'type': 'raster',
	'tiles': [ xyzReq ],
	'tileSize': 256
	}
	});

	}

	</script>

	</body>
	</html>