VictorVelarde/index.html

## index.html
<html>

<head>
  <title>CARTO VL & deck.gl</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

  <script src="https://unpkg.com/deck.gl@latest/deckgl.min.js"></script>

  <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js"></script>
  <link rel="stylesheet" type="text/css" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css">

  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script src="https://libs.cartocdn.com/carto-vl/v1.2.4/carto-vl.min.js"></script>

  <style type="text/css">
    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }

    body {
      font-family: Helvetica, Arial, sans-serif;
      width: 100vw;
      height: 100vh;
      margin: 0;
      padding: 0
    }

    #control-panel {
      position: absolute;
      background: #fff;
      top: 0;
      left: 0;
      margin: 12px;
      padding: 20px;
      font-size: 12px;
      line-height: 1.5;
      z-index: 1;
    }

    label {
      display: inline-block;
      width: 140px;
    }
  </style>
</head>

<body>
  <div id="control-panel">
    <div>
      <label>Radius</label>
      <input id="radius" type="range" min="500" max="10000" step="500" value="1000"></input>
      <span id="radius-value"></span>
    </div>
    <div>
      <label>Coverage</label>
      <input id="coverage" type="range" min="0" max="1" step="0.1" value="1"></input>
      <span id="coverage-value"></span>
    </div>
    <div>
      <label>Upper Percentile</label>
      <input id="upperPercentile" type="range" min="90" max="100" step="1" value="100"></input>
      <span id="upperPercentile-value"></span>
    </div>
  </div>
</body>
<script type="text/javascript">

  // Create the Mapbox map
  var map = new mapboxgl.Map({
    container: document.body,
    style: carto.basemaps.darkmatter,
    center: [-1.4157, 52.2324],
    zoom: 6,
    pitch: 40.5
  });

  map.on('load', () => {
    addDeckGLLayer();

    addVLLayer();
  });

  function addVLLayer() {
    carto.setDefaultAuth({
      username: 'cartovl',
      apiKey: 'default_public'
    });

    const source = new carto.source.Dataset('populated_places');
    const viz = new carto.Viz();
    const layer = new carto.Layer('layer', source, viz);
    layer.addTo(map, 'watername_ocean');
  }

  function addDeckGLLayer() {
    var { MapboxLayer, HexagonLayer } = deck;

    // deck.gl Layer
    var DATA_URL = 'https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/3d-heatmap/heatmap-data.csv';

    // Create the deck.gl hexagon layer and style for the data
    var OPTIONS = ['radius', 'coverage', 'upperPercentile'];
    var COLOR_RANGE = [
      [1, 152, 189],
      [73, 227, 206],
      [216, 254, 181],
      [254, 237, 177],
      [254, 173, 84],
      [209, 55, 78]
    ];
    var LIGHT_SETTINGS = {
      lightsPosition: [-0.144528, 49.739968, 8000, -3.807751, 54.104682, 8000],
      ambientRatio: 0.4,
      diffuseRatio: 0.6,
      specularRatio: 0.2,
      lightsStrength: [0.8, 0.0, 0.8, 0.0],
      numberOfLights: 2
    };

    // Mapbox layer
    var hexagonLayer = new MapboxLayer({
      type: HexagonLayer,
      id: 'heatmap',
      data: d3.csv(DATA_URL),
      radius: 1000,
      coverage: 1,
      upperPercentile: 100,
      colorRange: COLOR_RANGE,
      elevationRange: [0, 1000],
      elevationScale: 250,
      extruded: true,
      getPosition: d => [Number(d.lng), Number(d.lat)],
      lightSettings: LIGHT_SETTINGS,
      opacity: 1
    });

    // Add the deck.gl hex layer below labels in the CARTO map
    map.addLayer(hexagonLayer, 'watername_ocean');

    // Add sliders to change the layer's settings based on user input
    OPTIONS.forEach(key => {
      document.getElementById(key).onchange = (evt) => {
        var value = Number(evt.target.value);
        document.getElementById(key + '-value').innerHTML = value;
        if (hexagonLayer) {
          hexagonLayer.setProps({
            [key]: value
          });
        }
      };
    });
  }

</script>

</html>
	<html>

	<head>
	<title>CARTO VL & deck.gl</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

	<script src="https://unpkg.com/deck.gl@latest/deckgl.min.js"></script>

	<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js"></script>
	<link rel="stylesheet" type="text/css" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css">

	<script src="https://d3js.org/d3.v5.min.js"></script>
	<script src="https://libs.cartocdn.com/carto-vl/v1.2.4/carto-vl.min.js"></script>

	<style type="text/css">
	#map {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	}

	body {
	font-family: Helvetica, Arial, sans-serif;
	width: 100vw;
	height: 100vh;
	margin: 0;
	padding: 0
	}

	#control-panel {
	position: absolute;
	background: #fff;
	top: 0;
	left: 0;
	margin: 12px;
	padding: 20px;
	font-size: 12px;
	line-height: 1.5;
	z-index: 1;
	}

	label {
	display: inline-block;
	width: 140px;
	}
	</style>
	</head>

	<body>
	<div id="control-panel">
	<div>
	<label>Radius</label>
	<input id="radius" type="range" min="500" max="10000" step="500" value="1000"></input>
	<span id="radius-value"></span>
	</div>
	<div>
	<label>Coverage</label>
	<input id="coverage" type="range" min="0" max="1" step="0.1" value="1"></input>
	<span id="coverage-value"></span>
	</div>
	<div>
	<label>Upper Percentile</label>
	<input id="upperPercentile" type="range" min="90" max="100" step="1" value="100"></input>
	<span id="upperPercentile-value"></span>
	</div>
	</div>
	</body>
	<script type="text/javascript">

	// Create the Mapbox map
	var map = new mapboxgl.Map({
	container: document.body,
	style: carto.basemaps.darkmatter,
	center: [-1.4157, 52.2324],
	zoom: 6,
	pitch: 40.5
	});

	map.on('load', () => {
	addDeckGLLayer();

	addVLLayer();
	});

	function addVLLayer() {
	carto.setDefaultAuth({
	username: 'cartovl',
	apiKey: 'default_public'
	});

	const source = new carto.source.Dataset('populated_places');
	const viz = new carto.Viz();
	const layer = new carto.Layer('layer', source, viz);
	layer.addTo(map, 'watername_ocean');
	}

	function addDeckGLLayer() {
	var { MapboxLayer, HexagonLayer } = deck;

	// deck.gl Layer
	var DATA_URL = 'https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/3d-heatmap/heatmap-data.csv';

	// Create the deck.gl hexagon layer and style for the data
	var OPTIONS = ['radius', 'coverage', 'upperPercentile'];
	var COLOR_RANGE = [
	[1, 152, 189],
	[73, 227, 206],
	[216, 254, 181],
	[254, 237, 177],
	[254, 173, 84],
	[209, 55, 78]
	];
	var LIGHT_SETTINGS = {
	lightsPosition: [-0.144528, 49.739968, 8000, -3.807751, 54.104682, 8000],
	ambientRatio: 0.4,
	diffuseRatio: 0.6,
	specularRatio: 0.2,
	lightsStrength: [0.8, 0.0, 0.8, 0.0],
	numberOfLights: 2
	};

	// Mapbox layer
	var hexagonLayer = new MapboxLayer({
	type: HexagonLayer,
	id: 'heatmap',
	data: d3.csv(DATA_URL),
	radius: 1000,
	coverage: 1,
	upperPercentile: 100,
	colorRange: COLOR_RANGE,
	elevationRange: [0, 1000],
	elevationScale: 250,
	extruded: true,
	getPosition: d => [Number(d.lng), Number(d.lat)],
	lightSettings: LIGHT_SETTINGS,
	opacity: 1
	});

	// Add the deck.gl hex layer below labels in the CARTO map
	map.addLayer(hexagonLayer, 'watername_ocean');

	// Add sliders to change the layer's settings based on user input
	OPTIONS.forEach(key => {
	document.getElementById(key).onchange = (evt) => {
	var value = Number(evt.target.value);
	document.getElementById(key + '-value').innerHTML = value;
	if (hexagonLayer) {
	hexagonLayer.setProps({
	[key]: value
	});
	}
	};
	});
	}

	</script>

	</html>