samgehret/index.html

## index.html
<!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.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.css' rel='stylesheet' />
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.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>
      mapboxgl.accessToken = '<your access token here>';
      var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/light-v9',
        center: [-99.9, 41.5],
        zoom: 1
      });

      // Join local JSON data with vector tile geometry
      // unemployment rate in 2009
      // Source https://data.bls.gov/timeseries/LNS14000000
      var maxValue = 14;
      var localData = [
        { STATE_ID: '01', unemployment: 13.17 },
        { STATE_ID: '02', unemployment: 9.5 },
        { STATE_ID: '04', unemployment: 12.15 },
        { STATE_ID: '05', unemployment: 8.99 },
        { STATE_ID: '06', unemployment: 11.83 },
        { STATE_ID: '08', unemployment: 7.52 },
        { STATE_ID: '09', unemployment: 6.44 },
        { STATE_ID: '10', unemployment: 5.17 },
        { STATE_ID: '12', unemployment: 9.67 },
        { STATE_ID: '13', unemployment: 10.64 },
        { STATE_ID: '15', unemployment: 12.38 },
        { STATE_ID: '16', unemployment: 10.13 },
        { STATE_ID: '17', unemployment: 9.58 },
        { STATE_ID: '18', unemployment: 10.63 },
        { STATE_ID: '19', unemployment: 8.09 },
        { STATE_ID: '20', unemployment: 5.93 },
        { STATE_ID: '21', unemployment: 9.86 },
        { STATE_ID: '22', unemployment: 9.81 },
        { STATE_ID: '23', unemployment: 7.82 },
        { STATE_ID: '24', unemployment: 8.35 },
        { STATE_ID: '25', unemployment: 9.1 },
        { STATE_ID: '26', unemployment: 10.69 },
        { STATE_ID: '27', unemployment: 11.53 },
        { STATE_ID: '28', unemployment: 9.29 },
        { STATE_ID: '29', unemployment: 9.94 },
        { STATE_ID: '30', unemployment: 9.29 },
        { STATE_ID: '31', unemployment: 5.45 },
        { STATE_ID: '32', unemployment: 4.21 },
        { STATE_ID: '33', unemployment: 4.27 },
        { STATE_ID: '34', unemployment: 4.09 },
        { STATE_ID: '35', unemployment: 7.83 },
        { STATE_ID: '36', unemployment: 8.01 },
        { STATE_ID: '37', unemployment: 9.34 },
        { STATE_ID: '38', unemployment: 11.23 },
        { STATE_ID: '39', unemployment: 7.08 },
        { STATE_ID: '40', unemployment: 11.22 },
        { STATE_ID: '41', unemployment: 6.2 },
        { STATE_ID: '42', unemployment: 9.11 },
        { STATE_ID: '44', unemployment: 10.42 },
        { STATE_ID: '45', unemployment: 8.89 },
        { STATE_ID: '46', unemployment: 11.03 },
        { STATE_ID: '47', unemployment: 7.35 },
        { STATE_ID: '48', unemployment: 8.92 },
        { STATE_ID: '49', unemployment: 7.65 },
        { STATE_ID: '50', unemployment: 8.01 },
        { STATE_ID: '51', unemployment: 7.62 },
        { STATE_ID: '53', unemployment: 7.77 },
        { STATE_ID: '54', unemployment: 8.49 },
        { STATE_ID: '55', unemployment: 9.42 },
        { STATE_ID: '56', unemployment: 7.59 }
      ];

      map.on('load', function() {
        $.ajax({
          method: 'GET',
          dataType: 'json',
          url: 'URL_TO_LOOKUP_TABLE',
        }).done(function(data) {
          createViz(data);
        });
      });

      function createViz(lookupData) {
        var dataValues = lookupData.data;
        // Add Mapbox Enterprise Boundaries source for state polygons.
        map.addSource('statesData', {
          type: 'vector',
          url: 'mapbox://mapbox.enterprise-boundaries-a1-v2'
        });

        // Add layer from the vector tile source with data-driven style
        // Use a feature-state dependent expression to compute the the green color band based on
        //  the unemployment percentage
        map.addLayer({
          id: 'states-join',
          type: 'fill',
          source: 'statesData',
          'source-layer': 'boundaries_admin_1',
          paint: {
            'fill-color':
            ['case',
              ['!=', ['feature-state', 'unemployment'], null],
              ['interpolate', ['linear'], ['feature-state', 'unemployment'], 4, 'rgba(222,235,247,1)', 14, 'rgba(49,130,189,1)'],
              'rgba(255, 255, 255, 0)'
            ]
          }
        }, 'waterway-label');

        // Join the JSON unemployment data with the corresponding vector features where
        // feautre.id === 'USA1' + `STATE_ID`.
        function setStates(e) {
          localData.forEach(function(row) {
            map.setFeatureState({ source: 'statesData', sourceLayer: 'boundaries_admin_1', id: dataValues['USA1' + row.STATE_ID].id_int }, { unemployment: row.unemployment });
          });
        }

        // Check if `statesData` source is loaded.
        function setAfterLoad(e) {
          if (e.sourceId === 'statesData' && e.isSourceLoaded) {
            setStates();
            map.off('sourcedata', setAfterLoad);
          }
        }

        // If `statesData` source is loaded, call `setStates()`.
        if (map.isSourceLoaded('statesData')) {
          setStates();
        } else {
          map.on('sourcedata', setAfterLoad);
        }
      }
    </script>
  </body>
</html>
	<!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.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.css' rel='stylesheet' />
	<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.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>
	mapboxgl.accessToken = '<your access token here>';
	var map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/mapbox/light-v9',
	center: [-99.9, 41.5],
	zoom: 1
	});

	// Join local JSON data with vector tile geometry
	// unemployment rate in 2009
	// Source https://data.bls.gov/timeseries/LNS14000000
	var maxValue = 14;
	var localData = [
	{ STATE_ID: '01', unemployment: 13.17 },
	{ STATE_ID: '02', unemployment: 9.5 },
	{ STATE_ID: '04', unemployment: 12.15 },
	{ STATE_ID: '05', unemployment: 8.99 },
	{ STATE_ID: '06', unemployment: 11.83 },
	{ STATE_ID: '08', unemployment: 7.52 },
	{ STATE_ID: '09', unemployment: 6.44 },
	{ STATE_ID: '10', unemployment: 5.17 },
	{ STATE_ID: '12', unemployment: 9.67 },
	{ STATE_ID: '13', unemployment: 10.64 },
	{ STATE_ID: '15', unemployment: 12.38 },
	{ STATE_ID: '16', unemployment: 10.13 },
	{ STATE_ID: '17', unemployment: 9.58 },
	{ STATE_ID: '18', unemployment: 10.63 },
	{ STATE_ID: '19', unemployment: 8.09 },
	{ STATE_ID: '20', unemployment: 5.93 },
	{ STATE_ID: '21', unemployment: 9.86 },
	{ STATE_ID: '22', unemployment: 9.81 },
	{ STATE_ID: '23', unemployment: 7.82 },
	{ STATE_ID: '24', unemployment: 8.35 },
	{ STATE_ID: '25', unemployment: 9.1 },
	{ STATE_ID: '26', unemployment: 10.69 },
	{ STATE_ID: '27', unemployment: 11.53 },
	{ STATE_ID: '28', unemployment: 9.29 },
	{ STATE_ID: '29', unemployment: 9.94 },
	{ STATE_ID: '30', unemployment: 9.29 },
	{ STATE_ID: '31', unemployment: 5.45 },
	{ STATE_ID: '32', unemployment: 4.21 },
	{ STATE_ID: '33', unemployment: 4.27 },
	{ STATE_ID: '34', unemployment: 4.09 },
	{ STATE_ID: '35', unemployment: 7.83 },
	{ STATE_ID: '36', unemployment: 8.01 },
	{ STATE_ID: '37', unemployment: 9.34 },
	{ STATE_ID: '38', unemployment: 11.23 },
	{ STATE_ID: '39', unemployment: 7.08 },
	{ STATE_ID: '40', unemployment: 11.22 },
	{ STATE_ID: '41', unemployment: 6.2 },
	{ STATE_ID: '42', unemployment: 9.11 },
	{ STATE_ID: '44', unemployment: 10.42 },
	{ STATE_ID: '45', unemployment: 8.89 },
	{ STATE_ID: '46', unemployment: 11.03 },
	{ STATE_ID: '47', unemployment: 7.35 },
	{ STATE_ID: '48', unemployment: 8.92 },
	{ STATE_ID: '49', unemployment: 7.65 },
	{ STATE_ID: '50', unemployment: 8.01 },
	{ STATE_ID: '51', unemployment: 7.62 },
	{ STATE_ID: '53', unemployment: 7.77 },
	{ STATE_ID: '54', unemployment: 8.49 },
	{ STATE_ID: '55', unemployment: 9.42 },
	{ STATE_ID: '56', unemployment: 7.59 }
	];

	map.on('load', function() {
	$.ajax({
	method: 'GET',
	dataType: 'json',
	url: 'URL_TO_LOOKUP_TABLE',
	}).done(function(data) {
	createViz(data);
	});
	});

	function createViz(lookupData) {
	var dataValues = lookupData.data;
	// Add Mapbox Enterprise Boundaries source for state polygons.
	map.addSource('statesData', {
	type: 'vector',
	url: 'mapbox://mapbox.enterprise-boundaries-a1-v2'
	});

	// Add layer from the vector tile source with data-driven style
	// Use a feature-state dependent expression to compute the the green color band based on
	// the unemployment percentage
	map.addLayer({
	id: 'states-join',
	type: 'fill',
	source: 'statesData',
	'source-layer': 'boundaries_admin_1',
	paint: {
	'fill-color':
	['case',
	['!=', ['feature-state', 'unemployment'], null],
	['interpolate', ['linear'], ['feature-state', 'unemployment'], 4, 'rgba(222,235,247,1)', 14, 'rgba(49,130,189,1)'],
	'rgba(255, 255, 255, 0)'
	]
	}
	}, 'waterway-label');

	// Join the JSON unemployment data with the corresponding vector features where
	// feautre.id === 'USA1' + `STATE_ID`.
	function setStates(e) {
	localData.forEach(function(row) {
	map.setFeatureState({ source: 'statesData', sourceLayer: 'boundaries_admin_1', id: dataValues['USA1' + row.STATE_ID].id_int }, { unemployment: row.unemployment });
	});
	}

	// Check if `statesData` source is loaded.
	function setAfterLoad(e) {
	if (e.sourceId === 'statesData' && e.isSourceLoaded) {
	setStates();
	map.off('sourcedata', setAfterLoad);
	}
	}

	// If `statesData` source is loaded, call `setStates()`.
	if (map.isSourceLoaded('statesData')) {
	setStates();
	} else {
	map.on('sourcedata', setAfterLoad);
	}
	}
	</script>
	</body>
	</html>