makella · February 27, 2019 19:18
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
 <title>Exported map | CARTO VL</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta charset="UTF-8">
 <script src="http://libs.cartocdn.com/carto-vl/v1.1.1/carto-vl.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" />
 <style>
    html, body {
        margin: 0;
    }
    #map {
        position: absolute;
        width: 100%;
        height: 100%;
    }
 </style>
 </head>
 <body>
 <div id="map"></div>
 <script>
    const map = new mapboxgl.Map({
        container: 'map',
        style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
        center: [0.296704, -15.586487],
        zoom: 2.5,
        pitch: 58.9,
        bearing: 0.01
    });

    carto.setDefaultConfig({
        serverURL: 'https://{user}.carto.com'
    });

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


    const source = new carto.source.Dataset("pop_density_points");
    const viz = new carto.Viz(`

        //translate to get impression that the data is on the land
        transform: [translate(0,now()*0.01)]

        //speed of image swap
        symbol: ramp(buckets(100*(0.5*now()%1 >0.5),[50]), [circle,triangle])
        color: opacity(ramp(linear($dn),ag_sunset),1)
        width: scaled(ramp($dn,[5,30]),4 )
        order: desc(width())

        //width: scaled(clusterCount()*8,1)
        //symbolPlacement: placement((0.8*$dn*now()) , (0.8*$dn*now()))
        //symbol: ramp(linear($dn, 100,200), prism)*ramp(buckets(100*(0.8*now()%1 >0.5),  [20]), [
        //image('../styling/marker.svg'),
        //  image('../styling/star.svg')
        //])
        //transform: [translate(10,0)]
        //resolution: 10
        //filter: $dn>100
        //width: scaled(ramp(buckets(100*(1*now()%2>0.5),  [1]), [10,20,80]),4)
    `);
    const layer = new carto.Layer('layer', source, viz);

    layer.addTo(map, 'watername_ocean');
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Exported map \| CARTO VL</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="UTF-8">
	<script src="http://libs.cartocdn.com/carto-vl/v1.1.1/carto-vl.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" />
	<style>
	html, body {
	margin: 0;
	}
	#map {
	position: absolute;
	width: 100%;
	height: 100%;
	}
	</style>
	</head>
	<body>
	<div id="map"></div>
	<script>
	const map = new mapboxgl.Map({
	container: 'map',
	style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
	center: [0.296704, -15.586487],
	zoom: 2.5,
	pitch: 58.9,
	bearing: 0.01
	});

	carto.setDefaultConfig({
	serverURL: 'https://{user}.carto.com'
	});

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


	const source = new carto.source.Dataset("pop_density_points");
	const viz = new carto.Viz(`

	//translate to get impression that the data is on the land
	transform: [translate(0,now()*0.01)]

	//speed of image swap
	symbol: ramp(buckets(100(0.5now()%1 >0.5),[50]), [circle,triangle])
	color: opacity(ramp(linear($dn),ag_sunset),1)
	width: scaled(ramp($dn,[5,30]),4 )
	order: desc(width())

	//width: scaled(clusterCount()*8,1)
	//symbolPlacement: placement((0.8$dnnow()) , (0.8$dnnow()))
	//symbol: ramp(linear($dn, 100,200), prism)ramp(buckets(100(0.8*now()%1 >0.5), [20]), [
	//image('../styling/marker.svg'),
	// image('../styling/star.svg')
	//])
	//transform: [translate(10,0)]
	//resolution: 10
	//filter: $dn>100
	//width: scaled(ramp(buckets(100(1now()%2>0.5), [1]), [10,20,80]),4)
	`);
	const layer = new carto.Layer('layer', source, viz);

	layer.addTo(map, 'watername_ocean');
	</script>
	</body>
	</html>