kyroskoh/index.html

## index.html
<!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="http://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('http://{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>
	<!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="http://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('http://{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>