index.html
<!DOCTYPE html>
<html>
<head>
<title>Election Mapping Bonanza</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" />
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700|Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'>
<style>
ul {
margin: 0;
padding: 0;
}
li {
margin: 0;
padding: 0;
list-style-type: none;
text-shadow: 0 0 10px #eee;
}
li > p {
float: right;
}
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#map {
position: absolute;
left: 380px;
top: 0;
right: 0;
bottom: 0;
padding: 0;
margin: 0;
}
.top_map{
z-index: 1000;
}
.bottom_map {
display: none;
z-index: 0;
}
#map_selector {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 300px;
padding: 0;
margin: 0;
z-index: 1000;
overflow: hidden;
padding: 40px;
background: #f2f2f2;
}
#Thumbnails ul {
padding: 0; margin: 0;
list-style-type: none;
height: 100%;
width: 100%;
}
#Thumbnails li {
float: left;
font-family: "Helvetica", Arial;
font-size: 13px;
color: #444;
cursor: auto;
width: 33.33%;
height: 150px;
cursor: pointer;
}
.map {
width: 100%; height: 100%;
}
.Header h1 {
font: 700 30px 'Open Sans Condensed';
color: #333;
padding: 0 0 20px 0;
border-bottom: 1px solid #ccc;
margin: 0 0 30px 0;
}
.ramp-inner {
height: 20px;
background: #1e5799;
background: -moz-linear-gradient(left, #1e5799 0%, #2f4886 0%, #2f4886 50%, #2f4886 50%, #2989d8 51%, #2989d8 51%, #ad373e 51%);
background: -webkit-linear-gradient(left, #1e5799 0%,#2f4886 0%,#2f4886 50%,#2f4886 50%,#2989d8 51%,#2989d8 51%,#ad373e 51%);
background: linear-gradient(to right, #1e5799 0%,#2f4886 0%,#2f4886 50%,#2f4886 50%,#2989d8 51%,#2989d8 51%,#ad373e 51%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#ad373e',GradientType=1 );
border-radius: 50px;
}
.ramp {
margin-bottom: 30px;
}
.ramp-info {
width: auto;
overflow: hidden;
margin-bottom: 12px;
}
.ramp-info li {
float: left;
width: 20%;
text-align: left;
margin: 0;
font: 300 20px/18px 'Open Sans Condensed', sans-serif;
text-transform: uppercase;
}
.cartodb-overlay {
display: none !Important;
}
.Thumbnails > li {
opacity: .5;
margin-bottom: 30px;
position: relative;
cursor: pointer;
}
.Thumbnails > li p {
font: 300 14px/15px 'Open Sans Condensed', sans-serif;
margin: 0;
position: absolute;
bottom: 10px;
left: 10px;
}
.Thumbnails > li.selected {
opacity: 1;
}
.mapx {
height: 100px;
position: relative;
overflow: hidden;
}
.selected .mapx {
box-shadow: 0 0 8px rgba(0, 0, 0, .2);
}
.mapx:after {
content:"";
position: absolute;
display: block;
pointer-events: none;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid rgba(0, 0, 0, .3);
border-radius: 2px;
}
.logo {
position: absolute;
left: 40px;
bottom: 40px;
}
</style>
<link rel="stylesheet" href="//libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
</head>
<body>
<div id="map" class=" top_map"></div>
<div id="map_selector" class="">
<div class="Header">
<h1>Election Results</h1>
<div class="ramp">
<ul class="ramp-info">
<li>Obama</li>
<li style="float: right;">Romney</li>
</ul>
<div class="ramp-inner"></div>
</div>
<img class="logo" src="https://cartodb-libs.global.ssl.fastly.net/cartodb.com/static/logos_full_cartodb_light.png" height="30" />
</div>
<ul class="Thumbnails">
<li id='img1' class="selected">
<div id="map1" class="mapx"></div>
<p>Winner by County</p>
</li>
<li id='img2'>
<div id="map2" class="mapx"></div>
<p>Proportional Sym</p>
</li>
<li id='img3'>
<div id="map3" class="mapx"></div>
<p>Coming soon...</p>
</li>
</ul>
</div>
<script src="//libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<script>
var sync_center = true;
var a = 0;
var jsons = [
{viz: 'https://team.cartodb.com/u/mamataakella/api/v2/viz/843f4a94-87df-11e5-8fb7-0e674067d321/viz.json'},
{viz: 'https://team.cartodb.com/u/mamataakella/api/v2/viz/90683c18-87e9-11e5-bd9f-0ecfd53eb7d3/viz.json'},
{viz: 'https://team.cartodb.com/u/mamataakella/api/v2/viz/b8b85f66-7904-11e5-8dc0-0e3ff518bd15/viz.json'}
];
var map;
var center = {'lat':15.222246513227375,'lng':-2.01025390625};
var center2 = [5,2];
var zoom = 5;
var zoom2 = 5;
function loadMaps(a){
if(map){center = map.getCenter(); zoom = map.getZoom()}
console.log(center)
$('#map').empty();
cartodb.createVis('map', jsons[a].viz,{
center_lat: center.lat,
center_lon: center.lng,
zoom: zoom,
shareable:false,
search:false,
layer_selector:false,
zoomControl:true,
loaderControl: true
}).done(function(viz,layers){
map = viz.getNativeMap();
map.on('dragend',getInit).on('zoomend',getInit);
function getInit() {
var c = map.getCenter();
console.log('center: [' + c.lat + ',' + c.lng + '],\nzoom: ' + map.getZoom());
}
});
}
function main() {
cartodb.Image(jsons[0].viz)
.center(center2)
.zoom(zoom2)
.getUrl(function(err, url) {
var img = new Image();
$('#map1').css('background-image', 'url(' + url + ')');
})
cartodb.Image(jsons[1].viz)
.center(center2)
.zoom(zoom2)
.getUrl(function(err, url) {
var img = new Image();
$('#map2').css('background-image', 'url(' + url + ')');
})
cartodb.Image(jsons[2].viz)
.center(center2)
.zoom(zoom2)
.getUrl(function(err, url) {
var img = new Image();
$('#map3').css('background-image', 'url(' + url + ')');
})
$('#map1').click(function(){
loadMaps(0);
});
$('#map2').click(function(){
loadMaps(1);
});
$('#map3').click(function(){
loadMaps(2);
});
$('#map1').click();
}
$('.Thumbnails > li').click(function() {
$('.Thumbnails > li').removeClass('selected');
$(this).addClass('selected');
});
window.onload = main;
</script>
</body>
</html>