> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-gl-js/ja/llms.txt)
# Join local JSON data with vector tile geometries
This example demonstrates how to create a data-driven choropleth map by joining local JSON data with geometries from a [vector tileset](https://docs.mapbox.com/data/tilesets/guides/vector-tiles-introduction/).
[Mapbox Countries](https://docs.mapbox.com/vector-tiles/reference/mapbox-countries-v1/) is a free vector tileset hosted by Mapbox that contains polygon geometries for counties around the world. This example shows how to join these country geometries with your own local data using a common identifier (in this case, a [three-letter ISO country code](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-3)). By using a [`match`](https://docs.mapbox.com/style-spec/reference/expressions/#match) expression, the fill color for the country polygons becomes data-driven, styling each country based on values from your local JSON data.
> Example code:
**JavaScript**
```html
Join local JSON data with vector tile geometries
```
**React**
```jsx
import React, { useEffect, useRef } from 'react';
import * as mapboxgl from 'mapbox-gl/esm';
import 'mapbox-gl/dist/mapbox-gl.css';
const MapboxExample = () => {
const mapContainerRef = useRef();
const mapRef = useRef();
useEffect(() => {
mapRef.current = new mapboxgl.Map({
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',
container: mapContainerRef.current,
style: 'mapbox://styles/mapbox/standard',
config: {
basemap: {
theme: 'monochrome'
}
},
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 }
];
mapRef.current.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
mapRef.current.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)');
// The mapbox.country-boundaries-v1 tileset includes multiple
// polygons for some countries with disputed borders. The
// following expression filters the map view to show the
// "US" perspective of borders for disputed countries.
// Other world views are available, for more details, see
// the documentation on the "worldview" feature property at
// https://docs.mapbox.com/data/tilesets/reference/mapbox-countries-v1/#--polygon---worldview-text
const WORLDVIEW = 'US';
const worldview_filter = [
'all',
['==', ['get', 'disputed'], 'false'],
[
'any',
['==', 'all', ['get', 'worldview']],
['in', WORLDVIEW, ['get', 'worldview']]
]
];
// Add layer from the vector tile source to create the choropleth
// Insert it below the 'admin-1-boundary-bg' layer in the style
mapRef.current.addLayer({
id: 'countries-join',
type: 'fill',
slot: 'middle',
source: 'countries',
'source-layer': 'country_boundaries',
paint: {
'fill-color': matchExpression
},
filter: worldview_filter
});
});
return () => {
mapRef.current.remove();
};
}, []);
return ;
};
export default MapboxExample;
```