Skip to content

Instantly share code, notes, and snippets.

@piensaenpixel

piensaenpixel/index.html

Last active January 19, 2016 12:39
Show Gist options
  • Save piensaenpixel/5d8f2c520f66325a2198 to your computer and use it in GitHub Desktop.
Save piensaenpixel/5d8f2c520f66325a2198 to your computer and use it in GitHub Desktop.
Download ZIP
Maps navigation
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Layer selector example | CartoDB.js</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="http://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;
}
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#map {
position: absolute;
left: 400px;
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: 8px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#faf4e2+0,f8e9c2+25,f9cb98+50,f0a296+75,d884a3+100,f8e9c2+100 */
background: #faf4e2; /* Old browsers */
background: -moz-linear-gradient(left, #faf4e2 0%, #f8e9c2 25%, #f9cb98 50%, #f0a296 75%, #d884a3 100%, #f8e9c2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#faf4e2), color-stop(25%,#f8e9c2), color-stop(50%,#f9cb98), color-stop(75%,#f0a296), color-stop(100%,#d884a3), color-stop(100%,#f8e9c2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #faf4e2 0%,#f8e9c2 25%,#f9cb98 50%,#f0a296 75%,#d884a3 100%,#f8e9c2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #faf4e2 0%,#f8e9c2 25%,#f9cb98 50%,#f0a296 75%,#d884a3 100%,#f8e9c2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #faf4e2 0%,#f8e9c2 25%,#f9cb98 50%,#f0a296 75%,#d884a3 100%,#f8e9c2 100%); /* IE10+ */
background: linear-gradient(to right, #faf4e2 0%,#f8e9c2 25%,#f9cb98 50%,#f0a296 75%,#d884a3 100%,#f8e9c2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#faf4e2', endColorstr='#f8e9c2',GradientType=1 ); /* IE6-9 */
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 11px/12px '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="http://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>Drought Severity</h1>
<div class="ramp">
<ul class="ramp-info">
<li>Abnormal</li>
<li>Moderate</li>
<li>Severe</li>
<li>Extreme</li>
<li>Exceptional</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>November 3, 2015</p>
</li>
<li id='img2'>
<div id="map2" class="mapx"></div>
<p>November 4, 2014</p>
</li>
<li id='img3'>
<div id="map3" class="mapx"></div>
<p>November 5, 2013</p>
</li>
</ul>
</div>
<!-- include cartodb.js library -->
<script src="http://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/082f2a38-858b-11e5-8379-0e787de82d45/viz.json'},
{viz: 'https://team.cartodb.com/u/mamataakella/api/v2/viz/fe9126bc-8593-11e5-bc61-0e5db1731f59/viz.json'},
{viz: 'https://team.cartodb.com/u/mamataakella/api/v2/viz/e04019c8-8590-11e5-8ff9-0e3ff518bd15/viz.json'}
];
var map;
var center = [15.222246513227375,-2.01025390625];
var center2 = [-10,3.7];
var zoom = 4;
var zoom2 = 2
function loadMaps(a){
$('#map').empty();
cartodb.createVis('map', jsons[a].viz,{
center_lat: '15.222246513227375',
center_lon: '-2.01025390625',
zoom: zoom,
shareable:false,
search:false,
layer_selector:false,
zoomControl:true,
loaderControl: true
}).done(function(viz,layers){
var 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() {
// Put the thumbnails
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 + ')');
})
//loadMaps events
$('#map1').click(function(){
loadMaps(0);
});
$('#map2').click(function(){
loadMaps(1);
});
$('#map3').click(function(){
loadMaps(2);
});
// Click on first button
$('#map1').click();
}
$('.Thumbnails > li').click(function() {
$('.Thumbnails > li').removeClass('selected');
$(this).addClass('selected');
});
window.onload = main;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment