Color continuous Style

This example shows how to apply different colors to point features depending on attribute values.

  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
<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" />

    <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: 8px 0;
      }
      .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: linear-gradient(to right, rgb(247, 254, 174), 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',
    });

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

      initialViewState: {
        latitude: 34,
        longitude: -98,
        zoom: 3,
      },
      controller: true,

      layers: [
        new deck.carto.CartoSQLLayer({
          id: 'temps',
          data: 'SELECT the_geom_webmercator, value FROM temps',
          getFillColor: deck.carto.colorContinuous({
            attr: 'value',
            domain: [70, 75, 80, 85, 90, 95, 100],
            colors: 'BluYl'
          }),
          pointRadiusMinPixels: 2,
          pickable: true,
        })
      ],

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

    });

  </script>
</html>