jatorre/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 type="button" value="Load URL" onClick="getJsonP()">
</div>
</div>

<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiamF0b3JyZSIsImEiOiJFMUhQUHdzIn0.My_BXfSzI30ma8kNllg5tg';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
center: [-73.32284007932583,40.67935646368275],
zoom: 9
});

function getJsonP() {
	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];
	}

	var jsonpReq = "https://"+username+".carto.com/api/v1/map/named/"+namedMapTemplate+"/jsonp?callback=loadlayers";

	console.log(jsonpReq);

	//Perform the actual JSONP req
	var script = document.createElement('script');
	script.src = jsonpReq
	document.getElementsByTagName('head')[0].appendChild(script);

}
function loadlayers(data) {
	//Iterate over mapnik layers
	data.metadata.layers.filter(function(e){return e.type=="mapnik"}).forEach(function(l){
			map.addLayer({
				'id':l.id,
				'type': "raster",
				'source': {
					'type': 'raster',
					'tiles': l.tilejson.raster.tiles,
					'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 type="button" value="Load URL" onClick="getJsonP()">
	</div>
	</div>

	<script>
	mapboxgl.accessToken = 'pk.eyJ1IjoiamF0b3JyZSIsImEiOiJFMUhQUHdzIn0.My_BXfSzI30ma8kNllg5tg';
	var map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/mapbox/light-v10',
	center: [-73.32284007932583,40.67935646368275],
	zoom: 9
	});

	function getJsonP() {
	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];
	}

	var jsonpReq = "https://"+username+".carto.com/api/v1/map/named/"+namedMapTemplate+"/jsonp?callback=loadlayers";

	console.log(jsonpReq);

	//Perform the actual JSONP req
	var script = document.createElement('script');
	script.src = jsonpReq
	document.getElementsByTagName('head')[0].appendChild(script);

	}
	function loadlayers(data) {
	//Iterate over mapnik layers
	data.metadata.layers.filter(function(e){return e.type=="mapnik"}).forEach(function(l){
	map.addLayer({
	'id':l.id,
	'type': "raster",
	'source': {
	'type': 'raster',
	'tiles': l.tilejson.raster.tiles,
	'tileSize': 256
	}
	});
	});
	}



	</script>

	</body>
	</html>