CARTO for deck.gl

Build applications using CARTO & deck.gl advanced framework for data visualization. This is our recommended 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

      <html>
  <head>
    <script src="https://unpkg.com/deck.gl@^8.3.0/dist.min.js"></script>
    <script src="https://unpkg.com/@deck.gl/carto@^8.3.0/dist.min.js"></script>
    
    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
    <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />

  </head>

  <body style="margin: 0; padding: 0">
    <div id="map" style="width: 100vw; height: 100vh;"></div>
  </body>

  <script type="text/javascript">

    deck.carto.setDefaultCredentials({
      username: "public",
      apiKey: "default_public",
    });

    const deckgl = new deck.DeckGL({
      container: "map",
      mapStyle: "https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json",

      initialViewState: {
        latitude: 0,
        longitude: 0,
        zoom: 1,
      },
      controller: {
        scrollZoom: false
      },

      layers: [
        new deck.carto.CartoSQLLayer({
          // For better performance select the_geom_webmercator as the source of the geometry
          // and only retrieve the fields needed  
          data: `SELECT the_geom_webmercator, name FROM populated_places`, 
          getFillColor: [238, 77, 90],
          pointRadiusMinPixels: 2.5
        }),
      ]
    });

  </script>
</html>
Group Created with Sketch. 
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

      <html>
  <head>
    <script src="https://unpkg.com/deck.gl@^8.3.0/dist.min.js"></script>
    <script src="https://unpkg.com/@deck.gl/carto@^8.3.0/dist.min.js"></script>
    
    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
    <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
  </head>

  <body style="margin: 0; padding: 0">
    <div id="map" style="width: 100vw; height: 100vh;"></div>
  </body>

  <script type="text/javascript">
    // Define color breaks
    const COLORS = {
      ONE_MILLION: [207, 89, 126],
      HUNDRED_THOUSAND: [232, 133, 113],
      TEN_THOUSAND: [238, 180, 121],
      THOUSAND: [233, 226, 156],
      HUNDRED: [156, 203, 134],
      TEN: [57, 177, 133],
      OTHER: [0, 147, 146],
    };

    const deckgl = new deck.DeckGL({
      container: "map",
      mapStyle: "https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json",

      initialViewState: {
        latitude: 40.7368521,
        longitude: -73.9936065,
        zoom: 8,
      },
      controller: {
        scrollZoom: false
      },
      layers: [
        new deck.carto.CartoBQTilerLayer({
          data: "cartobq.maps.nyc_taxi_points_demo_id",
          getFillColor: (object) => {
            // Apply color based on an attribute
            if (object.properties.aggregated_total > 1000000) {
              return COLORS.ONE_MILLION;
            } else if (object.properties.aggregated_total > 100000) {
              return COLORS.HUNDRED_THOUSAND;
            } else if (object.properties.aggregated_total > 10000) {
              return COLORS.TEN_THOUSAND;
            } else if (object.properties.aggregated_total > 1000) {
              return COLORS.THOUSAND;
            } else if (object.properties.aggregated_total > 100) {
              return COLORS.HUNDRED;
            } else if (object.properties.aggregated_total > 10) {
              return COLORS.TEN;
            } else {
              return COLORS.OTHER;
            }
          },
          pointRadiusMinPixels: 2,
          stroked: false,
        }),
      ],
    });
  </script>
</html>
Group Created with Sketch. 
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

      <html>
  <head>
    <script src="https://unpkg.com/deck.gl@^8.3.0/dist.min.js"></script>
    <script src="https://unpkg.com/@deck.gl/carto@^8.3.0/dist.min.js"></script>
    
    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
    <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
  </head>

  <body style="margin: 0; padding: 0">
    <div id="map" style="width: 100vw; height: 100vh;"></div>
  </body>

  <script type="text/javascript">
    const cartoBasemaps = {
      VOYAGER: "https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json",
      POSITRON: "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json",
      DARK_MATTER: "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json",
    };

    deck.carto.setDefaultCredentials({
      username: "public",
      apiKey: "default_public",
    });

    const deckgl = new deck.DeckGL({
      container: "map",
      // CARTO's provides three basemaps voyager, positron, dark-matter
      mapStyle: cartoBasemaps.VOYAGER,

      initialViewState: {
        latitude: 0,
        longitude: 0,
        zoom: 1,
      },
      controller: {
        scrollZoom: false
      },

      layers: [
        new deck.carto.CartoSQLLayer({
          // For better performance select the_geom_webmercator as the source of the geometry
          // and only retrieve the fields needed  
          data: `SELECT the_geom_webmercator, name FROM populated_places`, 
          getFillColor: [238, 77, 90],
          pointRadiusMinPixels: 2.5
        }),
      ],
    });
  </script>
</html>
Group Created with Sketch. 
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

      <html>
  <head>
    <script src="https://unpkg.com/deck.gl@^8.3.0/dist.min.js"></script>
    <script src="https://unpkg.com/@deck.gl/carto@^8.3.0/dist.min.js"></script>
    
    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
    <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
  </head>

  <body style="margin: 0; padding: 0">
    <div id="map" style="width: 100vw; height: 100vh;"></div>
  </body>

  <script type="text/javascript">
    deck.carto.setDefaultCredentials({
      username: "public",
      apiKey: "default_public",
    });

    const deckgl = new deck.DeckGL({
      container: "map",
      mapStyle: "https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json",

      initialViewState: {
        latitude: 0,
        longitude: 0,
        zoom: 1,
      },
      controller: {
        scrollZoom: false
      },

      layers: [
        new deck.carto.CartoSQLLayer({
          data: `SELECT the_geom_webmercator, country_name FROM world_population_2015`,
          getFillColor: [238, 77, 90],
          pointRadiusMinPixels: 4,
          pickable: true,
        }),
      ],
      getTooltip: ({ object }) =>
        object && {
          html: `<strong>Country</strong>: ${object.properties.country_name}`
        },
    });
  </script>
</html>
Group Created with Sketch. 
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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145

      <html>
  <head>
    <!-- FONT -->
    <link
      href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap"
      rel="stylesheet"
    />

    <script src="https://unpkg.com/deck.gl@^8.3.0/dist.min.js"></script>
    <script src="https://unpkg.com/@deck.gl/carto@^8.3.0/dist.min.js"></script>
    
    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
    <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />

    <style type="text/css">
      .layer-selector {
        position: absolute;
        z-index: 1;
        top: 0;
        right: 0;
        background-color: #fff;
        width: 240px;
        margin: 24px;
        padding: 10 24px;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
        border-radius: 4px;
      }
      .layer-selector h3 {
        font-size: 16px;
        margin: 8px 0;
      }
      .layer-selector .layout {
        display: table;
        width: 100%;
        margin-top: 8px;
      }
      .layer-selector .layout > * {
        display: table-cell;
        height: 12px;
      }
      .right-align {
        text-align: right;
      }
    </style>
  </head>

  <body style="margin: 0; padding: 0; font-family: 'Open Sans, Helvetica, sans-serif';">
    <div id="map" style="width: 100vw; height: 100vh;"></div>
    <div class="layer-selector">
      <h3>Temperature</h3>
      <div class="layout">
        <div class="legend" style="background: rgb(247, 254, 174)"></div>
        <div class="legend" style="background: rgb(205, 238, 168)"></div>
        <div class="legend" style="background: rgb(164, 221, 164)"></div>
        <div class="legend" style="background: rgb(124, 203, 162)"></div>
        <div class="legend" style="background: rgb(90, 184, 161)"></div>
        <div class="legend" style="background: rgb(56, 164, 158)"></div>
        <div class="legend" style="background: rgb(8, 144, 153)"></div>
        <div class="legend" style="background: rgb(4, 123, 144)"></div>
        <div class="legend" style="background: rgb(3, 102, 132)"></div>
        <div class="legend" style="background: rgb(4, 82, 117)"></div>
      </div>
      <p class="layout">
        <span>Lower</span>
        <span class="right-align">Higher</span>
      </p>
    </div>
  </body>

  <script type="text/javascript">
    deck.carto.setDefaultCredentials({
      username: "public",
      apiKey: "default_public",
    });

    // Color breaks
    const POINT_COLORS = {
      COLOR_1: [4, 82, 117],
      COLOR_2: [3, 102, 132],
      COLOR_3: [4, 123, 144],
      COLOR_4: [8, 144, 153],
      COLOR_5: [56, 164, 158],
      COLOR_6: [90, 184, 161],
      COLOR_7: [124, 203, 162],
      COLOR_8: [164, 221, 164],
      COLOR_9: [205, 238, 168],
      OTHER: [247, 254, 174],
    };

    const deckgl = new deck.DeckGL({
      container: "map",
      mapStyle: "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json",

      initialViewState: {
        latitude: 31.80289258670676,
        longitude: -103.0078125,
        zoom: 3,
      },
      controller: true,

      layers: [
        new deck.carto.CartoSQLLayer({
          id: "temps",
          data: `SELECT the_geom_webmercator, value FROM temps`,
          getFillColor: (object) => {
            if (object.properties.value > 100) {
              return POINT_COLORS.COLOR_1;
            } else if (object.properties.value > 96) {
              return POINT_COLORS.COLOR_2;
            } else if (object.properties.value > 93) {
              return POINT_COLORS.COLOR_3;
            } else if (object.properties.value > 90) {
              return POINT_COLORS.COLOR_4;
            } else if (object.properties.value > 86) {
              return POINT_COLORS.COLOR_5;
            } else if (object.properties.value > 83) {
              return POINT_COLORS.COLOR_6;
            } else if (object.properties.value > 80) {
              return POINT_COLORS.COLOR_7;
            } else if (object.properties.value > 76) {
              return POINT_COLORS.COLOR_8;
            } else if (object.properties.value > 73) {
              return POINT_COLORS.COLOR_9;
            } else {
              return POINT_COLORS.OTHER;
            }
          },
          pointRadiusMinPixels: 2,
          pickable: true,
        })
      ],

      getTooltip: ({ object }) => {
        if (!object) return false;
        return {
          html: `${object.properties.value.toFixed(2)}ºF`
        }
      }

    });

  </script>
</html>
Group Created with Sketch. 
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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133

      <html>
  <head>
    <!-- FONT -->
    <link
      href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap"
      rel="stylesheet"
    />

    <script src="https://unpkg.com/deck.gl@^8.3.0/dist.min.js"></script>
    <script src="https://unpkg.com/@deck.gl/carto@^8.3.0/dist.min.js"></script>
    
    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
    <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />

    <style type="text/css">
      .layer-selector {
        position: absolute;
        z-index: 1;
        top: 0;
        right: 0;
        background-color: #fff;
        width: 240px;
        margin: 24px;
        padding: 10 24px;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
        border-radius: 4px;
      }
      .layer-selector h3 {
        font-size: 16px;
        margin: 8px 0;
      }
      .layer-selector .layout {
        display: table;
        width: 100%;
        margin-top: 8px;
      }
      .layer-selector .layout > * {
        display: table-cell;
        height: 12px;
      }
      .right-align {
        text-align: right;
      }
    </style>
  </head>

  <body style="margin: 0; padding: 0; font-family: 'Open Sans, Helvetica, sans-serif';">
    <div id="map" style="width: 100vw; height: 100vh;"></div>
    <div class="layer-selector">
      <h3>Higher education by county</h3>
      <div class="layout">
        <div class="legend" style="background: rgb(254, 246, 181)"></div>
        <div class="legend" style="background: rgb(255, 221, 154)"></div>
        <div class="legend" style="background: rgb(255, 194, 133)"></div>
        <div class="legend" style="background: rgb(255, 166, 121)"></div>
        <div class="legend" style="background: rgb(250, 138, 118)"></div>
        <div class="legend" style="background: rgb(241, 109, 122)"></div>
        <div class="legend" style="background: rgb(225, 83, 131)"></div>
      </div>
      <p class="layout">
        <span>Lower</span>
        <span class="right-align">Higher</span>
      </p>
    </div>
  </body>

  <script type="text/javascript">
    deck.carto.setDefaultCredentials({
      username: "public",
      apiKey: "default_public",
    });

    // Color breaks
    const POLYGON_COLORS = {
      COLOR_1: [225, 83, 131],
      COLOR_2: [241, 109, 122],
      COLOR_3: [250, 138, 118],
      COLOR_4: [255, 166, 121],
      COLOR_5: [255, 194, 133],
      COLOR_6: [255, 221, 154],
      OTHER: [254, 246, 181],
    };

    const deckgl = new deck.DeckGL({
      container: "map",
      mapStyle: "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json",

      initialViewState: {
        latitude: 31.80289258670676,
        longitude: -103.0078125,
        zoom: 3,
      },
      controller: true,

      layers: [
        new deck.carto.CartoSQLLayer({
          id: "higher_edu_by_county",
          data: `SELECT the_geom_webmercator, pct_higher_ed FROM higher_edu_by_county`,
          getFillColor: (object) => {
            if (object.properties.pct_higher_ed > 70) {
              return POLYGON_COLORS.COLOR_1;
            } else if (object.properties.pct_higher_ed > 60) {
              return POLYGON_COLORS.COLOR_2;
            } else if (object.properties.pct_higher_ed > 50) {
              return POLYGON_COLORS.COLOR_3;
            } else if (object.properties.pct_higher_ed > 40) {
              return POLYGON_COLORS.COLOR_4;
            } else if (object.properties.pct_higher_ed > 30) {
              return POLYGON_COLORS.COLOR_5;
            } else if (object.properties.pct_higher_ed > 20) {
              return POLYGON_COLORS.COLOR_6;
            } else {
              return POLYGON_COLORS.OTHER;
            }
          },
          getLineColor: [0, 0, 0, 100],
          lineWidthMinPixels: 0.5,
          pickable: true,
        }),
      ],

      getTooltip: ({ object }) => {
        if (!object) return false;
        return {
          html: `${object.properties.pct_higher_ed.toFixed(2)}%`,
        };
      },
    });

  </script>
</html>
Group Created with Sketch. 
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

      <html>
  <head>
    <script src="https://unpkg.com/deck.gl@^8.3.0/dist.min.js"></script>
    <script src="https://unpkg.com/@deck.gl/carto@^8.3.0/dist.min.js"></script>
    
    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
    <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
  </head>

  <body style="margin: 0; padding: 0">
    <div id="map" style="width: 100vw; height: 100vh;"></div>
  </body>

  <script type="text/javascript">

    const ICON_MAPPING = {
      marker: {x: 0, y: 0, width: 24, height: 24, mask: true}
      // ... you can set different mappings and use them by key at getIcon function
    };

    deck.carto.setDefaultCredentials({
      username: 'public',
      apiKey: 'default_public'
    });

    const deckgl = new deck.DeckGL({
      container: 'map',
      mapStyle: 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json',

      initialViewState: {
        latitude: 0,
        longitude: 0,
        zoom: 1
      },
      controller: {
        scrollZoom: false
      },

      layers: [
        new deck.carto.CartoSQLLayer({
          data: `SELECT the_geom_webmercator, country_name FROM world_population_2015`,

          /* Substitute default GeoJSONLayer with an IconLayer, but you can use different layers here */
          renderSubLayers: props => new deck.IconLayer({...props}),

          /* Set IconLayer related props */
          pickable: true,
          getSize: d => 24,
          getColor: d => [255, 140, 0], // Remember to set mask to true in your icon mapping to enable colouring
          getIcon: d => 'marker',
          iconMapping: ICON_MAPPING,
          
          // You can use different image formats including PNG or SVG
          iconAtlas: 'https://s3.amazonaws.com/com.cartodb.users-assets.production/maki-icons/marker-stroked-24.svg?req=markup',

          // Get coordinates from GeoJSON geometry
          getPosition: d => d.geometry.coordinates
        })
      ]
    });

  </script>
</html>
Group Created with Sketch.