ramiroaznar · November 16, 2018 14:42
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>

 <head>
    <title>Bizi Routing | CARTO VL</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/v1.0.0/carto-vl.min.js"></script>
    <!-- Include Mapbox GL JS -->
    <script src="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.js"></script>
    <!-- Include Mapbox GL CSS -->
    <link href="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,200,400,500" rel="stylesheet">
    <link href="https://carto.com/developers/carto-vl/examples/maps/style.css" rel="stylesheet">
 </head>

 <body>
    <div id="map"></div>
    <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.darkmatter,
        center: [-0.883333, 41.655],
        zoom: 13,
        scrollZoom: false,
        });

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

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

        // Define origin layer
        const originSource = new carto.source.Dataset('bizi_init');
        const originViz = new carto.Viz(`
            @date: $fecha_inicio
            @duration: 3000
            @animation: animation(linear(@date,time('2017-03-20T06:00:06Z'),time('2017-03-26T23:58:56Z')),@duration,fade(1,1))
            
            color: #C75DAB
            filter: @animation
            width: 10
        `);
        const originLayer = new carto.Layer('originLayer', originSource, originViz);

        // Define destination layer
        const destinationSource = new carto.source.Dataset('bizi_dest');
        const destinationViz = new carto.Viz(`
            @date: $fecha_final
            @duration: 3000
            @animation: animation(linear(@date,time('2017-03-20T06:05:04Z'),time('2017-03-27T00:15:16Z')),@duration,fade(1,1))
            
            color: #009B9E
            filter: @animation
            width: 10
        `);
        const destinationLayer = new carto.Layer('destinationLayer', destinationSource, destinationViz);

        // Define lines layer
        const linesSource = new carto.source.Dataset('bizi_routes');
        const linesViz = new carto.Viz(`
            @date: $fecha_final
            @duration: 3000
            @animation: animation(linear(@date,time('2017-03-20T06:05:04Z'),time('2017-03-27T00:15:16Z')),@duration,fade(1,1))
            
            color: opacity(#F1F1F1,0.7)
            width: 2
            filter: @animation
        `);
        const linesLayer = new carto.Layer('linesLayer', linesSource, linesViz);

        linesLayer.addTo(map);
        originLayer.addTo(map);
        destinationLayer.addTo(map);

        carto.on('loaded', [originLayer, destinationLayer, linesLayer], hideLoader);

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

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

	<head>
	<title>Bizi Routing \| CARTO VL</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/v1.0.0/carto-vl.min.js"></script>
	<!-- Include Mapbox GL JS -->
	<script src="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.js"></script>
	<!-- Include Mapbox GL CSS -->
	<link href="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.css" rel="stylesheet" />
	<link href="https://fonts.googleapis.com/css?family=Roboto:100,200,400,500" rel="stylesheet">
	<link href="https://carto.com/developers/carto-vl/examples/maps/style.css" rel="stylesheet">
	</head>

	<body>
	<div id="map"></div>
	<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.darkmatter,
	center: [-0.883333, 41.655],
	zoom: 13,
	scrollZoom: false,
	});

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

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

	// Define origin layer
	const originSource = new carto.source.Dataset('bizi_init');
	const originViz = new carto.Viz(`
	@date: $fecha_inicio
	@duration: 3000
	@animation: animation(linear(@date,time('2017-03-20T06:00:06Z'),time('2017-03-26T23:58:56Z')),@duration,fade(1,1))

	color: #C75DAB
	filter: @animation
	width: 10
	`);
	const originLayer = new carto.Layer('originLayer', originSource, originViz);

	// Define destination layer
	const destinationSource = new carto.source.Dataset('bizi_dest');
	const destinationViz = new carto.Viz(`
	@date: $fecha_final
	@duration: 3000
	@animation: animation(linear(@date,time('2017-03-20T06:05:04Z'),time('2017-03-27T00:15:16Z')),@duration,fade(1,1))

	color: #009B9E
	filter: @animation
	width: 10
	`);
	const destinationLayer = new carto.Layer('destinationLayer', destinationSource, destinationViz);

	// Define lines layer
	const linesSource = new carto.source.Dataset('bizi_routes');
	const linesViz = new carto.Viz(`
	@date: $fecha_final
	@duration: 3000
	@animation: animation(linear(@date,time('2017-03-20T06:05:04Z'),time('2017-03-27T00:15:16Z')),@duration,fade(1,1))

	color: opacity(#F1F1F1,0.7)
	width: 2
	filter: @animation
	`);
	const linesLayer = new carto.Layer('linesLayer', linesSource, linesViz);

	linesLayer.addTo(map);
	originLayer.addTo(map);
	destinationLayer.addTo(map);

	carto.on('loaded', [originLayer, destinationLayer, linesLayer], hideLoader);

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

	</html>