CARTO VL & Airship with GeoJSON data source

cities.js

const cities = {"type": "FeatureCollection", "features": [{"type":"Feature","geometry":{"type":"Point","coordinates":[2.450021,41.539957]},"properties":{"latitude":41.5399566844,"longitude":2.45002070986,"name":"Mataro","country":"Spain","pop":183293}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-0.980028,37.60043]},"properties":{"latitude":37.6004297069,"longitude":-0.98002832173,"name":"Cartagena","country":"Spain","pop":201274}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-5.67,43.530016]},"properties":{"latitude":43.530016092,"longitude":-5.67000044903,"name":"Gijon","country":"Spain","pop":335972}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-15.429999,28.099976]},"properties":{"latitude":28.0999760122,"longitude":-15.4299990249,"name":"Las Palmas","country":"Spain","pop":378495}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-1.698512,37.688564]},"properties":{"latitude":37.6885638621,"longitude":-1.6985115981,"name":"Lorca","country":"Spain","pop":86119}},{"type":"Feature","geometry":{"type":"Point","coordinates":[2.654246,39.574263]},"properties":{"latitude":39.5742627147,"longitude":2.65424597028,"name":"Palma","country":"Spain","pop":375773}},{"type":"Feature","geometry":{"type":"Point","coordinates":[2.181424,41.385245]},"properties":{"latitude":41.3832995799,"longitude":2.18337031923,"name":"Barcelona","country":"Spain","pop":4920000}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.799985,43.380464]},"properties":{"latitude":43.3804644969,"longitude":-3.79998539368,"name":"Santander","country":"Spain","pop":208763}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.770004,37.879999]},"properties":{"latitude":37.8799992056,"longitude":-4.77000370423,"name":"Cordoba","country":"Spain","pop":321376}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-1.87,39.000344]},"properties":{"latitude":39.0003442577,"longitude":-1.86999983866,"name":"Albacete","country":"Spain","pop":158094}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-7.869995,42.32996]},"properties":{"latitude":42.3299601431,"longitude":-7.86999536277,"name":"Ourense","country":"Spain","pop":118107}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-6.929949,37.250374]},"properties":{"latitude":37.2503735545,"longitude":-6.92994938295,"name":"Huelva","country":"Spain","pop":144174}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-2.429991,42.470365]},"properties":{"latitude":42.4703650096,"longitude":-2.42999149719,"name":"Logrono","country":"Spain","pop":143698}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-5.46653,36.126712]},"properties":{"latitude":36.1267121482,"longitude":-5.46653036284,"name":"Algeciras","country":"Spain","pop":111027}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-1.649987,42.820008]},"properties":{"latitude":42.8200077505,"longitude":-1.64998742818,"name":"Pamplona","country":"Spain","pop":274545}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-5.980007,37.405015]},"properties":{"latitude":37.4050152782,"longitude":-5.98000736635,"name":"Seville","country":"Spain","pop":1212045}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-2.669977,42.84998]},"properties":{"latitude":42.8499800812,"longitude":-2.66997684876,"name":"Vitoria","country":"Spain","pop":224578}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-2.429991,36.830348]},"properties":{"latitude":36.8303475129,"longitude":-2.42999149719,"name":"Almeria","country":"Spain","pop":179405}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-13.537833,28.969049]},"properties":{"latitude":28.9690492304,"longitude":-13.5378328307,"name":"Arrecife","country":"Spain","pop":52944}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-0.050008,39.970414]},"properties":{"latitude":39.9704142446,"longitude":-0.05000756977,"name":"Castello","country":"Spain","pop":180610}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-5.306999,35.888984]},"properties":{"latitude":35.888983784,"longitude":-5.30699935039,"name":"Ceuta","country":"Spain","pop":78674}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-6.337998,38.912004]},"properties":{"latitude":38.9120040184,"longitude":-6.33799751231,"name":"Merida","country":"Spain","pop":52423}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-2.929987,43.249982]},"properties":{"latitude":43.2499815054,"longitude":-2.92998681783,"name":"Bilbao","country":"Spain","pop":875552}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-16.250001,28.469979]},"properties":{"latitude":28.4699792674,"longitude":-16.2500006525,"name":"Santa Cruz de Tenerife","country":"Spain","pop":336061}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.750031,41.650002]},"properties":{"latitude":41.650001647,"longitude":-4.75003076315,"name":"Valladolid","country":"Spain","pop":322304}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-6.969973,38.880429]},"properties":{"latitude":38.8804290965,"longitude":-6.96997277976,"name":"Badajoz","country":"Spain","pop":140133}},{"type":"Feature","geometry":{"type":"Point","coordinates":[1.249991,41.12037]},"properties":{"latitude":41.1203698924,"longitude":1.24999059918,"name":"Tarragona","country":"Spain","pop":126291}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.633355,38.08332]},"properties":{"latitude":38.0833201284,"longitude":-3.63335473776,"name":"Linares","country":"Spain","pop":59761}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.585011,37.164978]},"properties":{"latitude":37.1649782502,"longitude":-3.58501143535,"name":"Granada","country":"Spain","pop":388290}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-6.225005,36.534991]},"properties":{"latitude":36.5349908641,"longitude":-6.22500533184,"name":"Cadiz","country":"Spain","pop":283157}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-1.979993,43.320391]},"properties":{"latitude":43.3203906444,"longitude":-1.97999312479,"name":"San Sebastián","country":"Spain","pop":357468}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.88333,36.51662]},"properties":{"latitude":36.5166198924,"longitude":-4.88333012025,"name":"Marbella","country":"Spain","pop":186131}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-5.829991,43.350492]},"properties":{"latitude":43.3504921662,"longitude":-5.8299906834,"name":"Oviedo","country":"Spain","pop":235651}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-2.950011,35.300002]},"properties":{"latitude":35.300001647,"longitude":-2.95001143535,"name":"Melilla","country":"Spain","pop":141308}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.166587,40.633707]},"properties":{"latitude":40.6337070913,"longitude":-3.16658736308,"name":"Guadalajara","country":"Spain","pop":72850}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-0.401958,39.486963]},"properties":{"latitude":39.4850175161,"longitude":-0.40001204569,"name":"Valencia","country":"Spain","pop":808000}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.679967,42.350398]},"properties":{"latitude":42.3503981721,"longitude":-3.67996687968,"name":"Burgos","country":"Spain","pop":170183}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-1.129967,37.979993]},"properties":{"latitude":37.9799931021,"longitude":-1.12996749003,"name":"Murcia","country":"Spain","pop":406807}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-8.729995,42.220019]},"properties":{"latitude":42.2200185334,"longitude":-8.72999454898,"name":"Vigo","country":"Spain","pop":378952}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-8.419988,43.329977]},"properties":{"latitude":43.3299766226,"longitude":-8.41998763166,"name":"La Coruña","country":"Spain","pop":370610}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-5.67,40.970405]},"properties":{"latitude":40.9704048859,"longitude":-5.67000044903,"name":"Salamanca","country":"Spain","pop":162353}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-0.889982,41.650002]},"properties":{"latitude":41.650001647,"longitude":-0.88998213846,"name":"Zaragoza","country":"Spain","pop":649404}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.799985,37.770393]},"properties":{"latitude":37.7703934927,"longitude":-3.79998539368,"name":"Jaén","country":"Spain","pop":116400}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-8.541091,42.882898]},"properties":{"latitude":42.8828979686,"longitude":-8.54109135073,"name":"Santiago de Compostela","country":"Spain","pop":92430}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.685298,40.401972]},"properties":{"latitude":40.4000262645,"longitude":-3.683351686,"name":"Madrid","country":"Spain","pop":5567000}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-5.570007,42.579971]},"properties":{"latitude":42.5799707225,"longitude":-5.57000655254,"name":"Leon","country":"Spain","pop":136227}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.419999,36.720406]},"properties":{"latitude":36.7204059032,"longitude":-4.41999922832,"name":"Malaga","country":"Spain","pop":550058}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.016716,39.867036]},"properties":{"latitude":39.8670355418,"longitude":-4.01671635071,"name":"Toledo","country":"Spain","pop":74632}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-0.483641,38.35122]},"properties":{"latitude":38.3512198953,"longitude":-0.48364072142,"name":"Alicante","country":"Spain","pop":315863}}]}

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>CARTO VL & Airship with GeoJSON data source</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        
        <!-- Include CSS  -->
        <link rel="stylesheet" href="https://libs.cartocdn.com/airship-style/v2.1.0/airship.css">
        <!-- Include Icons -->
        <link rel="stylesheet" href="https://libs.cartocdn.com/airship-icons/v2.1.0/icons.css">
        <!-- Include Web Components -->
        <script src="https://libs.cartocdn.com/airship-components/v2.1.0/airship.js"></script>

        <!-- Include CARTO VL JS -->
        <script src="https://libs.cartocdn.com/carto-vl/v1.3.1/carto-vl.min.js"></script>
        <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
        <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
        
        <script src='cities.js' type='text/javascript'></script>
    
    </head>
    <body class="as-app-body">
        <div class="as-app">
            <div class="as-content">
                <main class="as-main">
                    <div class="as-map-area">
                        <div id="map"></div>
                    </div>
                </main>
                <aside class="as-sidebar as-sidebar--right">
                    <as-category-widget
                        id="cities-widget"
                        heading="Populated places"
                        description="Maximun population of the most populated cities in Spain"
                        visible-categories="5">
                    </as-category-widget>
                </aside>
            </div>
        </div>

        <script src='main.js'></script>

    </body>
</html>

main.js

const map = new mapboxgl.Map({
    container: 'map',
    style: carto.basemaps.voyager,
    center: [-3, 40],
    zoom: 5,
    scrollZoom: false,
    dragRotate: false,
    touchZoomRotate: false
  });

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

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

// Define layer
const source = new carto.source.GeoJSON(cities);
const viz = new carto.Viz(`
    @cities: viewportFeatures($pop, $name),
`);
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');

const $categoryWidget = document.querySelector('#cities-widget');
layer.on('updated', updateWidgets);

function updateWidgets() {
    $categoryWidget.categories = viz.variables.cities.value
      .map(feature => ({
        name: feature.properties.name,
        value: feature.properties.pop,
      }))
      .sort((a, b) => b.value - a.value);
  };