Old school D3 from simpler times

All examples By author By category About

kyroskoh

Full window Github gist

sla-training_session2:Multilayer Interactivity

<!DOCTYPE html>
<html>
  <head>
    <title>Custom infowindow 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="https://cartodb.com/assets/favicon.ico" />

<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
            <script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>

<style>
      html, body, #map {
        height: 100%;
        padding: 0;
        margin: 0;
      }
      </style>

</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-content">
              <h2>Sublayer 0</h2>
              <h4>This is...</h4>
              <p>{{content.data.name}}</p>
              <h4>It has a population of</h4>
              <p>{{content.data.pop_max}}</p>              
           </div>
         </div>
         <div class="cartodb-popup-tip-container"></div>
      </div>
    </script>
    <script type="infowindow/html"  id="tooltip_template">
     <div class="cartodb-tooltip-content-wrapper">
       <div class="cartodb-tooltip-content">
         <h4>name</h4>
         <p>{{name}}</p>
         <h4>population</h4>
         <p>{{pop_max}}</p>
       </div>
     </div>
     </script>

<script>
    function main() {
      var map = L.map('map', { 
        zoomControl: false,
        center: [40.418709, -3.703277],
        zoom: 3
      });
      // add a nice baselayer from Stamen 
      L.tileLayer('https://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {
        attribution: 'Stamen and CartoDB attribution'
      }).addTo(map);
       cartodb.createLayer(map, {
        user_name: 'trainer02',
        maps_api_template: "https://sla-training.cartodb.solutions:443/user/{user}",
        sql_api_template: "https://sla-training.cartodb.solutions:443/user/{user}",
        tiler_protocol: "http",
        tiler_domain: "sla-training.cartodb.solutions",
        tiler_port: "80",
        filter: "mapnik",
        type: 'cartodb',
        sublayers: [{
          sql: 'SELECT * FROM ne_10m_populated_places_simple WHERE megacity=0',
          cartocss: '#ne_10m_populated_places_simple{marker-width:8; marker-fill:#ff6600}',
          interactivity: 'cartodb_id, name, pop_max'
        },
        {
          sql: 'SELECT * FROM ne_10m_populated_places_simple WHERE megacity=1',
          cartocss: '#ne_10m_populated_places_simple{marker-width:10; marker-fill:#66ff00}',
          interactivity: 'cartodb_id, name, pop_max'
        }]   
      },{https:true})
       .addTo(map)
       .on('done', function(layer) {
         var sublayer0 = layer.getSubLayer(0);
         cdb.vis.Vis.addInfowindow(map, sublayer0, 
            ['cartodb_id', 'name', 'pop_max'],
            {infowindowTemplate: $('#infowindow_template').html(), sanitizeTemplate:false});
         var sublayer1 = layer.getSubLayer(1);
         
         var testTooltip = layer.leafletMap.viz.addOverlay({
            type: 'tooltip',
            layer: sublayer1,
            template: $('#tooltip_template').html(), 
            width: 200,
            position: 'bottom|right',
            fields: [{ name: 'name', population: 'pop2005' }]
          });
          $('body').append(testTooltip.render().el); 
         });
       }
     window.onload = main; 
    </script>
  </body>
</html>

https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js