index.html
<!DOCTYPE html>
<html>
<head>
<title>Make amazing maps with CartoDB</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
html, body {
border: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
font-family: "Lato", "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-weight: 300;
text-align: center;
padding-top: 2%;
}
.row {
position: relative;
float: left;
width: 100%;
margin: 10px;
}
.btn,
.ipt {
position: relative;
display: inline-block;
border: 6px solid lighten($alizarin, 10%);
@extend %vertical-align;
transition: all .1s ease-in-out;
z-index: 99;
&.active { box-shadow: 2px 2px 4px rgba(0,0,0, .25); }
&:focus,
&:hover { border: 12px solid $alizarin; }
}
.btn > span,
.ipt {
min-width: 275px;
cursor: pointer;
}
.btn,
.ipt {
position: relative;
display: inline-block;
border: 6px solid black;
-webkit-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
z-index: 99;
}
.ipt {
font-size: 50px;
}
.ipt.gmt {
font-size: 20px;
}
.btn.active {
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
}
.btn:focus, .btn:hover {
border: 12px solid black;
}
.btn > span,
.ipt {
min-width: 275px;
cursor: pointer;
}
.ipt.gmt {
min-width: 100px;
}
.btn-inr {
display: inline-block;
color: white;
font-weight: 100;
font-size: 2em;
line-height: 1;
text-transform: uppercase;
background: black;
padding: 1em 2em;
margin: 6px;
-webkit-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
.btn-inr:focus, .btn-inr:hover {
background: black;
padding: 1em 2em;
margin: 0;
}
.btn:focus .btn-inr,
.btn:hover .btn-inr {
background: black;
padding: 1em 2em;
margin: 0;
}
</style>
<script src="//libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
</head>
<body>
<div class="row first">
Make a Sunrise map with Torque [<a href="//cartodb.s3.amazonaws.com/static_vizz/sunrise.html" target="_blank">example</a>]
</div>
<div class="row ">
<input class="ipt" name="vizjson" type="vizjson" id="vizjson" value = "Paste VIZJSON URL" maxlength="1000"
onfocus="if (this.value == 'Paste VIZJSON URL') {this.value = '';}">
</div>
<div class="row">
<label for="gmt">Data timezone</label>
<select name="gmt" class="ipt gmt">
<option value="-11">GMT-12</option>
<option value="-11">GMT-11</option>
<option value="-10">GMT-10</option>
<option value="-9">GMT-9</option>
<option value="-8">GMT-8</option>
<option value="-7">GMT-7</option>
<option value="-6">GMT-6</option>
<option value="-5">GMT-5</option>
<option value="-4">GMT-4</option>
<option value="-3">GMT-3</option>
<option value="-2">GMT-2</option>
<option value="-1">GMT-1</option>
<option value="0" SELECTED>GMT+0</option>
<option value="1">GMT+1</option>
<option value="2">GMT+2</option>
<option value="3">GMT+3</option>
<option value="4">GMT+4</option>
<option value="5">GMT+5</option>
<option value="5.5">GMT+5:30</option>
<option value="6">GMT+6</option>
<option value="7">GMT+7</option>
<option value="8">GMT+8</option>
<option value="9">GMT+9</option>
<option value="10">GMT+10</option>
<option value="11">GMT+11</option>
<option value="12">GMT+12</option>
<option value="13">GMT+13</option>
<option value="14">GMT+14</option>
</select>
</div>
<div class="row">
<div class="btn submit">
<span class="btn-inr">
<span class="txt-a">Submit</span>
</span>
</div>
</div>
<script>
var webpage = "<!DOCTYPE h"+"tml> \
<ht"+"ml> \
<he"+"ad> \
<title>Make amazing maps with CartoDB</title> \
<meta name='viewport' content='initial-scale=1.0, user-scalable=no'> \
<meta http-equiv='content-type' content='text/html; charset=utf-8'> \
<style type='text/css'> \
html, body { \
border: 0; \
margin: 0; \
padding: 0; \
width: 100%; \
height: 100%; \
overflow: hidden; \
} \
#map { \
height: 100%; \
background-color: #384047; \
} \
</style> \
<link rel='stylesheet' href='//libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css'> \
<script src='//libs.cartocdn.com/cartodb.js/v3/cartodb.js'></sc"+"ript> \
<script type='text/javascript' src='//rawgithub.com/joergdietrich/Leaflet.Terminator/master/L.Terminator.js'></scr"+"ipt> \
</head> \
<bo"+"dy> \
<div id='map'></div> \
<scr"+"ipt> \
function main() { \
var dif = {0}; \
cartodb.createVis('map', '{1}') \
.done(function(vis, layers){ \
var t = L.terminator({time:'2014-04-06T00:00:00Z'}); \
t.addTo(vis.getNativeMap()); \
var n = layers.length - 1; \
layers[n].on('change:time', function(changes) { \
if(changes.time && !isNaN( changes.time.getTime() )) { \
var tt = changes.time; \
var t2 = L.terminator({time: tt.setMinutes(tt.getMinutes() - dif) }); \
t.setLatLngs(t2.getLatLngs()); \
} \
}); \
}) \
} \
window.onload = main; \
</scr"+"ipt> \
</bo"+"dy> \
</h"+"tml>";
function main() {
$('.submit').click(function(e){
var visj = $('#vizjson').val();
var p1 = Math.min(visj.indexOf("cartodb.com/api/v2/viz"),visj.indexOf("viz.json"));
if (p1 < 0){
alert('Sorry, not a valid vizjson URL');
} else {
var t = $('.gmt').val() * 60.0;
t = t + "";
var f = webpage.format(t, visj);
var data = {
"description": "CartoDB never sets...",
"public": true,
"files": {
"index.html": {
"content": f
}
}
}
$.ajax({
url: 'https://api.github.com/gists',
type: 'POST',
dataType: 'json',
data: JSON.stringify(data)
})
.success( function(e) {
var g = e.url.split("/");
var b = "//bl.ocks.org/anonymous/raw/"+g[g.length - 1];
$("body").append('<div class="row"><a class="btn" href="'+b+'"" target="_blank"><span class="btn-inr"><span class="txt-a">See it Live!</span></span> </a></div>');
})
.error( function(e) {
console.warn("gist save error", e);
});
}
})
}
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>
</script>
</body>
</html>