Last active
August 29, 2015 14:15
-
-
Save andrewxhill/7ff8a68d5ee3b4b37054 to your computer and use it in GitHub Desktop.
projections for fun
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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="http://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="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" /> | |
<!--[if lte IE 8]> | |
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.ie.css" /> | |
<![endif]--> | |
</head> | |
<body> | |
<!-- Menu wrapper from http://codepen.io/anon/pen/pvLVXd --> | |
<div class="menu-wrapper"> | |
<nav> | |
</nav> | |
</div><!--/.menu-wrapper--> | |
<div id="map"></div> | |
<div id="proj"></div> | |
<!-- include cartodb.js library --> | |
<script src="http://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) | |
// set sql api client | |
var sql = cartodb.SQL({ user: 'andrew' }); | |
// create leaflet map | |
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: 'http://epsg.io/42303'}, | |
'102005': {table: 'us_states_contiguous', srid: 102005, id: 'USA Contiguous Equidistant Conic', link: 'http://epsg.io/102005'}, | |
'102031': {table: 'ne_adm0_europe', srid: 102031, id: 'Europe Equidistant Conic', link: 'http://epsg.io/102031'}, | |
'102029': {table: 'asia_adm0', srid: 102029, id: 'Asia South Equidistant Conic', link: 'http://epsg.io/102029'}, | |
'102023': {table: 'africa_adm0', srid: 102023, id: 'Africa Equidistant Conic', link: 'http://epsg.io/102023'}, | |
'102032': {table: 'samerica_adm0', srid: 102032, id: 'South America Equidistant Conic', link: 'http://epsg.io/102032'}, | |
'102016': {table: 'world_borders_no_antarctica', srid: 102016, id: 'North Pole Azimuthal Equidistant', link: 'http://epsg.io/102016'}, | |
'102019': {table: 'world_borders', srid: 102019, id: 'South Pole Azimuthal Equidistant', link: 'http://epsg.io/102019'}, | |
'3577': {table: 'australian_albers', srid: 3577, id: 'Australian Albers', link: 'http://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); | |
}); | |
// add cartodb layer with one sublayer | |
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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment