Simple Example Wanted - Add SQL Layer to a basemap

Question

I am very new to CartoDB. I have a set of tables uploaded and am able to create the visualization and it works fine in the CartoDB website.

However, I want to use a simple basemap and then add my layer from the SQL query. But I cannot seem to find a simple example of how to do this in an HTML web page.

I found an example that used a leaflet map (not sure what that is) but it does not display the basemap behind the data, just displays blank white.

Answer 1

You can use the createLayer() option to call the tables that you want on the map.

When you call the layers you have to define the sql and the cartocss of the table.

Here you can see an example:

<script>

  function main() {

    // create leaflet map and define some properties
    var map = L.map('map', { 
      zoomControl: false,
      center: [43, 0],
      zoom: 3
    })

    // add the basemap on the map
    L.tileLayer('tilemapUrl', {
      attribution: ''
    }).addTo(map);


    // add cartodb layer 
   cartodb.createLayer(map, {
      user_name: 'username', // Required
      type: 'cartodb', // Required
      sublayers: [ // here you call the layers
      {
          sql: "SELECT * FROM my_table", // Required
          cartocss: '#my_table{marker-fill: #229A00;}', // Required

       }


      ]
    }).addTo(map);
  }

    // load main() function
    window.onload = main; 

</script>