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.

JavaScript

React

JavaScript

React


<!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/v3.8.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.8.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)');

        // 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
        map.addLayer(
            {
                'id': 'countries-join',
                'type': 'fill',
                'source': 'countries',
                'source-layer': 'country_boundaries',
                'paint': {
                    'fill-color': matchExpression
                },
                'filter': worldview_filter
            },
            'admin-1-boundary-bg'
        );
    });
</script>

</body>
</html>

このコードスニペットは、YOUR_MAPBOX_ACCESS_TOKENをあなたのMapboxアカウントのアクセストークンに置き換えるまで、期待通りに動作しません。

JavaScript

React


import React, { useEffect, useRef } from 'react';
import mapboxgl from 'mapbox-gl';

import 'mapbox-gl/dist/mapbox-gl.css';

const MapboxExample = () => {
  const mapContainerRef = useRef();
  const mapRef = useRef();

  useEffect(() => {
    // TO MAKE THE MAP APPEAR YOU MUST
    // ADD YOUR ACCESS TOKEN FROM
    // https://account.mapbox.com
    mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';

    mapRef.current = new mapboxgl.Map({
      container: mapContainerRef.current,
      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 }
    ];

    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',
          source: 'countries',
          'source-layer': 'country_boundaries',
          paint: {
            'fill-color': matchExpression
          },
          filter: worldview_filter
        },
        'admin-1-boundary-bg'
      );
    });

    return () => {
      mapRef.current.remove();
    };
  }, []);

  return <div ref={mapContainerRef} id="map" style={{ height: '100%' }} />;
};

export default MapboxExample;

このコードスニペットは、YOUR_MAPBOX_ACCESS_TOKENをあなたのMapboxアカウントのアクセストークンに置き換えるまで、期待通りに動作しません。

追加の開発者リソース

このexampleは役に立ちましたか？