-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathtesting.html
119 lines (109 loc) · 4.26 KB
/
testing.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!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/v1.6.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.0/mapbox-gl.css' rel='stylesheet' />
<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 = 'pk.eyJ1IjoiaXNhYWN2IiwiYSI6ImNrMnpqYnVxaTA1b3IzbXBnaG5zY3o3eTEifQ.kMdIcXYBFKHTorj3Hxgi7g';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
center: [-99.9, 41.5],
zoom: 1
});
// Join local JSON data with vector tile geometry
// USA unemployment rate in 2009
// Source https://data.bls.gov/timeseries/LNS14000000
var maxValue = 13;
var data = [
{"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() {
// Add source for state polygons hosted on Mapbox, based on US Census Data:
// https://www.census.gov/geo/maps-data/data/cbf/cbf_state.html
map.addSource("states", { //"units"?
type: "geojson", //type: "geojson",?
url: "geoJSON/battleOfTheBulge.json" // "geoJSON/battleOfTheBulge.json"?
});
var expression = ["match", ["get", "SymbolID"]]; //"SymbolID"?
// Calculate color for each state based on the unemployment rate
data.forEach(function(row) {
var icon = 'url(img/icons/' + expression.join('/') + '/)'; //var icon = 'url(https://placekitten.com/g/' + marker.properties.iconSize.join('/') + '/)';?
expression.push(row["SymbolID"], icon); //["SymbolID"], icon);?
});
// Last value is the default, used where there is no data
expression.push("img/icons/Friendly_Unit_Infantry.png"); //Image URL?
// Add layer from the vector tile source with data-driven style
map.addLayer({
"id": "states-join", //??
"type": "symbol", //symbol?
"source": "states", //"units"?
"source-layer": "states", //"units"?
"layout": { //layout?
"icon-image": expression //"icon-image": expression?
}
}, 'waterway-label'); //comment out?
});
</script>
</body>
</html>