Old school D3 from simpler times

All examples By author By category About

kyroskoh

Full window Github gist

sla-training_session2:custom Tooltip

<!DOCTYPE html>
<html>
<head>
  <title>Tooltip on hover with createLayer() | 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="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
  <script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>

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

</style>
</head>

<body>

<script type="tooltip/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>
  
  <div id='map'></div>
  
  <script type="text/javascript">
    function main() {

var map = new L.Map('map', {center: [20, 20], zoom: 2});
            
      L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://cartodb.com/attributions">CartoDB</a>'
      }).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',
            cartocss: '#ne_10m_populated_places_simple {marker-fill:#f60;}',
            interactivity: 'cartodb_id, name, pop_max'
          }]
      },{/*options*/})
        .addTo(map)
        .on('done', function(layer) {
          //do stuff
          var sublayer = layer.getSubLayer(0);
          sublayer.setInteractivity('cartodb_id, name, pop_max');
                   
          // tooltip definition for createLayer()
          var testTooltip = layer.leafletMap.viz.addOverlay({
            type: 'tooltip',
            layer: sublayer,
            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>

Modified http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js to a secure url

https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js