examples/openlayers.html

<!DOCTYPE html>
<html>
  <head>
    <title>OpenLayers 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="./css/OLstyle.css" type="text/css">

  </head>
  <body>
    <div id="map"></div>

    <!-- include cartodb.core.js library -->
    <script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.core.js"></script>
    <script src="vendor/OpenLayers.js"></script>
    <script type="text/javascript">
       var map, layer;
       function init() {

        // create openlayers map
        layer = new OpenLayers.Layer.OSM("Simple OSM Map");
         map = new OpenLayers.Map({
          div: 'map',
          layers: [layer],
          center: [0, 0],
          zoom: 1
        });

        // request cartodb layer
        // most populated places rendered with red markers
        cartodb.Tiles.getTiles({
          type: 'cartodb',
          user_name: 'examples',
          sublayers: [{
           sql: 'select * from ne_10m_populated_p_2',
           cartocss: '#ne_10m_populated_p_2{ marker-fill: #F11810; marker-opacity: 0.9; marker-allow-overlap: true; marker-placement: point; marker-type: ellipse; marker-width: 7.5; marker-line-width: 2; marker-line-color: #000; marker-line-opacity: 0.2; }'
          }]
        }, function(tileTemplate) {
          // generate urls for openlayers
          var tilesUrl = []
          for(var i = 0; i < 4; ++i) {
            tilesUrl.push(
              tileTemplate.tiles[0]
                .replace('{s}', 'abcd'[i])
                .replace('{z}','${z}')
                .replace('{x}','${x}')
                .replace('{y}','${y}')
            );
          }

          // create the openlayers layer
          var cartodbLayer = new OpenLayers.Layer.XYZ(
            "CartoDB example",
            tilesUrl, {
              attribution: "CartoDB, populated places",
              sphericalMercator: true,
              isBaseLayer: false
          });

          // add to the map
          map.addLayer(cartodbLayer);
        });
      }

      init();

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