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

Easy implementation

An easy example using the library

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

      <!DOCTYPE html>
<html>
  <head>
    <title>Easy example | CartoDB.js</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <link rel="shortcut icon" href="https://carto.com/favicon.ico" />
    <style>
      html, body, #map {
        height: 100%;
        padding: 0;
        margin: 0;
      }
    </style>

    <link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
  </head>
  <body>
    <div id="map"></div>

    <!-- include cartodb.js library -->
    <script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>

    <script>
      function main() {
        cartodb.createVis('map', 'https://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json', {
            shareable: true,
            title: true,
            description: true,
            search: true,
            tiles_loader: true,
            center_lat: 0,
            center_lon: 0,
            zoom: 2
        })
        .done(function(vis, layers) {
          // layer 0 is the base layer, layer 1 is cartodb layer
          // setInteraction is disabled by default
          layers[1].setInteraction(true);
          layers[1].on('featureOver', function(e, latlng, pos, data) {
            cartodb.log.log(e, latlng, pos, data);
          });

          // you can get the native map to work with it
          var map = vis.getNativeMap();

          // now, perform any operations you need
          // map.setZoom(3);
          // map.panTo([50.5, 30.5]);
        })
        .error(function(err) {
          console.log(err);
        });
      }

      window.onload = main;
    </script>
  </body>
</html>
Group Created with Sketch.

Leaflet integration

An example of leaflet integration

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

      <!DOCTYPE html>
<html>
  <head>
    <title>Leaflet example | CartoDB.js</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
    <style>
      html, body, #map {
        height: 100%;
        padding: 0;
        margin: 0;
      }
    </style>
    <link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
  </head>
  <body>
    <div id="map"></div>

    <!-- include cartodb.js library -->
    <script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>

    <script>
      function main() {
        var map = new L.Map('map', {
          zoomControl: false,
          center: [43, 0],
          zoom: 3
        });

        L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
          attribution: 'Stamen'
        }).addTo(map);

        cartodb.createLayer(map, 'http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json')
            .addTo(map)
         .on('done', function(layer) {

          layer.setInteraction(true);

          layer.on('featureOver', function(e, latlng, pos, data) {
            cartodb.log.log(e, latlng, pos, data);
          });

          layer.on('error', function(err) {
            cartodb.log.log('error: ' + err);
          });
        }).on('error', function() {
          cartodb.log.log("some error occurred");
        });
      }

      // you could use $(window).load(main);
      window.onload = main;
    </script>
  </body>
</html>
Group Created with Sketch.

Infowindow

Customizing infowindow data

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

      <!DOCTYPE html>
<html>
  <head>
    <title>Custom infowindow example | CartoDB.js</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <link rel="shortcut icon" href="https://carto.com/favicon.ico" />
    <style>
      html, body, #map {
        height: 100%;
        padding: 0;
        margin: 0;
      }
    </style>

    <link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
  </head>
  <body>
    <div id="map"></div>

    <script type="infowindow/html" id="infowindow_template">
      <span> custom </span>
      <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-content">
             <img style="width: 100%" src="http://rambo.webcindario.com/images/18447755.jpg">
             <!-- content.data contains the field info -->
             <h4></h4>
           </div>
         </div>
         <div class="cartodb-popup-tip-container"></div>
      </div>
    </script>

    <script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>

    <script>
      function main() {
        var map = L.map('map', {
          zoomControl: false,
          center: [0, 0],
          zoom: 3
        });

        // add a nice baselayer from Stamen
        L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.png', {
          attribution: 'Stamen'
        }).addTo(map);

        cartodb.createLayer(map, 'https://documentation.carto.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json')
         .addTo(map)
         .on('done', function(layer) {
           // get sublayer 0 and set the infowindow template
           var sublayer = layer.getSubLayer(0);

           sublayer.infowindow.set('template', $('#infowindow_template').html());
          }).on('error', function() {
            console.log("some error occurred");
          });
      }

      window.onload = main;
    </script>
  </body>
</html>
Group Created with Sketch.

Layer selector

An example using a layer selector

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112

      <!DOCTYPE html>
<html>
  <head>
    <title>Layer selector example | CartoDB.js</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <link rel="shortcut icon" href="https://carto.com/favicon.ico" />
    <style>
      html, body, #map {
        height: 100%;
        padding: 0;
        margin: 0;
      }

      #layer_selector {
        position: absolute;
        top: 20px;
        right: 20px;
        padding: 0;
      }

      #layer_selector ul {
        padding: 0; margin: 0;
        list-style-type: none;
      }

      #layer_selector li {
        border-bottom: 1px solid #999;
        padding: 15px 30px;
        font-family: "Helvetica", Arial;
        font-size: 13px;
        color: #444;
        cursor: auto;
      }

      #layer_selector li:hover {
        background-color: #F0F0F0;
        cursor: pointer;
      }

      #layer_selector li.selected {
        background-color: #EEE;
      }
    </style>

    <link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
  </head>
  <body>
    <div id="map"></div>
    <div id="layer_selector" class="cartodb-infobox">
      <ul>
        <li data="all" class="selected">All countries</li>
        <li data="1000">area >1000 km<sup>2</sup></li>
        <li data="6000">area >6000 km<sup>2</sup></li>
        <li data="10000">area >10000 km<sup>2</sup></li>
        <li data="50000">area >50000 km<sup>2</sup></li>
      </ul>
    </div>

    <!-- include cartodb.js library -->
    <script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>

    <script>
      // create layer selector
      function createSelector(layer) {
        var sql = new cartodb.SQL({ user: 'documentation' });

        var $options = $('#layer_selector li');
        $options.click(function(e) {
          // get the area of the selected layer
          var $li = $(e.target);
          var area = $li.attr('data');

          // deselect all and select the clicked one
          $options.removeClass('selected');
          $li.addClass('selected');

          // create query based on data from the layer
          var query = "select * from european_countries_e";

          if(area !== 'all') {
            query = "select * from european_countries_e where area > " + area;
          }

          // change the query in the layer to update the map
          layer.setSQL(query);
        });
      }

      function main() {
        cartodb.createVis('map', 'https://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json', {
          tiles_loader: true,
          center_lat: 50,
          center_lon: 20,
          zoom: 3
        })
        .done(function(vis, layers) {
          // layer 0 is the base layer, layer 1 is cartodb layer
          var subLayer = layers[1].getSubLayer(0);
          createSelector(subLayer);
        })
        .error(function(err) {
          console.log(err);
        });
      }

      window.onload = main;
    </script>
  </body>
</html>
Group Created with Sketch.