Join local JSON data with vector tile geometries | Mapbox GL JS

Style a choropleth by merging local JSON data with vector tile geometries.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Join local JSON data with vector tile geometries</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
<style>
	body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
	// TO MAKE THE MAP APPEAR YOU MUST
	// ADD YOUR ACCESS TOKEN FROM
	// https://account.mapbox.com
	mapboxgl.accessToken = '<your access token here>';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
center: [12, 50],
zoom: 1.6
});
 
// Data: UN Human Development Index 2017 Europe extract
// Source: https://ourworldindata.org/human-development-index
var data = [{ "code": "ROU", "hdi": 0.811 },
{ "code": "RUS", "hdi": 0.816 },
{ "code": "SRB", "hdi": 0.787 },
{ "code": "SVK", "hdi": 0.855 },
{ "code": "SVN", "hdi": 0.896 },
{ "code": "ESP", "hdi": 0.891 },
{ "code": "SWE", "hdi": 0.933 },
{ "code": "CHE", "hdi": 0.944 },
{ "code": "HRV", "hdi": 0.831 },
{ "code": "CZE", "hdi": 0.888 },
{ "code": "DNK", "hdi": 0.929 },
{ "code": "EST", "hdi": 0.871 },
{ "code": "FIN", "hdi": 0.92 },
{ "code": "FRA", "hdi": 0.901 },
{ "code": "DEU", "hdi": 0.936 },
{ "code": "GRC", "hdi": 0.87 },
{ "code": "ALB", "hdi": 0.785 },
{ "code": "AND", "hdi": 0.858 },
{ "code": "AUT", "hdi": 0.908 },
{ "code": "BLR", "hdi": 0.808 },
{ "code": "BEL", "hdi": 0.916 },
{ "code": "BIH", "hdi": 0.768 },
{ "code": "BGR", "hdi": 0.813 },
{ "code": "MKD", "hdi": 0.757 },
{ "code": "MLT", "hdi": 0.878 },
{ "code": "MDA", "hdi": 0.7 },
{ "code": "MNE", "hdi": 0.814 },
{ "code": "NLD", "hdi": 0.931 },
{ "code": "NOR", "hdi": 0.953 },
{ "code": "POL", "hdi": 0.865 },
{ "code": "PRT", "hdi": 0.847 },
{ "code": "HUN", "hdi": 0.838 },
{ "code": "ISL", "hdi": 0.935 },
{ "code": "IRL", "hdi": 0.938 },
{ "code": "ITA", "hdi": 0.88 },
{ "code": "LVA", "hdi": 0.847 },
{ "code": "LIE", "hdi": 0.916 },
{ "code": "LTU", "hdi": 0.858 },
{ "code": "LUX", "hdi": 0.904 },
{ "code": "UKR", "hdi": 0.751 },
{ "code": "GBR", "hdi": 0.922 } ]
 
map.on('load', function () {
 
// Add source for country polygons using the Mapbox Countries tileset
// The polygons contain an ISO 3166 alpha-3 code which can be used to for joining the data
// https://docs.mapbox.com/vector-tiles/reference/mapbox-countries-v1
map.addSource('countries', {
type: 'vector',
url: 'mapbox://mapbox.country-boundaries-v1'
});
 
// Build a GL match expression that defines the color for every vector tile feature
// Use the ISO 3166-1 alpha 3 code as the lookup key for the country shape
var matchExpression = ['match', ['get', 'iso_3166_1_alpha_3']];
 
// Calculate color values for each country based on 'hdi' value
data.forEach(function (row) {
 
// Convert the range of data values to a suitable color
var green = row['hdi'] * 255;
var color = 'rgb(0, '+ green + ', 0)';
 
matchExpression.push(row['code'], color);
 
});
 
// Last value is the default, used where there is no data
matchExpression.push('rgba(0, 0, 0, 0)');
 
// Add layer from the vector tile source to create the choropleth
// Insert it below the 'admin-1-boundary-bg' layer in the style
map.addLayer({
'id': 'countries-join',
'type': 'fill',
'source': 'countries',
'source-layer': 'country_boundaries',
'paint': {
'fill-color': matchExpression
}
}, 'admin-1-boundary-bg');
 
});
 
</script>
 
</body>
</html>