I am using Airship and carto-vl while working through this tutorial and the values in the widget are coming back as NaN. Here is my code:
<!DOCTYPE html>
<html>
<head>
<!-- Include CSS elements -->
<link rel="stylesheet" href="https://libs.cartocdn.com/airship-style/v1.0.3/airship.css">
<!-- Include icons -->
<link rel="stylesheet" href="https://libs.cartocdn.com/airship-icons/v1.0.3/icons.css">
<!-- Include airship components -->
<script src="https://libs.cartocdn.com/airship-components/v1.0.3/airship.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" />
<!-- Include CARTO VL JS -->
<script src="https://libs.cartocdn.com/carto-vl/v1.1.1/carto-vl.min.js"></script>
<title>Airship Testing</title>
</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 pouplated cities">
</as-category-widget>
</aside>
</div>
</div>
<!-- CARTO basemap -->
<script>
const map = new mapboxgl.Map({
container: 'map',
style: 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json',
center: [0, 30],
zoom: 2,
scrollZoom: true,
dragRotate: false,
touchZoomRotate: false
});
// Define user
carto.setDefaultAuth({
user: 'cartovl',
apiKey: 'default_public'
});
// Define layer
const source = new carto.source.Dataset('ne_10m_populated_places_simple');
const viz = new carto.Viz(`
@cities: viewportFeatures($pop_max, $name)
`);
const layer = new carto.Layer('layer', source, viz);
const $categoryWidget = document.querySelector('#cities-widget');
function updateWidgets() {
$categoryWidget.categories = viz.variables.cities.value
.map(feature => ({
name: feature.name,
value: feature.pop_max,
}))
.sort((a, b) => b.value - a.value);
};
console.log(updateWidgets());
layer.on('updated', updateWidgets);
layer.addTo(map, 'watername_ocean');
</script>
</body>
</html>
Here is what the app looks like:
Why are the values of the table not returning?
I thought there might be a bug in the tutorial, but I transferred the same methodologies over to a personal project and I got the same results.