jsanz/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://libs.cartocdn.com/airship-style/v1.0.3/airship.css">
    <script src="https://libs.cartocdn.com/airship-components/v1.0.3/airship.js"></script>
    <script src="https://libs.cartocdn.com/carto-vl/v1.0.0/carto-vl.min.js"></script>
    <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js"></script>
    <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <title>CARTO VL Widget Table Example</title>
</head>

<body class="as-app-body as-app">
    <as-responsive-content>
        <main class="as-main">
            <div class="as-map-area">
                <div id="map" style="width:100%;height:100vh;"></div>
                <!-- Panel to render the countries table -->
                <div class="as-map-panels" data-name="Countries">
                    <div class="as-panel as-panel--bottom as-panel--right  as-bg--ui-01" style="height:400px;">
                        <section class="as-box">
                            <h3 class="as-title">Countries in the view</h3>
                            <table id="countries-table" class="as-table as-table--stripped">
                                <tr>
                                    <th>Name</th>
                                    <th>Population</th>
                                    <th>Economy</th>
                                </tr>
                                <tr v-for="country in countries">
                                    <td>{{ country.properties.name }}</td>
                                    <td style="text-align:right;">{{ numberFormat(country.properties.pop_est) }} </td>
                                    <td>{{ country.properties.economy }} </td>
                                </tr>
                            </table>
                        </section>
                    </div>
                </div>
            </div>
        </main>
    </as-responsive-content>

    <script>
        function run() {
            const map = new mapboxgl.Map({
                container: 'map',
                style: carto.basemaps.voyager,
                center: [40.7, 2],
                zoom: 5,
                scrollZoom: false,
                hash: true
            });

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

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

            const source = new carto.source.Dataset('world_borders_hd');
            const viz = new carto.Viz(`
            \@list: viewportFeatures($name, $pop_est, $economy)

            color: opacity(red,0.2);
            strokeColor: black;
            `);

            const layer = new carto.Layer('layer', source, viz);
            layer.addTo(map, 'watername_ocean');

            // Vue app to control the table render
            var app = new Vue({
                el: '#countries-table',
                data: {
                    countries: null,
                    numbFormatter: new Intl.NumberFormat('en-EN', {
                        minimumFractionDigits: 0,
                        maximumFractionDigits: 0
                    })
                },
                methods: {
                    numberFormat: function (number) {
                        return this.numbFormatter.format(number);
                    }
                }
            });

            layer.on('updated', () => {
                app.countries = viz.variables.list.value;
            });
        }
        document.querySelector('as-responsive-content').addEventListener('ready', run);
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="https://libs.cartocdn.com/airship-style/v1.0.3/airship.css">
	<script src="https://libs.cartocdn.com/airship-components/v1.0.3/airship.js"></script>
	<script src="https://libs.cartocdn.com/carto-vl/v1.0.0/carto-vl.min.js"></script>
	<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js"></script>
	<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css" rel="stylesheet" />
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<title>CARTO VL Widget Table Example</title>
	</head>

	<body class="as-app-body as-app">
	<as-responsive-content>
	<main class="as-main">
	<div class="as-map-area">
	<div id="map" style="width:100%;height:100vh;"></div>
	<!-- Panel to render the countries table -->
	<div class="as-map-panels" data-name="Countries">
	<div class="as-panel as-panel--bottom as-panel--right as-bg--ui-01" style="height:400px;">
	<section class="as-box">
	<h3 class="as-title">Countries in the view</h3>
	<table id="countries-table" class="as-table as-table--stripped">
	<tr>
	<th>Name</th>
	<th>Population</th>
	<th>Economy</th>
	</tr>
	<tr v-for="country in countries">
	<td>{{ country.properties.name }}</td>
	<td style="text-align:right;">{{ numberFormat(country.properties.pop_est) }} </td>
	<td>{{ country.properties.economy }} </td>
	</tr>
	</table>
	</section>
	</div>
	</div>
	</div>
	</main>
	</as-responsive-content>

	<script>
	function run() {
	const map = new mapboxgl.Map({
	container: 'map',
	style: carto.basemaps.voyager,
	center: [40.7, 2],
	zoom: 5,
	scrollZoom: false,
	hash: true
	});

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

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

	const source = new carto.source.Dataset('world_borders_hd');
	const viz = new carto.Viz(`
	\@list: viewportFeatures($name, $pop_est, $economy)

	color: opacity(red,0.2);
	strokeColor: black;
	`);

	const layer = new carto.Layer('layer', source, viz);
	layer.addTo(map, 'watername_ocean');

	// Vue app to control the table render
	var app = new Vue({
	el: '#countries-table',
	data: {
	countries: null,
	numbFormatter: new Intl.NumberFormat('en-EN', {
	minimumFractionDigits: 0,
	maximumFractionDigits: 0
	})
	},
	methods: {
	numberFormat: function (number) {
	return this.numbFormatter.format(number);
	}
	}
	});

	layer.on('updated', () => {
	app.countries = viz.variables.list.value;
	});
	}
	document.querySelector('as-responsive-content').addEventListener('ready', run);
	</script>
	</body>
	</html>