CartoDB.js playground

HTML

<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/themes/css/cartodb.css">
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>
<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-header">
         <img style="width: 100%" src="http://cartodb.com/assets/logos/logos_full_cartodb_light.png"></src>
       </div>
       <div class="cartodb-popup-content">
         <!-- content.data contains the field info -->
         <h4>cartodb_id</h4>
         <p>{{content.data.name}}</p>
       </div>
     </div>
     <div class="cartodb-popup-tip-container"></div>
  </div>
</script>

CSS

html, body, #map {
    height: 100%;
    padding: 0;
    margin: 0;
}

JavaScript

/*
feel free to comment and uncomment sections to execute different snippets
with cartodb.js
*/

// minimal
/*
var viz = 'https://ignspaintest.cartodb.com/api/v2/viz/2d215c0c-08ff-11e5-9e8a-0e018d66dc29/viz.json';
cartodb.createVis('map',viz);
*/


//Create the leaflet map
var map = L.map('map', {
    zoomControl: true,
    center: [39.583,2.670],
    zoom: 12,
    fullscreen: true
});

// PNOA WMS
/*
L.tileLayer.wms("http://www.ign.es/wms-inspire/pnoa-ma", {
    layers: 'OI.OrthoimageCoverage',
    format: 'image/jpeg',
    transparent: false,
    attribution: "IGN"
}).addTo(map);
*/

// POSITRON
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
}).addTo(map);

//Add a CartoDB Layer from a viz.json
/*
var viz = 'https://ignspaintest.cartodb.com/api/v2/viz/2d215c0c-08ff-11e5-9e8a-0e018d66dc29/viz.json';
cartodb.createLayer(map, viz).addTo(map);
*/

//Add a CartoDB Layer from a layer source

var mySQL = 'WITH' +
    ' data AS (' +
    '   SELECT * ' +
    '   FROM lugint_btn100' +
    '   WHERE etiqueta like \'Gasolinera\'' +
    ' ), ' +
    ' insideIds AS (' +
    '   SELECT a.cartodb_id' +
    '   FROM data a,nucleos_pobl_btn100 b' +
    '   WHERE ST_Intersects(a.the_geom , b.the_geom)' +
    ' )' +
    ' SELECT * FROM data ' +
    ' WHERE cartodb_id NOT IN' +
    ' (' +
    '   SELECT cartodb_id ' +
    '   FROM insideIds' +
    ' )';
var myCSS = '#layer{' +
    '  marker-fill-opacity: 0.5;' +
    '  marker-line-color: #FFCC00;' +
    '  marker-line-width: 2;' +
    '  marker-line-opacity: 1;' +
    '  marker-placement: point;' +
    '  marker-width: 14;' +
    '  marker-fill: #FFCC00;' +
    '  marker-allow-overlap: true;' +
    '}';
cartodb.createLayer(map, {
    https: true,
    user_name: 'ignspaintest',
    type: 'cartodb',
    sublayers: [{
        sql: 'SELECT *...