jatorre · October 29, 2019 18:17
diff --git a/index.html b/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>