makella/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">
    <script src="https://libs.cartocdn.com/carto-vl/v1.0.0/carto-vl.min.js"></script>
    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
    <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/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: carto.basemaps.voyager,
            center: [0, 30],
            zoom: 1.5,
            scrollZoom: false,


        });

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

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

        // Define layer
        const source = new carto.source.Dataset('world_population_2015');
        const viz = new carto.Viz(`
          width: sqrt($pop_2015)/200
          color: opacity(BlueViolet, 0.5)
          strokeColor: opacity(BlueViolet, 0.8)
          symbol: marker
        `);
        const layer = new carto.Layer('layer', source, viz);

        // Define interactivity
        const interactivity = new carto.Interactivity(layer);
        const delay = 40;
        let clickedFeatureId = null;
        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;
                feature.color.blendTo('opacity(LimeGreen, 0.5)', delay)
                feature.strokeWidth.blendTo('7', delay);
                feature.strokeColor.blendTo('opacity(LimeGreen, 0.8)', 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);
            }
        });

        layer.addTo(map, 'watername_ocean');
        layer.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">
	<script src="https://libs.cartocdn.com/carto-vl/v1.0.0/carto-vl.min.js"></script>
	<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
	<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/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: carto.basemaps.voyager,
	center: [0, 30],
	zoom: 1.5,
	scrollZoom: false,


	});

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

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

	// Define layer
	const source = new carto.source.Dataset('world_population_2015');
	const viz = new carto.Viz(`
	width: sqrt($pop_2015)/200
	color: opacity(BlueViolet, 0.5)
	strokeColor: opacity(BlueViolet, 0.8)
	symbol: marker
	`);
	const layer = new carto.Layer('layer', source, viz);

	// Define interactivity
	const interactivity = new carto.Interactivity(layer);
	const delay = 40;
	let clickedFeatureId = null;
	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;
	feature.color.blendTo('opacity(LimeGreen, 0.5)', delay)
	feature.strokeWidth.blendTo('7', delay);
	feature.strokeColor.blendTo('opacity(LimeGreen, 0.8)', 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);
	}
	});

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

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

	</html>