makella · July 2, 2020 17:46
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>

 <head>
    <title>Congrats on the new job!</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.1.1/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/v1.1.1/examples/maps/style.css" rel="stylesheet">
 </head>

 <body>
    <div id="map"></div>
    <aside class="toolbox">
        <div class="box">
            <header>
                <h1>Congrats on the new job!!</h1>
            </header>
            <footer class="js-footer"></footer>
        </div>
    </aside>
    <style>
        html,
        body {
            margin: 0;
        }

        #map {
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>
    <script>
        const map = new mapboxgl.Map({
            container: 'map',
            style: carto.basemaps.darkmatter,
            center: [-122.426321, 37.759150],
            zoom: 11,
            scrollZoom: true
        });

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

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

        // Define layers
        const faceSource = new carto.source.Dataset(`sf_neighborhoods_copy_1`);
        const faceViz = new carto.Viz(`
        symbol: ramp(buckets(100*(0.5*now()%1 >0.5),[100]), [
            image('https://raw.githubusercontent.com/makella/symbol_test/master/jonah-transp.svg'),
            image('https://raw.githubusercontent.com/makella/symbol_test/master/stamen.svg')
        ])
        width: ramp(linear($value), [80, 280]) * animation(linear($value), 5,fade(2, 4))
        order: desc(width())
        `);
        const faceLayer = new carto.Layer('faceLayer', faceSource, faceViz);

        faceLayer.addTo(map);


    </script>
 </body>

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

	<head>
	<title>Congrats on the new job!</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.1.1/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/v1.1.1/examples/maps/style.css" rel="stylesheet">
	</head>

	<body>
	<div id="map"></div>
	<aside class="toolbox">
	<div class="box">
	<header>
	<h1>Congrats on the new job!!</h1>
	</header>
	<footer class="js-footer"></footer>
	</div>
	</aside>
	<style>
	html,
	body {
	margin: 0;
	}

	#map {
	position: absolute;
	width: 100%;
	height: 100%;
	}
	</style>
	<script>
	const map = new mapboxgl.Map({
	container: 'map',
	style: carto.basemaps.darkmatter,
	center: [-122.426321, 37.759150],
	zoom: 11,
	scrollZoom: true
	});

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

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

	// Define layers
	const faceSource = new carto.source.Dataset(`sf_neighborhoods_copy_1`);
	const faceViz = new carto.Viz(`
	symbol: ramp(buckets(100(0.5now()%1 >0.5),[100]), [
	image('https://raw.githubusercontent.com/makella/symbol_test/master/jonah-transp.svg'),
	image('https://raw.githubusercontent.com/makella/symbol_test/master/stamen.svg')
	])
	width: ramp(linear($value), [80, 280]) * animation(linear($value), 5,fade(2, 4))
	order: desc(width())
	`);
	const faceLayer = new carto.Layer('faceLayer', faceSource, faceViz);

	faceLayer.addTo(map);


	</script>
	</body>

	</html>