index.html
<!DOCTYPE html>
<html>
<head>
<title>Template tester</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="shortcut icon" href="//cartodb.com/assets/favicon.ico" />
<style>
html, body, #container {
height: 100%;
padding: 0;
margin: 0;
border: 0;
}
.row{
position: relative;
width: 100%;
margin: 5px;
}
.menu {
position: absolute;
color: #fefefe;
text-align: left;
height: auto;
z-index: 1000;
background: black;
-moz-box-shadow: -4px 3px 5px 3px #444;
-webkit-box-shadow: -4px 3px 5px 3px #444;
box-shadow: -4px 3px 5px 3px #444;
padding: 10px;
}
.viz_json {
bottom: 42px;
right: 32px;
width: 300px;
}
.viz_json input {
width: 65%;
font-size: 22px;
margin-left: 10px;
}
.live{
display: none;
bottom: 42px;
right: 402px;
font-size: 22px;
margin-left: 10px;
}
.live a{
text-decoration: none;
color: white;
padding: 12px;
line-height: 32px;
}
.live a:hover{
color: #aaa;
}
</style>
<link rel="stylesheet" href="//libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
<script type="cartocss/html" id="side_panel">
</script>
</head>
<body>
<div id="container"></div>
<div class="menu viz_json">
<label for="viz_json">API URL</lable><input type="text" id="viz_json" value="//andrew.cartodb.com/api/v2/viz/1f77b55e-c0e1-11e3-9f8d-0edbca4b5057/viz.json"/>
</div>
<div class="menu live">
<a id="live-link" href="//bl.ocks.org/anonymous/raw/731c0c12a2fd15832ef0" target="_blank">Go to</a>
</div>
</div>
<script src="//libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<script>
var viz_id = '//osm2.cartodb.com/api/v2/viz/114b31c0-e2c6-11e3-9049-0e230854a1cb/viz.json';
var styles = {}, selectedStyle;
function createSelector(layer) {
var sql = new cartodb.SQL({ user: 'documentation' });
var $options = $('#layer_selector li');
$options.click(function(e) {
var $li = $(e.target);
var style = $li.attr('id');
if(selectedStyle != style ){
layer.setCartoCSS(styles[style]);
selectedStyle = style;
}
});
}
var templates = {
'twitter': './twitter-index.html',
'sidepanel': 'templates/sidepanel/index.html',
'editorial': 'templates/editorial/index.html'
}
function sendGist(webpage){
var data = {
"description": "Tweets mapped using CartoDB",
"public": true,
"files": {
"index.html": {
"content": webpage
}
}
}
$.ajax({
url: 'https://api.github.com/gists',
type: 'POST',
dataType: 'json',
data: JSON.stringify(data)
})
.success( function(e) {
$('#live-link').attr('href', "//bl.ocks.org/anonymous/raw/"+e.id);
$('#live-link').html("//bl.ocks.org/anonymous/raw/"+e.id);
})
.error( function(e) {
console.warn("gist save error", e);
});
}
function removeIframe(){
var iframes = document.getElementsByTagName('iframe');
for (var i = 0; i < iframes.length; i++) {
iframes[i].parentNode.removeChild(iframes[i]);
}
}
function setIframe(template, sendit){
var ifrm = document.createElement("IFRAME");
ifrm.style.width = 100+"%";
ifrm.style.height = 100+"%";
document.getElementById('container').appendChild(ifrm);
$.get(templates[template], function(data) {
var webpage = data.format(viz_id);
ifrm.setAttribute("srcdoc", webpage);
if (sendit) {
sendGist(webpage);
$('.live').show();
}
});
}
function main() {
selectedStyle = $('li.selected').attr('id');
setIframe('twitter', false);
$('#viz_json').change(function(){
viz_id = $('#viz_json').val();
removeIframe();
setIframe('twitter',true);
})
}
String.prototype.format = (function (i, safe, arg) {
function format() {
var str = this,
len = arguments.length + 1;
for (i = 0; i < len; arg = arguments[i++]) {
safe = typeof arg === 'object' ? JSON.stringify(arg) : arg;
str = str.replace(RegExp('\\{' + (i - 1) + '\\}', 'g'), safe);
}
return str;
}
return format;
})();
window.onload = main;
</script>
</body>
</html>
twitter-index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
.bravos { position: relative;
width: 350px;
background-color: white;
}
.cartodb-popup-close-button {
position: absolute;
top: -3px;
right: -11px;
width: 26px;
height: 26px;
background: url('//libs.cartodb.com/cartodb.js/v3/themes/img/light.png') no-repeat 0 -23px;
text-indent: -9999px;
font-size: 0;
line-height: 0;
opacity: 1;
text-transform: uppercase;
z-index: 3;
}
.cartodb-popup-tip-container {
position: absolute;
bottom: -3px;
left: 23px;
width: 16px;
height: 14px;
background: url('//libs.cartodb.com/cartodb.js/v3/themes/img/light.png') no-repeat -23px -7px;
text-indent: -9999px;
font-size: 0;
line-height: 0;
opacity: 1;
z-index: 3;
}
blockquote {
display: hidden;
}
.cartodb-popup-content {
min-height: 80px;
}
</style>
<link rel="stylesheet" href="//libs.cartodb.com/cartodb.js/v3/themes/css/cartodb.css" />
</head>
<body>
<div id="map"></div>
</body>
<script type="infowindow/html" id="infowindow_template">
<div class="bravos" id="tweet">
<a href="#close" class="cartodb-popup-close-button close">x</a>
<div class="cartodb-popup-content">
<%= insert_tw(content) %>
</div>
<div class="cartodb-popup-tip-container"></div>
</div>
</script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="//libs.cartocdn.com/cartodb.js/v3/3.0.05-dev/cartodb.uncompressed.js"></script>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
<script>
function insert_tw(content) {
return "<div id='tweet_embed'></div><script>twttr.widgets.createTweet('" + content.data.twitter_id + "', document.getElementById('tweet_embed'))</sc" + "ript>";
}
function main() {
cartodb.createVis('map', "{0}", { description: true, search: true, shareable: true})
.on('done', function(vis,layers) {
var layer = layers[1];
var infowindow = layer.getSubLayer(0).infowindow;
infowindow.set("template_type", "underscore");
infowindow.set("template", $("#infowindow_template").html());
})
}
window.onload = main;
</script>
</html>