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

 <head>
    <title>Congrats on the house!</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 house!!</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: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
            style: carto.basemaps.positron,
            center: [-122.38107868584683, 47.624779156705245],
            zoom: 11,
            scrollZoom: true,
            //set pitch and bearing
            //pitch: 60, //map.getPitch() in degrees
            //bearing: 0.03535930738712523, // map.getBearing() in degrees
        });

        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(`seattle_collisions`);
        const faceViz = new carto.Viz(`
            symbol: ramp(buckets(300*(0.5*now()%1 >0.5),[50]), [
            image('https://raw.githubusercontent.com/makella/symbol_test/master/steph-face-transp.svg'),
            image('https://raw.githubusercontent.com/makella/symbol_test/master/house.svg')
            ])
            width: ramp(linear($personcount, 2, 5), [20, 80]) * animation(linear($incdate), 20,fade(1, 1))
            strokeWidth: 0
        `);
        const faceLayer = new carto.Layer('faceLayer', faceSource, faceViz);

        faceLayer.addTo(map);


    </script>
 </body>

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

	<head>
	<title>Congrats on the house!</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 house!!</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: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
	style: carto.basemaps.positron,
	center: [-122.38107868584683, 47.624779156705245],
	zoom: 11,
	scrollZoom: true,
	//set pitch and bearing
	//pitch: 60, //map.getPitch() in degrees
	//bearing: 0.03535930738712523, // map.getBearing() in degrees
	});

	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(`seattle_collisions`);
	const faceViz = new carto.Viz(`
	symbol: ramp(buckets(300(0.5now()%1 >0.5),[50]), [
	image('https://raw.githubusercontent.com/makella/symbol_test/master/steph-face-transp.svg'),
	image('https://raw.githubusercontent.com/makella/symbol_test/master/house.svg')
	])
	width: ramp(linear($personcount, 2, 5), [20, 80]) * animation(linear($incdate), 20,fade(1, 1))
	strokeWidth: 0
	`);
	const faceLayer = new carto.Layer('faceLayer', faceSource, faceViz);

	faceLayer.addTo(map);


	</script>
	</body>

	</html>