CartoLayer Pharmacies

by felixp

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>CartoLayer Pharmacies</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>
    <!-- jsFiddle will insert css and js -->
  </head>

  <body>
    <div id="map"></div>
  </body>

</html>

CSS

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

JavaScript

// CARTO 3
deck.carto.setDefaultCredentials({
  accessToken: 'eyJhbGciOiJIUzI1NiJ9.eyJhIjoiYWNfN3hoZnd5bWwiLCJqdGkiOiI5MDBmMTg0OSJ9.vOvEQmZNxMMuifpG5GyZRrfZnyqbQYGCc7ZP0CLeSpk'
});
const deckgl = new deck.DeckGL({
  container: 'map',
  mapStyle: deck.carto.BASEMAP.VOYAGER,

  initialViewState: {
    latitude: 40.730610,
    longitude: -73.935242,
    zoom: 7,
    pitch: 60
  },
  controller: true,

  layers: [
    new deck.carto.CartoLayer({
      // Data
      id: 'pharmacies',
      connection: 'alasarr',
      type: deck.carto.MAP_TYPES.TABLE,
      data: 'cartodb-on-gcp-backend-team.deckgl_summit.pharmacies_aoi_h3_overlap',
      geoColumn: 'h3',
      aggregationExp: 'SUM(population) as total, SUM(male_population) as male',

      // Styling
      getFillColor: d => {
        const {
          male,
          total
        } = d.properties;
        if (total === 0) return [0, 0, 0, 40];
        return male < 0.5 * total ? [238, 77, 90] : [77, 238, 20]
      },
      getElevation: d => d.properties.total
    })
  ]
});