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

This example styles a choropleth map by merging local JSON data with vector tile geometries.
It uses the match expression to join the Mapbox Countries vector tileset with local JSON data by using a three-letter ISO country code as the lookup key for the country shape.
<!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">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.11.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.11.0/mapbox-gl.js"></script>
<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_MAPBOX_ACCESS_TOKEN';
const map = new mapboxgl.Map({
container: 'map',
// Choose from Mapbox's core styles, or make your own style with Mapbox Studio
style: 'mapbox://styles/mapbox/light-v11',
center: [12, 50],
zoom: 2.2
});
 
// Data: UN Human Development Index 2017 Europe extract
// Source: https://ourworldindata.org/human-development-index
const 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', () => {
// 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
const matchExpression = ['match', ['get', 'iso_3166_1_alpha_3']];
 
// Calculate color values for each country based on 'hdi' value
for (const row of data) {
// Convert the range of data values to a suitable color
const green = row['hdi'] * 255;
const 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>