1

I've got a script which works fine for the base layer (green dots - not all work, but that's my issue!), but cannot see how to get the next layer to play the relevant YouTube video. I can't find a reference to how to get the correct infowindow template applying to the right layer - and therefore for the correct cartodb.popup.content to be applied. Can anyone help my weak HTML?

The test is at http://www.skyworkshd.com/hocwales/ and the index.html script is here:

<!DOCTYPE html> <html> <head>   <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>   <link rel="stylesheet" href="http://libs.cartodb.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />   <style type="text/css">
    html, body, #map {
      height: 100%;
      padding: 0;
      margin: 0;
    }           div.cartodb-popup.v2.dark {
    background:#2D2D2D;
       }
         div.cartodb-popup.v2 {
        width: 345px  !important;
        height: 280px;
      }         div.infowindow-custom{          position: relative;         width: auto;        background:#2D2D2D;         margin-bottom: 11px;        height: auto;

                    }   div.cartodb-popup.v2.dark:before {
    border-top-color:black;   }   div.cartodb-popup.v2.dark div.cartodb-popup-tip-container:after {
    border-top-color:#2D2D2D;   }   div.cartodb-popup.v2.dark a.cartodb-popup-close-button {
    background:#2D2D2D;   }   div.cartodb-popup.v2.dark a.cartodb-popup-close-button:before,   div.cartodb-popup.v2.dark a.cartodb-popup-close-button:after {
    background:white;   }   /* Hello IE */   @media \0screen\,screen\9 {
    div.cartodb-popup.v2.dark {
      border:4px solid #AAA;
    }
    div.cartodb-popup.v2.dark div.cartodb-popup-tip-container {
      border-top:18px solid #000;
    }
    div.cartodb-popup.v2.dark a.cartodb-popup-close-button {
      border:2px solid #AAA;
      color:white;
    }
    div.cartodb-popup.v2.dark a.cartodb-popup-close-button:hover {
      border:2px solid #BBB;
    }   }   /**    *  CartoDB popup styles (DEFAULT)    */   div.cartodb-infowindow {
    position: absolute;
    z-index: 12;        width: 345px;
           }   div.cartodb-popup {
    position:relative;
    width:345px;
    padding:7px 0 0 0;
    margin:0;
    background:url('../../AppData/Local/Temp/23b93f96/img/light.png') no-repeat -226px 0; }   div.cartodb-popup div.cartodb-popup-content-wrapper {
    width:345px;
    max-width: 345px;
    padding:12px 19px 12px 19px;
    overflow-x: hidden;
    background:url('../../AppData/Local/Temp/23b93f96/img/light.png') repeat-y -452px 0; }   div.cartodb-popup div.cartodb-popup-content {
    display:block;
    width:345px;
    max-width: 345px;
    min-height:5px;
    margin: 0;
    padding: 0;
    overflow-y: hidden;
    overflow-x: hidden!important;
    outline: none;
    text-align:left;   }

       /* Custom gradients for scroll content */   div.cartodb-popup .jspContainer:after,   div.cartodb-popup .jspContainer:before {
    content:'';
    position:absolute;
    left:0;
    right:12px;
    display:none;
    height:10px;
    width:345px;
    z-index: 5;   }   div.cartodb-popup .jspContainer:after {
    bottom:0px;
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255,255,255,0)), color-stop(100%, rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1));
    background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1));
    background: -o-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1));
    background: linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
           }   div.cartodb-popup .jspContainer:before {
    top:0px;
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,0)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
    background: -moz-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
    background: -o-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
    background: linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
           }   div.cartodb-popup div.cartodb-popup-tip-container {
    width:345px;
    height:20px;
    background:url('../../AppData/Local/Temp/23b93f96/img/light.png') no-repeat 0 0; }   div.cartodb-popup a.cartodb-popup-close-button {
    position:absolute;
    top:-9px;
    right:-9px;
    width:26px;
    height:26px;
    padding:0;
    background:url('../../AppData/Local/Temp/23b93f96/img/light.png') no-repeat 0 -23px;
    text-indent:-9999px;
    font-size:0;
    line-height:0;
    opacity:1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    text-transform:uppercase;
    z-index:3;   }   /* When there are no fields in header popup themes */   div.cartodb-popup.header.no_fields div.cartodb-popup-content {
    display:none;   }   div.cartodb-popup.header.no_fields   div.cartodb-popup-content-wrapper   div.cartodb-edit-buttons {
    padding-top:5px;
    margin-top:0;   }   div.cartodb-popup.header.no_fields div.cartodb-edit-buttons {
    border: none;
    padding-top:0;   }
     /* Custom scroll in CartoDB content */   div.cartodb-popup .jspContainer {
    overflow: hidden;
    position: relative;
    outline: none;   }   div.cartodb-popup .jspContainer * {
    outline: none;   }
     div.cartodb-popup .jspPane {
    position: absolute;
    padding:4px 0 0 0!important;
    z-index:1;
           }   div.cartodb-popup .jspVerticalBar {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    background: none;
    z-index:10;   }   div.cartodb-popup .jspHorizontalBar {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    height: 6px;
    background: none;   }   div.cartodb-popup .jspVerticalBar *,   div.cartodb-popup .jspHorizontalBar * {
    margin: 0;
    padding: 0;   }   div.cartodb-popup .jspCap {
    display: none;   }   div.cartodb-popup .jspHorizontalBar .jspCap {
    float: left;   }   div.cartodb-popup .jspTrack {
    position: relative;
    cursor: pointer;
    background: none;   }   div.cartodb-popup .jspDrag {
    position: relative;
    top: 0; left: 0;
    cursor: pointer;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    background: #999999;
    background: rgba(0,0,0,0.16);   }   div.cartodb-popup .jspDrag:hover {
    background: #666666;
    background: rgba(0,0,0,0.5);
    cursor: pointer;   }   div.cartodb-popup .jspHorizontalBar .jspTrack,   div.cartodb-popup .jspHorizontalBar .jspDrag {
    float: left;
    height: 100%;   }   div.cartodb-popup .jspArrow {
    background: #50506d;
    text-indent: -20000px;
    display: block;
    cursor: pointer;   }   div.cartodb-popup .jspArrow.jspDisabled {
    cursor: default;
    background: #80808d;   }   div.cartodb-popup .jspVerticalBar .jspArrow {
    height: 16px;   }   div.cartodb-popup .jspHorizontalBar .jspArrow {
    width: 16px;
    float: left;
    height: 100%;   }   div.cartodb-popup .jspVerticalBar .jspArrow:focus {
    outline: none;   }   div.cartodb-popup .jspCorner {
    background: #eeeef4;
    float: left;
    height: 100%;   }
     * html div.cartodb-popup .jspCorner {
    margin: 0 -3px 0 0;   }         div.cartodb-popup.header div.cartodb-popup-header h3 {      width:345px;        margin:0;       font:bold 21px "Helvetica Neue", "Helvetica", Arial;        color:#FFFFFF;      line-height:23px;       text-shadow: 0 1px rgba(0,0,0,0.5);         word-wrap:break-word;   }   /* searchbox specification  */      div#searchbox{
    background-color: #000000;
    opacity: 0.5;
    position: absolute;
    top: 10px;
    right: 100px;
    width: auto;
    height: auto;
    padding: 10px;
    display: block;
    z-index: 9000;
    }
    div#searchbox input{
      width: 200px;
    }
    div#results{
      background: #FFF;
    }   </style> </head>

      <body>
        <div id="map"></div>

                <div id="searchbox">   <input type="text" name="ad" value="" id="ad" size="10" />   <button type="button" onclick="search()">Search</button>    <div class="rw-ui-container"></div>
        <script type="infowindow/html" id="infowindow_template">
      <div class="cartodb-popup v2 dark">
        <a href="#close" class="cartodb-popup-close-button close">x</a>
         <div class="cartodb-popup-content-wrapper">
           <div class="cartodb-popup-header">

            <iframe width="320" height="180" src="{{content.data.video_link}}" frameborder="0"></iframe>
           <div class="cartodb-popup-content">
                     <h3>{{content.data.location}} </h3>


           </div>
         </div>
         <div class="cartodb-popup-tip-container"></div>
      </div>
      </script>    <script src="http://libs.cartodb.com/cartodb.js/v3/3.15/cartodb.js"></script>  <script async src="http://platform.twitter.com/widgets.js" charset="utf-8"></script>
      <script type="infowindow/html" id="infowindow_template2">
      <div class="cartodb-popup v2 dark">
        <a href="#close" class="cartodb-popup-close-button close">x</a>
         <div class="cartodb-popup-content-wrapper">
           <div class="cartodb-popup-header">

            <iframe width="320" height="180" src="{{content.data.video_link}}" frameborder="0"></iframe>
           <div class="cartodb-popup-content">
                     <h3>{{content.data.name}} </h3>


           </div>
         </div>
         <div class="cartodb-popup-tip-container"></div>
      </div>
      </script>    <script src="http://libs.cartodb.com/cartodb.js/v3/3.15/cartodb.js"></script>  <script async src="http://platform.twitter.com/widgets.js" charset="utf-8"></script>
     <script>   var layer; var map;         function main() {

          cartodb.createVis('map', 'https://camills.carto.com/api/v2/viz/a050332a-9b06-11e6-81a3-0e233c30368f/viz.json', { description: true, search: false, shareable: true })
          .on('done', function(vis,layers) {
            layer = layers[1].getSubLayer(0); 
            layer.infowindow.set('template', $('#infowindow_template').html());
            layer.infowindow.set('sanitizeTemplate', 'false');

            layer = layers[1].getSubLayer(1); 
            layer.infowindow.set('template', $('#infowindow_template2').html());
            layer.infowindow.set('sanitizeTemplate', 'false');
            map=vis.getNativeMap();


            layer.on('error', function(err) {
               console.log('error: ' + err);
             });
          }).on('error', function() {
            console.log("some error has occurred");
          }); } function search() {
    input = $( "#ad").val();
    console.log(input);
    var sql = new cartodb.SQL({ user: 'camills' });
    sql.getBounds("SELECT * FROM walesmicroclipmap where keywords ILIKE '%"+input+"%'").done(function(bounds) {
      map.fitBounds(bounds)
    });
    layer.setSQL("SELECT * FROM walesmicroclipmap where keywords ILIKE '%"+input+"%'"); } window.onload = main;
      </script>

      </html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.