projections for fun

<!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="https://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>

</head>
  <body>
    
    <div class="menu-wrapper">
      <nav>
      </nav>
    </div>
    <div id="map"></div>
    <div id="proj"></div>

<script src="https://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
        })

</script>

</body>
</html>

Modified http://libs.cartocdn.com/cartodb.js/v3/cartodb.js to a secure url

https://libs.cartocdn.com/cartodb.js/v3/cartodb.js