CartoLayer parameterized

by felixp

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>CartoLayer parametrized</title>
    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.0/mapbox-gl.js"></script>
    <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.0/mapbox-gl.css" rel="stylesheet" />
    <script src="https://unpkg.com/h3-js@^3.0.0"></script>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script src="https://unpkg.com/[email protected]/dist.min.js"></script>
    <script src="https://unpkg.com/@deck.gl/[email protected]/dist.min.js"></script>
    <script src="https://unpkg.com/range-slider-input@2"></script>
    <!-- jsFiddle will insert css and js -->
  </head>

  <body>
    <div id="range-slider"></div>
    <div id="map"></div>
  </body>

</html>

CSS

body {
  margin: 0;
  padding: 0; 
}
#map{
  width: 100vw;
  height: 100vh;
}

#range-slider {
  width: calc(100vw - 50px);
  margin: 30px 25px;
  position: absolute;
  bottom: 0px;
}

JavaScript

deck.carto.setDefaultCredentials({
  accessToken: 'eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6ImRVNGNZTHAwaThjYnVMNkd0LTE0diJ9.eyJodHRwOi8vYXBwLmNhcnRvLmNvbS9lbWFpbCI6ImZwYWxtZXJAY2FydG9kYi5jb20iLCJodHRwOi8vYXBwLmNhcnRvLmNvbS9hY2NvdW50X2lkIjoiYWNfN3hoZnd5bWwiLCJpc3MiOiJodHRwczovL2F1dGguY2FydG8uY29tLyIsInN1YiI6Imdvb2dsZS1vYXV0aDJ8MTA3OTY5NjU1OTI5NjExMjIxNDg2IiwiYXVkIjoiY2FydG8tY2xvdWQtbmF0aXZlLWFwaSIsImlhdCI6MTY2MzkxODYyNiwiZXhwIjoxNjY0MDA1MDI2LCJhenAiOiJBdHh2SERldVhsUjhYUGZGMm5qMlV2MkkyOXB2bUN4dSIsInBlcm1pc3Npb25zIjpbInJlYWQ6YWNjb3VudCIsInJlYWQ6YXBwcyIsInJlYWQ6Y29ubmVjdGlvbnMiLCJyZWFkOmN1cnJlbnRfdXNlciIsInJlYWQ6aW1wb3J0cyIsInJlYWQ6bGlzdGVkX2FwcHMiLCJyZWFkOm1hcHMiLCJyZWFkOnRpbGVzZXRzIiwicmVhZDp0b2tlbnMiLCJ1cGRhdGU6Y3VycmVudF91c2VyIiwid3JpdGU6YXBwcyIsIndyaXRlOmNvbm5lY3Rpb25zIiwid3JpdGU6aW1wb3J0cyIsIndyaXRlOm1hcHMiLCJ3cml0ZTp0b2tlbnMiXX0.OuYUQmv5BpqPqN18hbPDcUGYZGESrq7N6_vADlcSvm4wIpxmfro9kxNOoua-pvPNzp5nnTFG76Mf6DJ02RYLuNTnAbaqDzUgd4r2O6vDSflJRHHCQPL8q5K8pKxhWNrLUE-BSUJc4OACSOPiH0qgEkCfvnij8Rh09V-WfvVEZEvqRx4QS79N7mBqx7vCkkVYv2Um9ovHqF8gxLIeIDhAPrMREGjWQQAJoKgjO4dsMeNt-tr3YU3Ko3B7yZLRHWZdh0s9nrYvvT7wtYISwRszdhE2XziNfYzQiDybc2xeWvHUQk94ziqt3Crlxwkv4GuuiXMFQvJPn-Zszdp1eI7ynA'
});

const deckgl = new deck.DeckGL({
  container: 'map',
  mapStyle: deck.carto.BASEMAP.DARK_MATTER,
  initialViewState: {latitude: 37.75, longitude: -122.41, zoom: 10, pitch: 20},
  controller: true
});

const monthRange = [1, 12];
function update(range) {
  deckgl.setProps({
    layers: [
      new deck.carto.CartoLayer({
        id: 'trees',
        connection: 'alasarr',
        type: deck.carto.MAP_TYPES.QUERY,

				// Select month range in 2012 from full dataset
        data: "select * from carto-demo-data.demo_tables.san_francisco_street_trees where plant_date > ? and plant_date < ? limit 1000",
        queryParameters: range.map(m => `2012-${m}-01`),

        // Styling, color January as red, December as green
        getFillColor: d => {
          const month =...