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

      <html>
  <head>
    <script src="https://unpkg.com/deck.gl@^8.4.0/dist.min.js"></script>
    <script src="https://unpkg.com/@deck.gl/carto@^8.4.0/dist.min.js"></script>
    
    <script src="https://libs.cartocdn.com/mapbox-gl/v1.13.0/mapbox-gl.js"></script>
    <link href="https://libs.cartocdn.com/mapbox-gl/v1.13.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: true,

      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

      <html>
  <head>
    <script src="https://unpkg.com/deck.gl@8.4.2/dist.min.js"></script>
    <script src="https://unpkg.com/@deck.gl/carto@8.4.2/dist.min.js"></script>
    
    <script src="https://libs.cartocdn.com/mapbox-gl/v1.13.0/mapbox-gl.js"></script>
    <link href="https://libs.cartocdn.com/mapbox-gl/v1.13.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 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: true,
      layers: [
        new deck.carto.CartoBQTilerLayer({
          data: 'cartobq.maps.nyc_taxi_points_demo_id',
          getFillColor: deck.carto.colorBins({
            attr: 'aggregated_total',
            domain: [10, 1e2, 1e3, 1e4, 1e5, 1e6],
            colors: 'Temps'
          }),
          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

      <html>
  <head>
    <script src="https://unpkg.com/deck.gl@^8.4.0/dist.min.js"></script>
    <script src="https://unpkg.com/@deck.gl/carto@^8.4.0/dist.min.js"></script>
    
    <script src="https://libs.cartocdn.com/mapbox-gl/v1.13.0/mapbox-gl.js"></script>
    <link href="https://libs.cartocdn.com/mapbox-gl/v1.13.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: true,

      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

      <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.4.0/dist.min.js"></script>
    <script src="https://unpkg.com/@deck.gl/carto@^8.4.0/dist.min.js"></script>
    
    <script src="https://libs.cartocdn.com/mapbox-gl/v1.13.0/mapbox-gl.js"></script>
    <link href="https://libs.cartocdn.com/mapbox-gl/v1.13.0/mapbox-gl.css" rel="stylesheet" />
  </head>

  <body style="margin: 0; padding: 0; font-family: 'Open Sans', sans-serif">
    <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: true,

      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}<br/>
            <strong>Longitude</strong>: ${object.geometry.coordinates[0].toFixed(6)}<br/>
            <strong>Latitude</strong>: ${object.geometry.coordinates[1].toFixed(6)}
          `
        },
    });
  </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

      <html>
  <head>
    <script src="https://unpkg.com/deck.gl@^8.4.0/dist.min.js"></script>
    <script src="https://unpkg.com/@deck.gl/carto@^8.4.0/dist.min.js"></script>
    
    <script src="https://libs.cartocdn.com/mapbox-gl/v1.13.0/mapbox-gl.js"></script>
    <link href="https://libs.cartocdn.com/mapbox-gl/v1.13.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: true,

      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.