Double pane with focus by andrewxhill

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <!--Edit the title of the page-->
    <title>Your page title goes here</title>
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="//libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
    <!--[if lte IE 8]>
        <link rel="stylesheet" href="//libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.ie.css" />
    <![endif]-->
    <link rel="stylesheet" href="makeitresponsive.css">
    <!--Switch between the different themes changing the stylesheet below - light-theme.css |dark-theme.css -->
    <link rel="stylesheet" href="dark-theme.css">
    <style>
table {
    width: 100%;
    border-collapse: collapse;
}
td {
    width: 25%;
    border:0;
    padding: 0;
    color: white;
    text-align: center;
    -webkit-transition: width 300ms ease-in-out;
    -moz-transition: width 300ms ease-in-out;
    -ms-transition: width 300ms ease-in-out;
    -o-transition: width 300ms ease-in-out;
    transition: width 300ms ease-in-out;
}
td div {
/*    width: 40px;
    height: 40px;
    border-radius: 50px;
    background: rgba(255,255,255,.2);
    padding: 20px;
    margin: 100px auto;
    font-family: sans-serif;
    font-size: 40px;
    line-height: 1;*/
}
td#left {
    background: red;
}
td#right {
    background: blue;
}
td#left:hover {
    width: 75%;
}
td#right:hover {
    width: 75%;
}
    </style>
  </head>
  <body>
    
    <div class="row">
      <div class="col span2 empty"><p></p></div>
      <div class="col span12 context subheader">
        <!--Link to your personal website, your blog or your twitter account-->
        <p>Map created by <a href="#">{Link to your website}</a></p>
      </div>
      <div class="col span2 empty"><p></p></div>
    </div>

    <!--In the paragraph below give an introduction to your visualization-->
    <div class="row">
      <div class="col span2 empty"><p></p></div>
      <div class="col span12">
        <h1>Barcelona traffic at two different times</h1>
        <p>The double panel map is perfect for comparing datasets collected at different times. Here, we are showing the traffic congestion in Barcelona during the <a href=''>Mobile World Conference</a> and then the traffic one week later.</p>
      </div>
      <div class="col span2 empty"><p></p></div>
    </div>
    
    <div class="row maps">
      <table>
          <tr>
              <td id="left"><div class="map" id="map1"></div></td>
              <td id="right"><div class="map" id="map2"></div></td>
          </tr>
      </table>
<!--       <div class="col span8 left mapcon" ><div class="map" id="map1"></div></div>
      <div class="col span8 right mapcon" ><div class="map" id="map2"></div></div> -->
    </div>

    <!--Copy and paste the "row" div below a second, third, or fourth time to create content blocks-->
    <div class="row">
      <div class="col span2 empty"><p></p></div>
      <div class="col span12 titleBlock">
        <h3>Description block</h3>
      </div>
      <div class="col span2 empty"><p></p></div>
    </div>
    <div class="row">
      <div class="col span2 empty"><p></p></div>
      <div class="col span12">
        <p>The double panel is both useful for when you have obvious differences that you want to show immediately and for cases where you want to encourage the user to explore the map carefully to discover the differences. In the case above, it may not look different immediately, but if you were planning a drive during the MWC, you may want to look more carefully.</p>
      </div>
      <div class="col span2 empty"><p></p></div>
    </div>

    <!--This is an example of a second content block-->
    <div class="row">
      <div class="col span2 empty"><p></p></div>
      <div class="col span12 titleBlock">
        <h3>Description block 2</h3>
      </div>
      <div class="col span2 empty"><p></p></div>
    </div>
    <div class="row">
      <div class="col span2 empty"><p></p></div>
      <div class="col span12">
        <p>We hope you enjoy <a href="#">our templates</a> and we will continue creating new ones as much as we can!</p>
      </div>
      <div class="col span2 empty"><p></p></div>
    </div>

    <!--Play fair and keep the attributions. If you do so, we will love you even more. :)-->
    <div class="row">
      <div class="col span2 empty"><p></p></div>
      <div class="col span12 context footer">
        <p>Create your maps with ease using <a href="//cartodb.com">CartoDB</a></p></p>
      </div>
      <div class="col span2 empty"><p></p></div>
    </div>

    <script src="https://maps.googleapis.com/maps/api/js?sensor=false&v=3.8"></script>
    <script src="//libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>

    <!--Change the URL's below in order to change the maps that are being shown.
        map1 is the one on the left side and map2 is the one on the right side.
        Go to your map view in CartoDB, click on share, and copy the URL under the API section
        Check the cartodb.js documentation for more info
        //developers.cartodb.com/documentation/cartodb-js.html-->
    <script type="text/javascript">
      var map1,map2;

      cartodb.createVis('map1', '//andrew.cartodb.com/api/v2/viz/def7b830-7d33-11e3-9722-3085a9a9563c/viz.json')
      .done(function(vis, layers) {
        map1 = vis.mapView.map;
        cartodb.createVis('map2', '//andrew.cartodb.com/api/v2/viz/79ca6f98-7fc2-11e3-9a73-3085a9a9563c/viz.json')
        .done(function(vis, layers) {
            map2 = vis.mapView.map;
            map1.on('change:zoom change:center', function(e) {
              changeMapState(map1, map2);
            });
            map2.on('change:zoom change:center', function(e) {
              changeMapState(map2, map1);
            });
        })
      })

      //Applies the same view from src to tgt map
      function changeMapState(src,tgt){
        tgt.set({
            'center': src.get('center'),
            'zoom': src.get('zoom')
        });
      }

    </script>

  </body>
</html>

dark-theme.css

/* Change the styles below in order to customize your template */

body{font-family: Helvetica, Arial; font-weight: regular; font-size: 15px; color: #CBCBCB; background-color: #333}
h1{font-weight: bold; font-size: 31px; letter-spacing: -1px; color: #FFF; line-height: 33px; *margin-top:20px;}
h3{font-weight: bold; font-size: 12px; color: #777; text-transform: uppercase; margin: 10px 0 0 0;}
p{margin: 8px 0 20px 0; line-height: 18px;}
a, a:visited{color: #72B6E5; text-decoration: none;}
a:hover{text-decoration: underline;}

.context{font-family: Helvetica, Arial; font-size: 13px; color: #999; padding: 10px 0 0 0;}
.subheader{border-bottom: 1px solid #555;}
.footer{border-top: 1px solid #555; margin-top: 20px;}
.map{background-color:#eee; border-bottom: 1px solid #000; border-top: 1px solid #000; height: 440px; margin: 10px 0 25px 0;}
.titleBlock{text-align: center;}

makeitresponsive.css

/* Here are the styles that makes the template responsive */

.row {width: 96%; max-width: 960px; margin: 0 auto; text-align: center;}
.row:before, .row:after {content: " "; display: table;}
.row:after {clear: both;}
.row .row {width: 100%;}

.col {display: inline; float: left; margin: 0 1%; position: relative;}
.col .col {margin: 0 2%;}
.col .col:first-child {margin-left: 0;}
.col .col:last-child {margin-right: 0;}

.span1 {width: 4.25%;}
.span2 {width: 10.5%;}
.span3 {width: 16.75%;}
.span4 {width: 23%;}
.span5 {width: 29.5%;}
.span6 {width: 35.5%;}
.span7 {width: 41.75%;}
.span8 {width: 48%;}
.span9 {width: 54.25%;}
.span10 {width: 60.5%;}
.span11 {width: 66.75%;}
.span12 {width: 73%;}
.span13 {width: 79.25%;}
.span14 {width: 85.5%;}
.span15 {width: 91.75%;}
.span16 {width: 98%;}

@media only screen and (max-width: 480px) {
  .col.span8 {margin: 0; width: 100%;}
  .col.span12 {margin: 0; width: 100%;}
  .col.span4 {margin: 0; text-align: left;}
  .col.footer {margin: 30px 0 0 0;}
  .col.span4.titleBlock h3 {margin: 5px 0 0 0;}
  .col.span2.empty {margin: 0; width: 100%; display: none}
}