ramiroaznar · December 21, 2017 09:17
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>Hexbin layer | CARTO.js 4</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
    <link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet">
    <!-- Include CARTO.js -->
    <script src="https://cartodb-libs.global.ssl.fastly.net/carto.js/v4.0.0-beta.4/carto.min.js"></script>
    <style>
      body { margin: 0; padding: 0; }
      #map { position: absolute; height: 100%; width: 100%; }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      const map = L.map('map').setView([41, -1], 6);

      L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', {
        maxZoom: 18
      }).addTo(map);

      // define client
      const client = new carto.Client({
        apiKey: 'YOUR_API_KEY',
        username: 'ramirocartodb'
      });

      // define hexbins using bounds
      const hexbins = new carto.source.SQL(`
          WITH grid as (
            SELECT
              row_number() over () as cartodb_id,
              CDB_HexagonGrid(
                ST_Buffer(the_geom_webmercator, 1000000),
                100000
              ) AS the_geom_webmercator
            FROM
              world_borders
            WHERE
              name ILIKE 'spain'),
          cities as (
            SELECT
              *
            FROM
             populated_places
            WHERE
              adm0name = 'Spain'),
          spain as (
            SELECT
              grid.the_geom_webmercator,
              grid.cartodb_id
            FROM
              grid, world_borders a
            WHERE
              ST_Intersects(grid.the_geom_webmercator, a.the_geom_webmercator)
            AND 
              name = 'Spain')
          SELECT
            spain.the_geom_webmercator,
            ST_Transform(spain.the_geom_webmercator, 4326) as the_geom,
            spain.cartodb_id,
            count(cities.*) as density
          FROM
            spain, cities
          WHERE
            ST_Intersects(spain.the_geom_webmercator, cities.the_geom_webmercator)
          GROUP BY 1,2,3
      `);

      console.log("hexbins = " + hexbins);

      // define hexbin style
      const hexbinStyle = new carto.style.CartoCSS(`
        #layer {
            polygon-fill: ramp([density], (#245668, #04817E, #39AB7E, #8BD16D, #EDEF5D), quantiles);
            polygon-opacity: 0.7;
            ::outline {
                line-width: 1;
                line-color: ramp([density], (#245668, #04817E, #39AB7E, #8BD16D, #EDEF5D), quantiles);
                line-opacity: 0.9;
            }
        }
      `);
      
      // define layer with hexbin query & style
      const layer = new carto.layer.Layer(hexbins, hexbinStyle);

      // add layer to client
      client.addLayer(layer);

      // add client to map
      client.getLeafletLayer().addTo(map);

    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Hexbin layer \| CARTO.js 4</title>
	<meta name="viewport" content="initial-scale=1.0">
	<meta charset="utf-8">
	<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
	<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet">
	<!-- Include CARTO.js -->
	<script src="https://cartodb-libs.global.ssl.fastly.net/carto.js/v4.0.0-beta.4/carto.min.js"></script>
	<style>
	body { margin: 0; padding: 0; }
	#map { position: absolute; height: 100%; width: 100%; }
	</style>
	</head>
	<body>
	<div id="map"></div>
	<script>
	const map = L.map('map').setView([41, -1], 6);

	L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', {
	maxZoom: 18
	}).addTo(map);

	// define client
	const client = new carto.Client({
	apiKey: 'YOUR_API_KEY',
	username: 'ramirocartodb'
	});

	// define hexbins using bounds
	const hexbins = new carto.source.SQL(`
	WITH grid as (
	SELECT
	row_number() over () as cartodb_id,
	CDB_HexagonGrid(
	ST_Buffer(the_geom_webmercator, 1000000),
	100000
	) AS the_geom_webmercator
	FROM
	world_borders
	WHERE
	name ILIKE 'spain'),
	cities as (
	SELECT
	*
	FROM
	populated_places
	WHERE
	adm0name = 'Spain'),
	spain as (
	SELECT
	grid.the_geom_webmercator,
	grid.cartodb_id
	FROM
	grid, world_borders a
	WHERE
	ST_Intersects(grid.the_geom_webmercator, a.the_geom_webmercator)
	AND
	name = 'Spain')
	SELECT
	spain.the_geom_webmercator,
	ST_Transform(spain.the_geom_webmercator, 4326) as the_geom,
	spain.cartodb_id,
	count(cities.*) as density
	FROM
	spain, cities
	WHERE
	ST_Intersects(spain.the_geom_webmercator, cities.the_geom_webmercator)
	GROUP BY 1,2,3
	`);

	console.log("hexbins = " + hexbins);

	// define hexbin style
	const hexbinStyle = new carto.style.CartoCSS(`
	#layer {
	polygon-fill: ramp([density], (#245668, #04817E, #39AB7E, #8BD16D, #EDEF5D), quantiles);
	polygon-opacity: 0.7;
	::outline {
	line-width: 1;
	line-color: ramp([density], (#245668, #04817E, #39AB7E, #8BD16D, #EDEF5D), quantiles);
	line-opacity: 0.9;
	}
	}
	`);

	// define layer with hexbin query & style
	const layer = new carto.layer.Layer(hexbins, hexbinStyle);

	// add layer to client
	client.addLayer(layer);

	// add client to map
	client.getLeafletLayer().addTo(map);

	</script>
	</body>
	</html>