Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
​
    <!--
        Load Carto's code so we can pull in our Carto maps.
    -->
    <link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
​
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
        width: 100%;
      }
​
      #sidebar {
        background-color: steelblue;
        height: 100%;
        float: left;
        width: 30%;
      }
      
      .sidebar-inner {
        padding: 15px;
      }
​
      #map {
        float: left;
        height: 100%;
        width: 70%;
      }
      
      .data-image {
        max-width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="sidebar">
      <div class="sidebar-inner">
        <div>
          <span class='data-name'></span>
        </div>
        <div>
          <img class='data-image' />
        </div>
      </div>
    </div>
    <div id="map"></div>
​
    <script>
      var dataLayer;
​
      $(document).ready(function () {
        cartodb.createVis('map', 'https://thenewschool.carto.com/u/brelsfoeagain/api/v2/viz/5e4c4bc7-1604-47f6-bfe4-6956e07f9333/viz.json')
          .done(function (vis, layers) {
            dataLayer = layers[1].getSubLayer(0);
          
            // Turn interactivity on, this enables clicking on features even with popups turned off in Carto
            layers[1].setInteraction(true);
          
            // Set which columns you want from the dataset when a feature is clicked. This is a comma-separated list.
            dataLayer.set({
              interactivity: 'cartodb_id,name,image_url'
            });
​
            // When a feature is clicked, put the data in the sidebar
            dataLayer.on('featureClick', function(e, latlng, pos, data) {
              // You can handle any text like this:
              $('.data-name').text(data.name);
              
              // If you have attributes (like an <img> src) do so this way:
              $('.data-image').attr('src', data.image_url);
            });
          
          
            // Since popups are turned off we need to change the mouse cursor when you're over a feature manually. These six lines do this:
            dataLayer.on('featureOver', function () {
              $('.cartodb-map-wrapper').css('cursor', 'pointer');
            });
            dataLayer.on('featureOut', function () {
              $('.cartodb-map-wrapper').css('cursor', '');
            });
​
          });
        });
    </script>
    <script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>
  </body>
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
ebrelsfordpro
0viewers