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%;
            }
​
            #map {
                height: 100%;
                width: 100%;
            }
        </style>
​
    </head>
    <body>
        <div id="map"></div>
      
        <script type="template/html" id="popup-template">
          <div class="cartodb-popup v2">
            <a href="#close" class="cartodb-popup-close-button close">x</a>
            <div class="cartodb-popup-content-wrapper">
              <div class="cartodb-popup-content">
                {{name}} watsan: {{watsan}}
              </div>
            </div>
            <div class="cartodb-popup-tip-container"></div>
          </div>
        </script>
      
        <script>
            var dataLayer;
​
            $(document).ready(function () {
                cartodb.createVis('map', 'https://thenewschool.carto.com/u/brelsfoeagain/api/v2/viz/6b3c46d3-2025-4214-9081-dd187fa9d3f9/viz.json')
                    .done(function (vis, layers) {
                        dataLayer = layers[1].getSubLayer(0);
                        dataLayer.infowindow.set('template', $('#popup-template').html());
                    });
            });
        </script>
        <script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>
    </body>
</html>
Output

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

Dismiss x
public
Bin info
ebrelsfordpro
0viewers