VictorVelarde/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <title>Interactive based styling | CARTO</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="UTF-8">
  <!-- Include CARTO VL JS -->
  <script src="https://libs.cartocdn.com/carto-vl/v0.6.2/carto-vl.min.js"></script>
  <!-- Include Mapbox GL JS -->
  <script src="https://libs.cartocdn.com/mapbox-gl/v0.45.0-carto1/mapbox-gl.js"></script>
  <!-- Include Mapbox GL CSS -->
  <link href="https://libs.cartocdn.com/mapbox-gl/v0.45.0-carto1/mapbox-gl.css" rel="stylesheet" />
  <link href="https://carto.com/developers/carto-vl/examples/maps/style.css" rel="stylesheet">
</head>
<body>
  <div id="map"></div>
  <aside class="toolbox">
    <div class="box">
      <header>
        <h1>Interactive based styling</h1>
      </header>
      <section>
        <p class="description open-sans">Style a feature based on type of interactivity</p>
        <div class="separator"></div>
        <section class="usage">
          <header>USAGE</header>
          <p class="open-sans">Hover and click on the points</p>
        </section>
      </section>
      <footer class="js-footer"></footer>
    </div>
    </aside>
  <div id="loader">
    <div class="CDB-LoaderIcon CDB-LoaderIcon--big">
      <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
        <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
      </svg>
    </div>
  </div>
  <script>
    const map = new mapboxgl.Map({
      container: 'map',
      style: 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json',
      center: [0, 30],
      zoom: 1.5,
      scrollZoom: false,
      dragRotate: false,
      touchZoomRotate: false,
    });

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


    // Define layer
    const mySource = new carto.source.Dataset('world_population_2015');

    const viz = new carto.Viz(`
      width: sqrt($pop_2015)/200
      color: opacity(yellow, .5)
      strokeColor: opacity(yellow, 0.8)
    `);

    const updatedViz = new carto.Viz(`
      width: sqrt($pop_2015)/200
      color: opacity(red, .5)
      strokeColor: opacity(red, 0.8)
    `);

    const myLayer = new carto.Layer('layer', mySource, viz);

    // Define interactivity
    const interactivity = new carto.Interactivity(myLayer);
    const delay = 500;

    let clickedFeatureId = null;
    let clicked = false;

    /*interactivity.on('featureEnter', event => {
      if (event.features.length > 0) {
        const feature = event.features[0];
        if (feature.id !== clickedFeatureId) {
          feature.color.blendTo('opacity(DeepPink, 0.5)', delay)
          feature.strokeWidth.blendTo('4', delay);
          feature.strokeColor.blendTo('opacity(DeepPink, 0.8)', delay);
        }
      }
    });*/

    /*interactivity.on('featureLeave', event => {
      if (event.features.length > 0) {
        const feature = event.features[0];
        if (feature.id !== clickedFeatureId) {
          feature.color.reset(delay);
          feature.strokeWidth.reset(delay);
          feature.strokeColor.reset(delay);
        }
      }
    });*/

    /*interactivity.on('featureClick', event => {
      if (event.features.length > 0) {
        const feature = event.features[0];

        clickedFeatureID = feature.id;
        clicked = true;

        myLayer.update(mySource, updatedViz);

        myLayer.on('updated', event => {
                  if(clicked){
                    console.log("updated function works");
                    console.log("feature = " + feature);
                    console.log("feature.id = " + feature.id);

                    feature.color.blendTo('opacity(blue, 0.8)', delay) // this doesn't work

                    clicked = false;
                  }
               });
      }
    });*/

    interactivity.on('featureClick', event => {
      if (event.features.length > 0) {
        const feature = event.features[0];

        clickedFeatureID = feature.id;
        clicked = true;

        myLayer.update(mySource, updatedViz, function(){updateFeature(feature, 'opacity(blue, 0.8)', delay)});


      }
    });

    function updateFeature(feature, value, delay){
      console.log("feature = " + feature);
      console.log("feature.id = " + feature.id);
      console.log("value = " + value);
      console.log("delay = " + delay);

      feature.color.blendTo(value, delay);

    }

    /*interactivity.on('featureClickOut', event => {
      if (event.features.length > 0) {
        const feature = event.features[0];
        feature.color.reset(delay);
        feature.strokeWidth.reset(delay);
        feature.strokeColor.reset(delay);
      }
    });*/

    myLayer.addTo(map, 'watername_ocean');
    myLayer.on('loaded', hideLoader);

    function hideLoader() {
      document.getElementById('loader').style.opacity = '0';
    }
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Interactive based styling \| CARTO</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="UTF-8">
	<!-- Include CARTO VL JS -->
	<script src="https://libs.cartocdn.com/carto-vl/v0.6.2/carto-vl.min.js"></script>
	<!-- Include Mapbox GL JS -->
	<script src="https://libs.cartocdn.com/mapbox-gl/v0.45.0-carto1/mapbox-gl.js"></script>
	<!-- Include Mapbox GL CSS -->
	<link href="https://libs.cartocdn.com/mapbox-gl/v0.45.0-carto1/mapbox-gl.css" rel="stylesheet" />
	<link href="https://carto.com/developers/carto-vl/examples/maps/style.css" rel="stylesheet">
	</head>
	<body>
	<div id="map"></div>
	<aside class="toolbox">
	<div class="box">
	<header>
	<h1>Interactive based styling</h1>
	</header>
	<section>
	<p class="description open-sans">Style a feature based on type of interactivity</p>
	<div class="separator"></div>
	<section class="usage">
	<header>USAGE</header>
	<p class="open-sans">Hover and click on the points</p>
	</section>
	</section>
	<footer class="js-footer"></footer>
	</div>
	</aside>
	<div id="loader">
	<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
	<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
	<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
	</svg>
	</div>
	</div>
	<script>
	const map = new mapboxgl.Map({
	container: 'map',
	style: 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json',
	center: [0, 30],
	zoom: 1.5,
	scrollZoom: false,
	dragRotate: false,
	touchZoomRotate: false,
	});

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



	// Define layer
	const mySource = new carto.source.Dataset('world_population_2015');

	const viz = new carto.Viz(`
	width: sqrt($pop_2015)/200
	color: opacity(yellow, .5)
	strokeColor: opacity(yellow, 0.8)
	`);

	const updatedViz = new carto.Viz(`
	width: sqrt($pop_2015)/200
	color: opacity(red, .5)
	strokeColor: opacity(red, 0.8)
	`);

	const myLayer = new carto.Layer('layer', mySource, viz);

	// Define interactivity
	const interactivity = new carto.Interactivity(myLayer);
	const delay = 500;

	let clickedFeatureId = null;
	let clicked = false;

	/*interactivity.on('featureEnter', event => {
	if (event.features.length > 0) {
	const feature = event.features[0];
	if (feature.id !== clickedFeatureId) {
	feature.color.blendTo('opacity(DeepPink, 0.5)', delay)
	feature.strokeWidth.blendTo('4', delay);
	feature.strokeColor.blendTo('opacity(DeepPink, 0.8)', delay);
	}
	}
	});*/

	/*interactivity.on('featureLeave', event => {
	if (event.features.length > 0) {
	const feature = event.features[0];
	if (feature.id !== clickedFeatureId) {
	feature.color.reset(delay);
	feature.strokeWidth.reset(delay);
	feature.strokeColor.reset(delay);
	}
	}
	});*/

	/*interactivity.on('featureClick', event => {
	if (event.features.length > 0) {
	const feature = event.features[0];

	clickedFeatureID = feature.id;
	clicked = true;

	myLayer.update(mySource, updatedViz);

	myLayer.on('updated', event => {
	if(clicked){
	console.log("updated function works");
	console.log("feature = " + feature);
	console.log("feature.id = " + feature.id);

	feature.color.blendTo('opacity(blue, 0.8)', delay) // this doesn't work

	clicked = false;
	}
	});
	}
	});*/

	interactivity.on('featureClick', event => {
	if (event.features.length > 0) {
	const feature = event.features[0];

	clickedFeatureID = feature.id;
	clicked = true;

	myLayer.update(mySource, updatedViz, function(){updateFeature(feature, 'opacity(blue, 0.8)', delay)});



	}
	});

	function updateFeature(feature, value, delay){
	console.log("feature = " + feature);
	console.log("feature.id = " + feature.id);
	console.log("value = " + value);
	console.log("delay = " + delay);

	feature.color.blendTo(value, delay);

	}

	/*interactivity.on('featureClickOut', event => {
	if (event.features.length > 0) {
	const feature = event.features[0];
	feature.color.reset(delay);
	feature.strokeWidth.reset(delay);
	feature.strokeColor.reset(delay);
	}
	});*/

	myLayer.addTo(map, 'watername_ocean');
	myLayer.on('loaded', hideLoader);

	function hideLoader() {
	document.getElementById('loader').style.opacity = '0';
	}
	</script>
	</body>
	</html>