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%;
            }
          
            .sql-overlay {
                background: white;
                border-radius: 5px;
                position: absolute;
                padding: 5px;
                top: 75px;
                right: 25px;
            }
        </style>
​
    </head>
    <body>
        <div id="map"></div>
        <div class="sql-overlay"></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());
                    });
              
                // Build a URL. Replace your username below and the SQL statement
                var url = 'https://brelsfoeagain.carto.com/api/v2/sql?' + $.param({
                    q: "SELECT COUNT(*) FROM watsan WHERE watsan='toilet_public'"
                });
                $.getJSON(url)
                    .done(function(data) {
                        // Once the data has loaded, update the text in the overlay
                        //
                        // If you want to see the data that is returned, uncomment this line:
                        //console.log(data);
                        //
                        // In this case we get data.rows[0].count, get rows from 
                        // data, get the first row, then get count from that.
                        $('.sql-overlay').text('There are ' + data.rows[0].count + ' public toilets')
                    });
            });
        </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