danicarrion/index.html

## index.html
<!doctype html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>CARTO + Tangram + MVT example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-rc.3/leaflet.css" />

    <style>
        body {
            margin: 0px;
            border: 0px;
            padding: 0px;
        }

        #map {
            height: 100%;
            width: 100%;
            position: absolute;
        }

    </style>
  </head>

  <body>
    <div id="map"></div>

    <!-- leaflet -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-rc.1/leaflet.js"></script>

    <!-- CARTO core -->
    <script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.core.js"></script>

    <!-- Main tangram library -->
    <script src="https://mapzen.com/tangram/tangram.min.js"></script>

    <script>

        var map = L.map('map');

        var layer = Tangram.leafletLayer({
            scene: 'scene.yaml',
            attribution: '<a href="https://mapzen.com/tangram" target="_blank">Tangram</a> | &copy; OSM contributors | <a href="https://mapzen.com/" target="_blank">Mapzen</a>'
        });

        var scene = layer.scene;

        layer.addTo(map);

        map.setView([40.70531887544228, -74.00976419448853], 4);

        var cartoLayer = {
            user_name: "dcarrion",
            sublayers: [
                {
                    sql: "SELECT * FROM tornados",
                    cartocss: "#tornados {}",
                }
            ]
        };

        /* Get the URL for the MVT tile service for this layer */
        cartodb.Tiles.getTiles(cartoLayer, function(result, err) {
            var tiles = result.tiles.map(function(tileUrl) {
                return tileUrl
                    .replace('{s}', 'a')
                    .replace(/\.png/, '.mvt');
            })[0];

            /* Add CARTO source and layer to the scene */
            scene.setDataSource('carto', {type: 'MVT', url: tiles});
            scene.config.layers.tornados = {data: {source: "carto", layer: "layer0"}, draw: {points: {color: "#ffee00", size: "5px"}}};
            scene.updateConfig({rebuild: true});
        });

    </script>

  </body>
</html>

## scene.yaml
cameras:
    camera1:
        type: perspective

lights:
    light1:
        type: directional
        direction: [0, 1, -.5]
        diffuse: .3
        ambient: 1

sources:
    osm:
        type: TopoJSON
        url:  https://vector.mapzen.com/osm/all/{z}/{x}/{y}.topojson?api_key=vector-tiles-HqUVidw
        max_zoom: 16

layers:
    earth:
        data: { source: osm }
        draw:
            polygons:
                order: function() { return feature.sort_key; }
                color: '#ddeeee'

    landuse:
        data: { source: osm }
        draw:
            polygons:
                order: function() { return feature.sort_key; }
                color: '#aaffaa'

    water:
        data: { source: osm }
        draw:
            polygons:
                order: function() { return feature.sort_key; }
                color: '#88bbee'

    roads:
        data: { source: osm }
        filter:
            not: { kind: ["path", "rail"] }
        draw:
            lines:
                order: function() { return feature.sort_key; }
                color: gray
                width: 8
                cap: round
        highway:
            filter:
                kind: highway
            draw:
                lines:
                    order: function() { return feature.sort_key; }
                    color: '#cc6666'
                    width: 12
                    outline:
                        color: grey
                        width: 1.5
        minor_road:
            filter:
                kind: minor_road
            draw:
                lines:
                    order: function() { return feature.sort_key; }
                    color: lightgrey
                    width: 5

    buildings:
        data: { source: osm }
        draw:
            polygons:
                order: function() { return feature.sort_key; }
                color: |
                    function () {
                        var h = feature.height || 20;
                        h = Math.min((h + 50)/ 255, .8); // max brightness: .8
                        h = Math.max(h, .4); // min brightness: .4
                        return [h, h, h];
                    }
        3d-buildings:
            filter: { $zoom: { min: 15 } }
            draw:
                polygons:
                    extrude: function () { return feature.height > 20 || $zoom >= 16; }
	<!doctype html>
	<html lang="en-us">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>CARTO + Tangram + MVT example</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-rc.3/leaflet.css" />

	<style>
	body {
	margin: 0px;
	border: 0px;
	padding: 0px;
	}

	#map {
	height: 100%;
	width: 100%;
	position: absolute;
	}

	</style>
	</head>

	<body>
	<div id="map"></div>

	<!-- leaflet -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-rc.1/leaflet.js"></script>

	<!-- CARTO core -->
	<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.core.js"></script>

	<!-- Main tangram library -->
	<script src="https://mapzen.com/tangram/tangram.min.js"></script>

	<script>

	var map = L.map('map');

	var layer = Tangram.leafletLayer({
	scene: 'scene.yaml',
	attribution: '<a href="https://mapzen.com/tangram" target="_blank">Tangram</a> \| © OSM contributors \| <a href="https://mapzen.com/" target="_blank">Mapzen</a>'
	});

	var scene = layer.scene;

	layer.addTo(map);

	map.setView([40.70531887544228, -74.00976419448853], 4);

	var cartoLayer = {
	user_name: "dcarrion",
	sublayers: [
	{
	sql: "SELECT * FROM tornados",
	cartocss: "#tornados {}",
	}
	]
	};

	/* Get the URL for the MVT tile service for this layer */
	cartodb.Tiles.getTiles(cartoLayer, function(result, err) {
	var tiles = result.tiles.map(function(tileUrl) {
	return tileUrl
	.replace('{s}', 'a')
	.replace(/\.png/, '.mvt');
	})[0];

	/* Add CARTO source and layer to the scene */
	scene.setDataSource('carto', {type: 'MVT', url: tiles});
	scene.config.layers.tornados = {data: {source: "carto", layer: "layer0"}, draw: {points: {color: "#ffee00", size: "5px"}}};
	scene.updateConfig({rebuild: true});
	});

	</script>

	</body>
	</html>
	cameras:
	camera1:
	type: perspective

	lights:
	light1:
	type: directional
	direction: [0, 1, -.5]
	diffuse: .3
	ambient: 1

	sources:
	osm:
	type: TopoJSON
	url: https://vector.mapzen.com/osm/all/{z}/{x}/{y}.topojson?api_key=vector-tiles-HqUVidw
	max_zoom: 16

	layers:
	earth:
	data: { source: osm }
	draw:
	polygons:
	order: function() { return feature.sort_key; }
	color: '#ddeeee'

	landuse:
	data: { source: osm }
	draw:
	polygons:
	order: function() { return feature.sort_key; }
	color: '#aaffaa'

	water:
	data: { source: osm }
	draw:
	polygons:
	order: function() { return feature.sort_key; }
	color: '#88bbee'

	roads:
	data: { source: osm }
	filter:
	not: { kind: ["path", "rail"] }
	draw:
	lines:
	order: function() { return feature.sort_key; }
	color: gray
	width: 8
	cap: round
	highway:
	filter:
	kind: highway
	draw:
	lines:
	order: function() { return feature.sort_key; }
	color: '#cc6666'
	width: 12
	outline:
	color: grey
	width: 1.5
	minor_road:
	filter:
	kind: minor_road
	draw:
	lines:
	order: function() { return feature.sort_key; }
	color: lightgrey
	width: 5

	buildings:
	data: { source: osm }
	draw:
	polygons:
	order: function() { return feature.sort_key; }
	color: \|
	function () {
	var h = feature.height \|\| 20;
	h = Math.min((h + 50)/ 255, .8); // max brightness: .8
	h = Math.max(h, .4); // min brightness: .4
	return [h, h, h];
	}
	3d-buildings:
	filter: { $zoom: { min: 15 } }
	draw:
	polygons:
	extrude: function () { return feature.height > 20 \|\| $zoom >= 16; }