examples/gmaps_multilayer.html

<!DOCTYPE html>
<html>
  <head>
    <title>GMaps 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>
    <!-- include google maps library *before* load cartodb.js -->
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <!-- include cartodb.js library -->
    <script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>

    <script>

      function main() {

          var map;

          // create google maps map
          var mapOptions = {
            zoom: 3,
            center: new google.maps.LatLng(43, 0),
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          map = new google.maps.Map(document.getElementById('map'),  mapOptions);
          // 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; }'
            }]
          })
          .addTo(map)
          .done(function(layer) {
            var population;

            // wait a little bit and add the most populated places
            setTimeout(function() {
              population = layer.createSubLayer({
                sql: 'select * from ne_10m_populated_p_2',
                cartocss: '#layer { marker-fill: black; line-color: #333; marker-width: 3 }',
                interactivity: 'name'
              });
              // print on the console the place name on hover
              population.on('featureOver', function(e, pos, pixel, data) {
                console.log(data.name);
              });
              population.setInteraction(true);
            }, 3000);

            // show population only in USA
            setTimeout(function() {
              population.setSQL("select * from ne_10m_populated_p_2 where adm0name = 'United States of America'")
            }, 6000);

            // bigger points in USA
            setTimeout(function() {
              population.setCartoCSS( '#layer { marker-fill: black; line-color: #333; marker-width: 10; marker-opacity: 0.6; }' );
            }, 8000);

            // remove the countries layer
            setTimeout(function() {
              layer.getSubLayer(0).remove();
            }, 10000);

          });

      }

      window.onload = main;


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