CARTO.js

Integrate interactive maps and location data into your web applications and websites.

Layer Source Object

Standard Layer Source Object (type: ‘cartodb’)

Used for most maps with tables that are set to public or public with link.

Arguments

Layer Source Objects are defined with the Layergroup Configurations.

Name Description
type A string value that defines the layer type. Required.
options Options vary, depending on the type of layer source you are using:
|_ mapnik See Mapnik Layer Options.
|_ cartodb An alias for Mapnik (for backward compatibility).
|_ torque See Torque Layer Options.
|_ http See HTTP Layer Options.
|_ plain See Plain Layer Options.
|_ named See Named Map Layer Options.
Example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  user_name: 'your_user_name', // Required
  type: 'cartodb', // Required
  sublayers: [{
    sql: "SELECT * FROM table_name", // Required
    cartocss: '#table_name {marker-fill: #F0F0F0;}', // Required
    interactivity: "column1, column2, ...", // Optional
  },
  {
    sql: "SELECT * FROM table_name", // Required
    cartocss: '#table_name {marker-fill: #F0F0F0;}', // Required
    interactivity: "column1, column2, ...", // Optional
   },
   ...
  ]
}

For other layer source definitions, see this example.

Named Maps Layer Source Object (type: ‘namedmap’)

Used for making public maps with private data. See Named Maps for more information.

Example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
  user_name: 'your_user_name', // Required
  type: 'namedmap', // Required
  named_map: {
    name: 'name_of_map', // Required
    // Optional
    layers: [{
      layer_name: "sublayer0", // Optional
      interactivity: "column1, column2, ..." // Optional
    },
    {
      layer_name: "sublayer1",
      interactivity: "column1, column2, ..."
    },
      ...
    ],
    // Optional
    params: {
      color: "hex_value",
      num: 2
    }
  }
}

Multiple types of layers Source Object

cartodb.createLayer combining multiple types of layers and setting a filter

Example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
cartodb.createLayer(map, {
  user_name: 'examples',
  type: 'cartodb',
  sublayers: [
    {
      type: "http",
      urlTemplate: "http://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}.png",
      subdomains: [ "a", "b", "c" ]
    },
    {
     sql: 'select * from country_boundaries',
     cartocss: '#layer { polygon-fill: #F00; polygon-opacity: 0.3; line-color: #F00; }'
    },
  ],
}, { filter: ['http', 'mapnik'] })