index.html
<!DOCTYPE html>
<html>
<head>
<title>Leaflet multilayer 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="//cartodb.com/assets/favicon.ico" />
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
background: black;
}
#proj {
position: absolute;
top: 10px;
left: 20px;
width: 100px;
height: 60px;
background: rgba(0,0,0,0.4);
}
#proj a {
text-decoration: none;
color: white;
}
.menu-wrapper {
position: absolute;
top: 5px;
right: 5px;
width: 64px;
height: 64px;
z-index: 3200;
-webkit-transition: all 300ms ease 0ms;
transition: all 300ms ease 0ms;
border: 1px solid #999;
cursor: pointer;
}
.menu-wrapper:after {
content: 'P';
display: block;
position: absolute;
width: 64px;
height: 64px;
background-color: #666;
top: 0;
left: 0;
font: 24px/64px 'Arial';
text-align: center;
color: #fff;
}
.menu-wrapper nav {
position: absolute;
top: 0;
right: 0;
width: 64px;
height: 64px;
z-index: -1;
}
.menu-wrapper nav a {
box-sizing: border-box;
background-color: rgba(128, 128, 128, 0.33);
border-color: #999;
border-style: solid;
border-width: 0 1px;
color: black;
display: block;
font: 14px/64px sans-serif;
height: 64px;
opacity: 0.5;
padding: 0px 26px;
position: absolute;
right: -1px;
text-align: left;
text-decoration: none;
top: 0;
-webkit-transition: all 300ms ease 0ms, width 0ms ease-out 0ms;
transition: all 300ms ease 0ms, width 0ms ease-out 0ms;
vertical-align: middle;
width: 64px;
z-index: -1;
overflow: hidden;
}
.menu-wrapper nav a i {
vertical-align: middle;
font-size: 20px;
}
.menu-wrapper nav a span {
display: inline;
vertical-align: middle;
-webkit-transform: scale(0, 1);
margin-left: 5px;
text-transform: uppercase;
}
.menu-wrapper nav a:first-of-type {
border-width: 1px 1px 0 1px;
}
.menu-wrapper nav a:last-of-type {
border-width: 0 1px 1px 1px;
}
.menu-wrapper nav a:hover {
background-color: gray;
color: white;
}
.menu-wrapper nav a:hover span {
color: white;
}
.menu-wrapper.open:before {
content: '';
display: block;
position: absolute;
bottom: -1px;
left: 0;
height: 0px;
width: 100%;
border-bottom: 1px solid white;
}
.menu-wrapper.open nav a {
opacity: 1;
width: 280px;
}
.menu-wrapper.open nav a:nth-child(1) {
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: all 200ms ease-in-out 0ms, color 200ms ease 0ms, background-color 200ms ease 0ms, width 300ms ease-in 200ms, opacity 300ms ease-in 0ms;
transition: all 200ms ease-in-out 0ms, color 200ms ease 0ms, background-color 200ms ease 0ms, width 300ms ease-in 200ms, opacity 300ms ease-in 0ms;
}
.menu-wrapper.open nav a:nth-child(2) {
-webkit-transform: translateY(200%);
-ms-transform: translateY(200%);
transform: translateY(200%);
-webkit-transition: all 400ms ease-in-out 0ms, color 200ms ease 0ms, background-color 200ms ease 0ms, width 300ms ease-in 400ms, opacity 300ms ease-in 100ms;
transition: all 400ms ease-in-out 0ms, color 200ms ease 0ms, background-color 200ms ease 0ms, width 300ms ease-in 400ms, opacity 300ms ease-in 100ms;
}
.menu-wrapper.open nav a:nth-child(3) {
-webkit-transform: translateY(300%);
-ms-transform: translateY(300%);
transform: translateY(300%);
-webkit-transition: all 600ms ease-in-out 0ms, color 200ms ease 0ms, background-color 200ms ease 0ms, width 300ms ease-in 600ms, opacity 300ms ease-in 200ms;
transition: all 600ms ease-in-out 0ms, color 200ms ease 0ms, background-color 200ms ease 0ms, width 300ms ease-in 600ms, opacity 300ms ease-in 200ms;
}
.menu-wrapper.open nav a:nth-child(4) {
-webkit-transform: translateY(400%);
-ms-transform: translateY(400%);
transform: translateY(400%);
-webkit-transition: all 800ms ease-in-out 0ms, color 200ms ease 0ms, background-color 200ms ease 0ms, width 300ms ease-in 800ms, opacity 300ms ease-in 300ms;
transition: all 800ms ease-in-out 0ms, color 200ms ease 0ms, background-color 200ms ease 0ms, width 300ms ease-in 800ms, opacity 300ms ease-in 300ms;
}
.menu-wrapper.open nav a:nth-child(5) {
-webkit-transform: translateY(500%);
-ms-transform: translateY(500%);
transform: translateY(500%);
-webkit-transition: all 1000ms ease-in-out 0ms, color 200ms ease 0ms, background-color 200ms ease 0ms, width 300ms ease-in 1000ms, opacity 300ms ease-in 400ms;
transition: all 1000ms ease-in-out 0ms, color 200ms ease 0ms, background-color 200ms ease 0ms, width 300ms ease-in 1000ms, opacity 300ms ease-in 400ms;
}
.menu-wrapper.open nav a:nth-child(6) {
-webkit-transform: translateY(600%);
-ms-transform: translateY(600%);
transform: translateY(600%);
-webkit-transition: all 1000ms ease-in-out 0ms, color 200ms ease 0ms, background-color 200ms ease 0ms, width 300ms ease-in 1000ms, opacity 300ms ease-in 400ms;
transition: all 1000ms ease-in-out 0ms, color 200ms ease 0ms, background-color 200ms ease 0ms, width 300ms ease-in 1000ms, opacity 300ms ease-in 400ms;
}
.menu-wrapper.open nav a:nth-child(7) {
-webkit-transform: translateY(700%);
-ms-transform: translateY(700%);
transform: translateY(700%);
-webkit-transition: all 1000ms ease-in-out 0ms, color 200ms ease 0ms, background-color 200ms ease 0ms, width 300ms ease-in 1000ms, opacity 300ms ease-in 400ms;
transition: all 1000ms ease-in-out 0ms, color 200ms ease 0ms, background-color 200ms ease 0ms, width 300ms ease-in 1000ms, opacity 300ms ease-in 400ms;
}
.menu-wrapper.open nav a:nth-child(8) {
-webkit-transform: translateY(800%);
-ms-transform: translateY(800%);
transform: translateY(800%);
-webkit-transition: all 1000ms ease-in-out 0ms, color 200ms ease 0ms, background-color 200ms ease 0ms, width 300ms ease-in 1000ms, opacity 300ms ease-in 400ms;
transition: all 1000ms ease-in-out 0ms, color 200ms ease 0ms, background-color 200ms ease 0ms, width 300ms ease-in 1000ms, opacity 300ms ease-in 400ms;
}
.menu-wrapper.open nav a:nth-child(9) {
-webkit-transform: translateY(900%);
-ms-transform: translateY(900%);
transform: translateY(900%);
-webkit-transition: all 1000ms ease-in-out 0ms, color 200ms ease 0ms, background-color 200ms ease 0ms, width 300ms ease-in 1000ms, opacity 300ms ease-in 400ms;
transition: all 1000ms ease-in-out 0ms, color 200ms ease 0ms, background-color 200ms ease 0ms, width 300ms ease-in 1000ms, opacity 300ms ease-in 400ms;
}
.menu-wrapper.open nav a:nth-child(10) {
-webkit-transform: translateY(1000%);
-ms-transform: translateY(1000%);
transform: translateY(1000%);
-webkit-transition: all 1000ms ease-in-out 0ms, color 200ms ease 0ms, background-color 200ms ease 0ms, width 300ms ease-in 1000ms, opacity 300ms ease-in 400ms;
transition: all 1000ms ease-in-out 0ms, color 200ms ease 0ms, background-color 200ms ease 0ms, width 300ms ease-in 1000ms, opacity 300ms ease-in 400ms;
}
.menu-wrapper.open nav a:nth-child(11) {
-webkit-transform: translateY(1100%);
-ms-transform: translateY(1100%);
transform: translateY(1100%);
-webkit-transition: all 1000ms ease-in-out 0ms, color 200ms ease 0ms, background-color 200ms ease 0ms, width 300ms ease-in 1000ms, opacity 300ms ease-in 400ms;
transition: all 1000ms ease-in-out 0ms, color 200ms ease 0ms, background-color 200ms ease 0ms, width 300ms ease-in 1000ms, opacity 300ms ease-in 400ms;
}
</style>
<link rel="stylesheet" href="//libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
</head>
<body>
<div class="menu-wrapper">
<nav>
</nav>
</div>
<div id="map"></div>
<div id="proj"></div>
<script src="//libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<script>
function main() {
$('.menu-wrapper').on('click', function() {
$(this).toggleClass('open');
});
if(window.location.hash) {
var proj = window.location.hash.substring(1);
} else {
var proj = 42303;
window.location.hash = proj;
}
console.log(proj)
var sql = cartodb.SQL({ user: 'andrew' });
var map = L.map('map', {
zoomControl: false,
center: [43, 0],
zoom: 3
})
var conf = {
'42303': {table: 'us_states', srid: 42303, id: 'PROJCS: NAD83 / Albers NorthAm', link: '//epsg.io/42303'},
'102005': {table: 'us_states_contiguous', srid: 102005, id: 'USA Contiguous Equidistant Conic', link: '//epsg.io/102005'},
'102031': {table: 'ne_adm0_europe', srid: 102031, id: 'Europe Equidistant Conic', link: '//epsg.io/102031'},
'102029': {table: 'asia_adm0', srid: 102029, id: 'Asia South Equidistant Conic', link: '//epsg.io/102029'},
'102023': {table: 'africa_adm0', srid: 102023, id: 'Africa Equidistant Conic', link: '//epsg.io/102023'},
'102032': {table: 'samerica_adm0', srid: 102032, id: 'South America Equidistant Conic', link: '//epsg.io/102032'},
'102016': {table: 'world_borders_no_antarctica', srid: 102016, id: 'North Pole Azimuthal Equidistant', link: '//epsg.io/102016'},
'102019': {table: 'world_borders', srid: 102019, id: 'South Pole Azimuthal Equidistant', link: '//epsg.io/102019'},
'3577': {table: 'australian_albers', srid: 3577, id: 'Australian Albers', link: '//epsg.io/3577'}
}
function redirect(srid){
console.log(srid)
}
for (a in conf){
$('nav').append(
$("<a href=\"#"+a+"\"><i class=\"fa fa-times\"></i> <span>"+conf[a].id+"</span></a>")
)
}
$('nav a').click(function(){
window.location.reload();
})
$('#proj').html("<a target=_blank href='"+conf[proj].link+"'>"+conf[proj].id+"</a>")
var bsql = 'SELECT ST_Transform(ST_SetSRID(st_transform(the_geom_webmercator, '+conf[proj].srid+'),3857),4326) the_geom FROM '+conf[proj].table;
sql.getBounds(bsql).done(function(bounds) {
map.fitBounds(bounds);
});
cartodb.createLayer(map, {
user_name: 'andrew',
type: 'cartodb',
sublayers: [{
sql: 'SELECT cartodb_id, st_transform(the_geom_webmercator, '+conf[proj].srid+') the_geom_webmercator FROM '+conf[proj].table,
cartocss: '#'+conf[proj].table+'::blur { polygon-fill: #7af; polygon-opacity: 1; polygon-clip: false; image-filters: agg-stack-blur(15,15);} #'+conf[proj].table+' { polygon-fill: #85D8CE; polygon-opacity: 1; line-width: 0; polygon-clip: false;}',
interactivity: 'cartodb_id'
}]
})
.addTo(map)
.done(function(layer) {
cartodb.createLayer(map, {
type: "torque",
order: 1,
options: {
query: 'SELECT pop_max, cartodb_id, st_transform(the_geom_webmercator, '+conf[proj].srid+') the_geom_webmercator FROM populated_places p WHERE 0<(SELECT count(cartodb_id) FROM '+conf[proj].table+' c WHERE p.the_geom && c.the_geom LIMIT 1)',
table_name: "populated_places",
user_name: "andrew",
tile_style: 'Map { -torque-frame-count:256; -torque-animation-duration:10; -torque-time-attribute:"cartodb_id"; -torque-aggregation-function:"count(cartodb_id)"; -torque-resolution:2; -torque-data-aggregation:linear; } #populated_places{ comp-op: lighter; marker-fill-opacity: 0.9; marker-line-color: #FFF; marker-line-width: 0; marker-line-opacity: 1; marker-type: ellipse; marker-width: 1; marker-fill: #FF77AA; } #populated_places[frame-offset=1] { marker-width:3; marker-fill-opacity:0.45; } #populated_places[frame-offset=2] { marker-width:5; marker-fill-opacity:0.225; } #populated_places[frame-offset=3] { marker-width:7; marker-fill-opacity:0.1; }'
}
}).done(function(layer) {
map.addLayer(layer);
});
});
}
window.onload = main;
</script>
</body>
</html>