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>
      
        <!--
          Custom popup
​
          Includes an image in the popup. This assumes the dataset has a column called image_url
          that has a URL for an image for each row.
        -->
        <script type="template/html" id="tooltip_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">
                <div>{{name}}</div>
                <img style="width: 100%;" src="{{image_url}}" />
              </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/13e0a718-29c1-11e7-a3b9-0ee66e2c9693/viz.json')
                    .done(function (vis, layers) {
                        dataLayer = layers[1].getSubLayer(0);
​
                        // Add the custom template for the popups
                        var popupTemplate = $('#tooltip_template').html();
                        dataLayer.infowindow.set('template_type', 'mustache');
                        dataLayer.infowindow.set('template', popupTemplate);
                    });
            });
        </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