CARTO.js

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

This library is still under support but it will not be further developed. We don’t recommend starting new projects with it as it will eventually become deprecated. Instead, learn more about our current CARTO for deck.gl library here

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'] })