VictorVelarde/index.html

## index.html
<!DOCTYPE html>
<html>

<head>
  <title>Add layer | CARTO</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="UTF-8">
  <script src="http://libs.cartocdn.com/carto-vl/v1.3/carto-vl.js"></script>
  <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
  <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
  <link href="https://carto.com/developers/carto-vl/v1.3.0/examples/maps/style.css" rel="stylesheet">
</head>

<body>
  <div id="map"></div>
  <aside class="toolbox">
    <div class="box">
      <header>
        <h1>Use several visual properties per symbol</h1>
      </header>
    </div>
  </aside>

  <script>
    const map = new mapboxgl.Map({
      container: 'map',
      style: carto.basemaps.darkmatter,
      center: [-3.7326555488141366, 40.39397483857178],
      zoom: 14,
      scrollZoom: false
    });

    const nav = new mapboxgl.NavigationControl({ showCompass: false });
    map.addControl(nav, 'top-left');
    map.addControl(new mapboxgl.FullscreenControl(), 'top-left');

    // Define user
    carto.setDefaultAuth({
      username: 'cartovl',
      apiKey: 'default_public'
    });

    const resolution = 32;
    const width = 32;

    // Define layer
    const source = new carto.source.Dataset('airbnb_madrid_listings_2018');
    const viz = new carto.Viz(`
        // symbol could be 'type of vehicle'
        symbol: ramp(buckets($neighbourhood, ['Aluche', 'Acacias', 'Moncloa', 'Goya', 'Carabanchel']),  [car, star, square, triangle, flag])

        // color could be used for severity (imagine small, medium, high)
        color: ramp(buckets($room_type, ['Entire home/apt', 'Private room', 'Shared room']), tealrose)

        width: 30
    `);
    const layer = new carto.Layer('layer', source, viz);
    layer.addTo(map, 'watername_ocean');

    //
    const auxViz = new carto.Viz(`
        // same color used for severity (or not)
        color: ramp(buckets($room_type, ['Entire home/apt', 'Private room', 'Shared room']), tealrose)

        // this symbol type could also change based on other field
        symbol: triangle
        transform: translate(80, 80)
        width: 20
    `);
    const auxLayer = new carto.Layer('auxLayer', source, auxViz);
    auxLayer.addTo(map);

  </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>Add layer \| CARTO</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="UTF-8">
	<script src="http://libs.cartocdn.com/carto-vl/v1.3/carto-vl.js"></script>
	<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
	<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
	<link href="https://carto.com/developers/carto-vl/v1.3.0/examples/maps/style.css" rel="stylesheet">
	</head>

	<body>
	<div id="map"></div>
	<aside class="toolbox">
	<div class="box">
	<header>
	<h1>Use several visual properties per symbol</h1>
	</header>
	</div>
	</aside>

	<script>
	const map = new mapboxgl.Map({
	container: 'map',
	style: carto.basemaps.darkmatter,
	center: [-3.7326555488141366, 40.39397483857178],
	zoom: 14,
	scrollZoom: false
	});

	const nav = new mapboxgl.NavigationControl({ showCompass: false });
	map.addControl(nav, 'top-left');
	map.addControl(new mapboxgl.FullscreenControl(), 'top-left');

	// Define user
	carto.setDefaultAuth({
	username: 'cartovl',
	apiKey: 'default_public'
	});

	const resolution = 32;
	const width = 32;

	// Define layer
	const source = new carto.source.Dataset('airbnb_madrid_listings_2018');
	const viz = new carto.Viz(`
	// symbol could be 'type of vehicle'
	symbol: ramp(buckets($neighbourhood, ['Aluche', 'Acacias', 'Moncloa', 'Goya', 'Carabanchel']), [car, star, square, triangle, flag])

	// color could be used for severity (imagine small, medium, high)
	color: ramp(buckets($room_type, ['Entire home/apt', 'Private room', 'Shared room']), tealrose)

	width: 30
	`);
	const layer = new carto.Layer('layer', source, viz);
	layer.addTo(map, 'watername_ocean');

	//
	const auxViz = new carto.Viz(`
	// same color used for severity (or not)
	color: ramp(buckets($room_type, ['Entire home/apt', 'Private room', 'Shared room']), tealrose)

	// this symbol type could also change based on other field
	symbol: triangle
	transform: translate(80, 80)
	width: 20
	`);
	const auxLayer = new carto.Layer('auxLayer', source, auxViz);
	auxLayer.addTo(map);

	</script>
	</body>

	</html>