1

Here's my very simple code.

<title>Leaflet multilayer example | CartoDB.js</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
<style>
  html, body, #map {
    height: 100%;
    padding: 0;
    margin: 0;
  }
</style>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
<!--[if lte IE 8]>
    <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.ie.css" />
<![endif]-->
</head>
<body>
<div id="map"></div>
<script type="infowindow/html" id="infowindow_template">
<div class="cartodb-popup">
<a href="#close" class="cartodb-popup-close-button close">x</a>
 <div class="cartodb-popup-content-wrapper">
   <div class="cartodb-popup-header">
     <img style="width: 100%" src="http://cartodb.com/assets/logos/logos_full_cartodb_light-5ef5e4ff558f4f8d178ab2c8faa231c1.png"></src>
   </div>
    <div class="cartodb-popup-content">
     <!-- content.data contains the field info -->
     <h4>City: </h4>
     <p></p>
   </div>
 </div>
 <div class="cartodb-popup-tip-container"></div>
</div>
</script>
<!-- include cartodb.js library -->
<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<script>
  function main() {
    // create leaflet map
    var map = L.map('map', { 
      zoomControl: false,
      center: [43, 0],
      zoom: 3
    })

    // add a base layer
    L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
      attribution: 'Stamen'
    }).addTo(map);

    // add cartodb layer with one sublayer
    cartodb.createLayer(map, {
      user_name: 'examples',
      type: 'cartodb',
      sublayers: [{
         sql: 'select * from country_boundaries',
         cartocss: '#layer { polygon-fill: #F00; polygon-opacity: 0.3; line-color: #F00; }',
         interactivity: 'cartodb_id'
      }]
    })
    .addTo(map)
    .done(function(layer) {

      var sublayer = layer.getSubLayer(0);
      sublayer.infowindow.set('template', $('#infowindow_template').html());
    });

  }

  //  $(window).load(main);
  window.onload = main; 

</script>
</body>
</html>

But nothing is showing on click, here is the github Gist and the codepen here can anyone see where problem is?

1

I think your problem is related to this question, this answer and this bl.ock.

at least one issue is that you haven't defined #infowindow_template, but you can get a simple onclick popup of the country name by adding the following:

cdb.vis.Vis.addInfowindow(map, layer.getSubLayer(0), ['name']);

in place of:

sublayer.infowindow.set('template', $('#infowindow_template').html());

It looks like an infowindow template should be possible as the fourth argument to that addInfowindow() function, but I wasn't able to get it to work. You will at least need to define it somewhere in your code, as shown in the above linked examples, and also here:

<script type="infowindow/html" id="infowindow_template">
  <div class="cartodb-popup">
    <a href="#close" class="cartodb-popup-close-button close">x</a>
     <div class="cartodb-popup-content-wrapper">
       <div class="cartodb-popup-header">
         <img style="width: 100%" src="http://cartodb.com/assets/logos/logos_full_cartodb_light-5ef5e4ff558f4f8d178ab2c8faa231c1.png"></src>
       </div>
        <div class="cartodb-popup-content">
         <!-- content.data contains the field info -->
         <h4>City: </h4>
         <p></p>
       </div>
     </div>
     <div class="cartodb-popup-tip-container"></div>
  </div>
</script>
  • Why do i need to change to that? I have just done it like the documentation says? if i do it your way i will not be able to put custom mark up in the infowindow – Nicwenda Nov 13 '14 at 17:04
  • can you give me a link to the documentation so I have a better idea what you're trying to do? – toms Nov 13 '14 at 19:39

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.