Web SDK

Web SDK is a JavaScript library to create custom applications on top of CARTO, using deck.gl

What is Web SDK?

Web SDK is a JavaScript library that interacts with different CARTO APIs to build custom apps leveraging vector rendering, on top of deck.gl.

To understand the fundamentals of Web SDK, read the guides. To view the source code, browse the open-source repository in GitHub and contribute. Otherwise, view examples, read the full reference API, or find different support options.

Guides

Quick reference guides for learning how to use Web SDK features.

Examples

Play with real examples and learn by doing.

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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Add layer</title>

    <!-- mapbox-gl css ia required by Mapbox GL JS library (which provides the basemaps tech) -->
    <link
      rel="stylesheet"
      type="text/css"
      href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css"
    />

    <!-- airship provides CARTO styles used, for example, in the panel -->
    <link
      rel="stylesheet"
      type="text/css"
      href="https://libs.cartocdn.com/airship-style/v2.4/airship.min.css"
    />

    <!-- css styles to get a 'full-screen' map -->
    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        width: 100vw;
        height: 100vh;
      }

      strong {
        color: 
      }
    </style>
  </head>

  <!-- 'as- classes come from Airship, and they provide help for the layout and basic styles -->
  <body class="as-app-body as-app">
    <div class="as-content">
      <main class="as-main">
        <div class="as-map-area">
          <!-- map component will be instantiated here -->
          <div id="map"></div>

          <!-- panel with title and description -->
          <div class="as-panel as-panel--top as-panel--right as-bg--ui-01">
            <div class="as-panel__element as-p--16 as-body">
              <h1 class="as-title">Add layer</h1>
              <h4 class="as-subheader as-mb--12">
                Add one CARTO layer to your map with <em>carto.viz.createMap</em> and <em>carto.viz.Layer</em>
              </h4>
          </div>
        </div>
      </main>
    </div>

    <!-- mapbox-gl js, the corresponding JavaScript for the Mapbox GL library -->
    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>

    <!-- deck.gl library -->
    <script src="https://unpkg.com/deck.gl@8.2.0/dist.min.js"></script>

    <!-- CARTO Web SDK library -->
    <script src=https://libs.cartocdn.com/web-sdk/v1.0.0-alpha.2/index.min.js></script>

    <script>
      function initialize() {
        /* 
          Set default credentials to access datasets in the CARTO platform, in this case from the 'public' user.
          You can use your own user account here (there's a free plan available at https://carto.com/signup/)
        */
        carto.auth.setDefaultCredentials({ username: 'public' });

        /* 
          If apiKey is the default for public, it can be ommitted, so the previous is equivalent to:
          `carto.auth.setDefaultCredentials({ username: 'public', apiKey: 'default_public' });`
        */

        /*
          This creates a simple world map, but it can be further configured (zoom, center, basemap...). Check the reference
          and other examples.
        */
        const deckMap = carto.viz.createMap();

        /*
          Create a layer with the whole dataset and add it to the map.
          You can browse available datasets for the account in https://public.carto.com/datasets/
        */
        const countriesLayer = new carto.viz.Layer('ne_50m_admin_0_countries');
        countriesLayer.addTo(deckMap);
      }

      initialize();
    </script>
  </body>
</html>

Support

Get help or learn about known issues.