Created
October 1, 2018 23:04
-
-
Save samgehret/33f56bd27e8610fa111ac09ec7865dbd to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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 Token'; | |
| 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 () { | |
| createViz(); | |
| }); | |
| function createViz() { | |
| var dataValues = { | |
| "USA101": { | |
| "id_int": 434983504, | |
| "worldview": "all", | |
| "name": "Alabama", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-86.7419, 32.6474], | |
| "bounds": [-88.4732, 30.194, -84.8882, 35.008] | |
| }, | |
| "USA102": { | |
| "id_int": 1135903971, | |
| "worldview": "all", | |
| "name": "Alaska", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-151.0525, 64.3012], | |
| "bounds": [-179.1448, 51.2158, 179.7749, 71.3904] | |
| }, | |
| "USA104": { | |
| "id_int": 382128602, | |
| "worldview": "all", | |
| "name": "Arizona", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-111.6252, 34.2195], | |
| "bounds": [-114.8166, 31.3322, -109.0452, 37.0043] | |
| }, | |
| "USA105": { | |
| "id_int": 17506528, | |
| "worldview": "all", | |
| "name": "Arkansas", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-92.4991, 34.7706], | |
| "bounds": [-94.6179, 33.0041, -89.6448, 36.4996] | |
| }, | |
| "USA106": { | |
| "id_int": 316443879, | |
| "worldview": "all", | |
| "name": "California", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-120.105, 37.4213], | |
| "bounds": [-124.415, 32.5343, -114.1312, 42.0095] | |
| }, | |
| "USA108": { | |
| "id_int": 1302221190, | |
| "worldview": "all", | |
| "name": "Colorado", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-105.5493, 39.0235], | |
| "bounds": [-109.0603, 36.9924, -102.0415, 41.0034] | |
| }, | |
| "USA109": { | |
| "id_int": 1604740888, | |
| "worldview": "all", | |
| "name": "Connecticut", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-72.8054, 41.5205], | |
| "bounds": [-73.7278, 40.9805, -71.7872, 42.0506] | |
| }, | |
| "USA110": { | |
| "id_int": 918769382, | |
| "worldview": "all", | |
| "name": "Delaware", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-75.5801, 39.1486], | |
| "bounds": [-75.7891, 38.451, -75.0487, 39.8395] | |
| }, | |
| "USA111": { | |
| "id_int": 167595239, | |
| "worldview": "all", | |
| "name": "District of Columbia", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-76.9882, 38.894], | |
| "bounds": [-77.1198, 38.7916, -76.9094, 38.9956] | |
| }, | |
| "USA112": { | |
| "id_int": 1346515098, | |
| "worldview": "all", | |
| "name": "Florida", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-81.6064, 28.0182], | |
| "bounds": [-87.6349, 24.5211, -80.0312, 31.001] | |
| }, | |
| "USA113": { | |
| "id_int": 1952545968, | |
| "worldview": "all", | |
| "name": "Georgia", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-83.272, 32.7084], | |
| "bounds": [-85.6052, 30.3556, -80.8405, 35.0007] | |
| }, | |
| "USA115": { | |
| "id_int": 1692184764, | |
| "worldview": "all", | |
| "name": "Hawaii", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-155.4494, 19.591], | |
| "bounds": [-178.3386, 18.9107, -154.8066, 28.4018] | |
| }, | |
| "USA116": { | |
| "id_int": 279202330, | |
| "worldview": "all", | |
| "name": "Idaho", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-115.5022, 45.6035], | |
| "bounds": [-117.243, 41.988, -111.0435, 49.0001] | |
| }, | |
| "USA117": { | |
| "id_int": 1616584409, | |
| "worldview": "all", | |
| "name": "Illinois", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-89.449, 39.7953], | |
| "bounds": [-91.5131, 36.9703, -87.4952, 42.5083] | |
| }, | |
| "USA118": { | |
| "id_int": 26325284, | |
| "worldview": "all", | |
| "name": "Indiana", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-86.1736, 39.7948], | |
| "bounds": [-88.0979, 37.7717, -84.7847, 41.7607] | |
| }, | |
| "USA119": { | |
| "id_int": 97444655, | |
| "worldview": "all", | |
| "name": "Iowa", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-93.1478, 41.9585], | |
| "bounds": [-96.6395, 40.3754, -90.1401, 43.5012] | |
| }, | |
| "USA120": { | |
| "id_int": 679281976, | |
| "worldview": "all", | |
| "name": "Kansas", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-98.3287, 38.5114], | |
| "bounds": [-102.0517, 36.9931, -94.5884, 40.0032] | |
| }, | |
| "USA121": { | |
| "id_int": 1721761141, | |
| "worldview": "all", | |
| "name": "Kentucky", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-84.7308, 37.8347], | |
| "bounds": [-89.5715, 36.4971, -81.965, 39.1475] | |
| }, | |
| "USA122": { | |
| "id_int": 1695501372, | |
| "worldview": "all", | |
| "name": "Louisiana", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-92.549, 31.0724], | |
| "bounds": [-94.0434, 28.9254, -88.8198, 33.0195] | |
| }, | |
| "USA123": { | |
| "id_int": 209249669, | |
| "worldview": "all", | |
| "name": "Maine", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-69.1353, 45.305], | |
| "bounds": [-71.0843, 42.9776, -66.9498, 47.4597] | |
| }, | |
| "USA124": { | |
| "id_int": 2051264444, | |
| "worldview": "all", | |
| "name": "Maryland", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-76.733, 38.8847], | |
| "bounds": [-79.4877, 37.9121, -75.0492, 39.723] | |
| }, | |
| "USA125": { | |
| "id_int": 1994121407, | |
| "worldview": "all", | |
| "name": "Massachusetts", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-72.0967, 42.188], | |
| "bounds": [-73.5081, 41.2389, -69.9278, 42.8868] | |
| }, | |
| "USA126": { | |
| "id_int": 879658626, | |
| "worldview": "all", | |
| "name": "Michigan", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-85.1898, 43.7777], | |
| "bounds": [-90.4181, 41.6961, -82.413, 48.2385] | |
| }, | |
| "USA127": { | |
| "id_int": 1670219456, | |
| "worldview": "all", | |
| "name": "Minnesota", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-94.5146, 46.5222], | |
| "bounds": [-97.2391, 43.4994, -89.4916, 49.3855] | |
| }, | |
| "USA128": { | |
| "id_int": 394035792, | |
| "worldview": "all", | |
| "name": "Mississippi", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-89.6934, 32.6171], | |
| "bounds": [-91.655, 30.1739, -88.0979, 34.9961] | |
| }, | |
| "USA129": { | |
| "id_int": 1183654735, | |
| "worldview": "all", | |
| "name": "Missouri", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-92.4878, 38.35], | |
| "bounds": [-95.7747, 35.9957, -89.0995, 40.6136] | |
| }, | |
| "USA130": { | |
| "id_int": 1696656392, | |
| "worldview": "all", | |
| "name": "Montana", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-109.3459, 46.7296], | |
| "bounds": [-116.05, 44.3582, -104.0396, 49.0011] | |
| }, | |
| "USA131": { | |
| "id_int": 1293072371, | |
| "worldview": "all", | |
| "name": "Nebraska", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-100.0598, 41.518], | |
| "bounds": [-104.0535, 39.9999, -95.3083, 43.0017] | |
| }, | |
| "USA132": { | |
| "id_int": 267600436, | |
| "worldview": "all", | |
| "name": "Nevada", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-116.7324, 38.5944], | |
| "bounds": [-120.0065, 35.0019, -114.0396, 42.0022] | |
| }, | |
| "USA133": { | |
| "id_int": 1778651198, | |
| "worldview": "all", | |
| "name": "New Hampshire", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-71.5461, 44.0157], | |
| "bounds": [-72.5572, 42.697, -70.6109, 45.3055] | |
| }, | |
| "USA134": { | |
| "id_int": 657547481, | |
| "worldview": "all", | |
| "name": "New Jersey", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-74.3711, 40.1537], | |
| "bounds": [-75.5598, 38.9286, -73.9025, 41.3574] | |
| }, | |
| "USA135": { | |
| "id_int": 1248048349, | |
| "worldview": "all", | |
| "name": "New Mexico", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-106.0451, 34.22], | |
| "bounds": [-109.0502, 31.3322, -103.002, 37.0003] | |
| }, | |
| "USA136": { | |
| "id_int": 1646262053, | |
| "worldview": "all", | |
| "name": "New York", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-76.0935, 42.9371], | |
| "bounds": [-79.7621, 40.4961, -71.8561, 45.0159] | |
| }, | |
| "USA137": { | |
| "id_int": 1453594182, | |
| "worldview": "all", | |
| "name": "North Carolina", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-80.4246, 35.2258], | |
| "bounds": [-84.3219, 33.8354, -75.4604, 36.5882] | |
| }, | |
| "USA138": { | |
| "id_int": 1610930559, | |
| "worldview": "all", | |
| "name": "North Dakota", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-100.4545, 47.4902], | |
| "bounds": [-104.05, 45.9351, -96.5545, 49.0006] | |
| }, | |
| "USA139": { | |
| "id_int": 1741475029, | |
| "worldview": "all", | |
| "name": "Ohio", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-82.7348, 40.2151], | |
| "bounds": [-84.8203, 38.4034, -80.5182, 41.9775] | |
| }, | |
| "USA140": { | |
| "id_int": 175013821, | |
| "worldview": "all", | |
| "name": "Oklahoma", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-97.2171, 35.3229], | |
| "bounds": [-103.0026, 33.6158, -94.4306, 37.0023] | |
| }, | |
| "USA141": { | |
| "id_int": 215136540, | |
| "worldview": "all", | |
| "name": "Oregon", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-120.5087, 44.1529], | |
| "bounds": [-124.6068, 41.9918, -116.4633, 46.291] | |
| }, | |
| "USA142": { | |
| "id_int": 1489252265, | |
| "worldview": "all", | |
| "name": "Pennsylvania", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-77.809, 41.0073], | |
| "bounds": [-80.5199, 39.7198, -74.6895, 42.2695] | |
| }, | |
| "USA144": { | |
| "id_int": 872489029, | |
| "worldview": "all", | |
| "name": "Rhode Island", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-71.6163, 41.6621], | |
| "bounds": [-71.8924, 41.1466, -71.1205, 42.0188] | |
| }, | |
| "USA145": { | |
| "id_int": 318400763, | |
| "worldview": "all", | |
| "name": "South Carolina", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-80.5675, 33.6411], | |
| "bounds": [-83.3539, 32.0348, -78.5411, 35.2155] | |
| }, | |
| "USA146": { | |
| "id_int": 739660075, | |
| "worldview": "all", | |
| "name": "South Dakota", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-100.2539, 44.2361], | |
| "bounds": [-104.0577, 42.4797, -96.4366, 45.9457] | |
| }, | |
| "USA147": { | |
| "id_int": 1176508459, | |
| "worldview": "all", | |
| "name": "Tennessee", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-86.3183, 35.835], | |
| "bounds": [-90.3103, 34.9829, -81.6469, 36.6781] | |
| }, | |
| "USA148": { | |
| "id_int": 738831401, | |
| "worldview": "all", | |
| "name": "Texas", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-99.8102, 31.32], | |
| "bounds": [-106.6456, 25.8374, -93.5081, 36.5007] | |
| }, | |
| "USA149": { | |
| "id_int": 785840375, | |
| "worldview": "all", | |
| "name": "Utah", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-111.5495, 39.5844], | |
| "bounds": [-114.053, 36.9979, -109.0411, 42.0016] | |
| }, | |
| "USA150": { | |
| "id_int": 79108927, | |
| "worldview": "all", | |
| "name": "Vermont", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-72.7756, 43.8827], | |
| "bounds": [-73.4379, 42.7268, -71.4646, 45.0167] | |
| }, | |
| "USA151": { | |
| "id_int": 1573257616, | |
| "worldview": "all", | |
| "name": "Virginia", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-78.4558, 38.018], | |
| "bounds": [-83.6754, 36.5408, -75.2421, 39.466] | |
| }, | |
| "USA153": { | |
| "id_int": 886195434, | |
| "worldview": "all", | |
| "name": "Washington", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-119.7422, 47.3014], | |
| "bounds": [-124.7641, 45.5435, -116.9156, 49.0025] | |
| }, | |
| "USA154": { | |
| "id_int": 2118038545, | |
| "worldview": "all", | |
| "name": "West Virginia", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-80.2143, 38.941], | |
| "bounds": [-82.6444, 37.2015, -77.719, 40.6388] | |
| }, | |
| "USA155": { | |
| "id_int": 723037648, | |
| "worldview": "all", | |
| "name": "Wisconsin", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-90.368, 44.7706], | |
| "bounds": [-92.8894, 42.4919, -86.764, 47.0809] | |
| }, | |
| "USA156": { | |
| "id_int": 1433988015, | |
| "worldview": "all", | |
| "name": "Wyoming", | |
| "description": "state", | |
| "source_date": "2015", | |
| "parent_0": "US", | |
| "z_min": 0, | |
| "centroid": [-107.5486, 43.0364], | |
| "bounds": [-111.0569, 40.9947, -104.0522, 45.0059] | |
| } | |
| } | |
| // 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) { | |
| console.log('calling set states') | |
| localData.forEach(function (row) { | |
| console.log(dataValues['USA1' + row.STATE_ID].id_int) | |
| map.setFeatureState({ | |
| source: 'statesData', | |
| sourceLayer: 'boundaries_admin_1', | |
| id: dataValues['USA1' + row.STATE_ID].id_int | |
| }, { | |
| unemployment: row.unemployment | |
| }); | |
| }); | |
| map.on('click', function (e) { | |
| var features = map.queryRenderedFeatures(e.point, { layers: ['states-join'] }); | |
| console.log(features) | |
| }); | |
| } | |
| // Check if `statesData` source is loaded. | |
| setStates(); | |
| // If `statesData` source is loaded, call `setStates()`. | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment