Simple createLayer by andrewxhill

index.html

<!doctype html>
<html>
<head>
<title>createLayer</title>
<link href='//fonts.googleapis.com/css?family=Alike' rel='stylesheet' type='text/css'>
    <style>
      html, body, #map {
        height: 100%;
        padding: 0;
        margin: 0;
        background: black;
      }
    </style>
    <link rel="stylesheet" href="//libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
    <script src="//libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
	<script type="text/javascript">
    function main() {
        var layer = L.tileLayer('//{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
          attribution: '&copy; <a href="//www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="//cartodb.com/attributions">CartoDB</a>'
        });

        var map = L.map('map', {
            scrollWheelZoom: false,
            center: [40.7127837, -74.0059413],
            zoom: 6
        });

        map.addLayer(layer);
        
        var bounds = [[-42, -126],[58, 154]];
        map.fitBounds(bounds);
        
        cartodb.createLayer(map, {
          user_name: 'andrew',
          type: 'cartodb',
          sublayers: [{
            sql: 'SELECT * FROM smart_center',
             cartocss: '#smart_center{  marker-fill-opacity: 0.9;  marker-line-color: #FFF;  marker-line-width: 1;  marker-line-opacity: 1;  marker-placement: point;  marker-type: ellipse;  marker-width: 10;  marker-fill: #FF6600;  marker-allow-overlap: true;}'
          }]
        }).done(function(layer) {
          map.addLayer(layer);
        });
    }

    window.onload = main;
</script>

</head>
<body>
    <div id="map"></div>
	<canvas id="test" style="background-color: black;"></canvas>
</body>
</html>