Hugging Face's logo

Spaces:
fredmo
/
gcp-gpu-tpu-map
Running

App Files Community
fredmo commited on
Commit
6acf70c
·
verified ·
1 Parent(s): 81e77cc

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +389 -19
index.html CHANGED
@@ -1,19 +1,389 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>GCP Datacenter Accelerator Map</title>
7
+ <script src="https://cesium.com/downloads/cesiumjs/releases/1.117/Build/Cesium/Cesium.js"></script>
8
+ <link href="https://cesium.com/downloads/cesiumjs/releases/1.117/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
9
+ <style>
10
+ html, body, #cesiumContainer {
11
+ width: 100%;
12
+ height: 100%;
13
+ margin: 0;
14
+ padding: 0;
15
+ overflow: hidden;
16
+ font-family: sans-serif;
17
+ }
18
+ #controls {
19
+ position: absolute;
20
+ top: 10px;
21
+ left: 10px;
22
+ background: rgba(40, 40, 40, 0.8);
23
+ padding: 10px;
24
+ border-radius: 5px;
25
+ color: white;
26
+ z-index: 1;
27
+ }
28
+ #controls label {
29
+ margin-right: 5px;
30
+ }
31
+ #infoBox {
32
+ position: absolute;
33
+ bottom: 10px;
34
+ left: 10px;
35
+ background: rgba(40, 40, 40, 0.8);
36
+ padding: 10px;
37
+ border-radius: 5px;
38
+ color: white;
39
+ z-index: 1;
40
+ max-width: 300px;
41
+ display: none; /* Hidden by default */
42
+ }
43
+ #infoBox h3 {
44
+ margin-top: 0;
45
+ }
46
+ </style>
47
+ </head>
48
+ <body>
49
+ <div id="cesiumContainer"></div>
50
+ <div id="controls">
51
+ <label for="acceleratorFilter">Filter by Accelerator:</label>
52
+ <select id="acceleratorFilter">
53
+ <option value="all">All Accelerators</option>
54
+ </select>
55
+ </div>
56
+ <div id="infoBox">
57
+ <h3>Location Details</h3>
58
+ <p id="locationName"></p>
59
+ <p><strong>Region ID(s):</strong> <span id="regionId"></span></p>
60
+ <p><strong>Zone(s):</strong> <span id="zoneId"></span></p>
61
+ <p><strong>Available Accelerators here:</strong></p>
62
+ <ul id="acceleratorList"></ul>
63
+ </div>
64
+
65
+ <script>
66
+ // --- Data Preparation ---
67
+ // Approximate coordinates (Latitude, Longitude)
68
+ const locations = {
69
+ "Council Bluffs, Iowa, USA": { lat: 41.2619, lon: -95.8608, accelerators: {} },
70
+ "Eemshaven, Netherlands": { lat: 53.442, lon: 6.83, accelerators: {} },
71
+ "Changhua County, Taiwan": { lat: 24.0706, lon: 120.5417, accelerators: {} },
72
+ "Columbus, Ohio, USA": { lat: 39.9612, lon: -82.9988, accelerators: {} },
73
+ "Dallas, Texas, USA": { lat: 32.7767, lon: -96.7970, accelerators: {} },
74
+ "The Dalles, Oregon, USA": { lat: 45.5946, lon: -121.1787, accelerators: {} },
75
+ "Las Vegas, Nevada, USA": { lat: 36.1699, lon: -115.1398, accelerators: {} },
76
+ "St. Ghislain, Belgium": { lat: 50.446, lon: 3.82, accelerators: {} },
77
+ "Jurong West, Singapore": { lat: 1.3398, lon: 103.7053, accelerators: {} },
78
+ "Moncks Corner, South Carolina, USA": { lat: 33.1913, lon: -80.0195, accelerators: {} },
79
+ "Ashburn, Virginia, USA": { lat: 39.0438, lon: -77.4874, accelerators: {} },
80
+ "Tokyo, Japan": { lat: 35.6895, lon: 139.6917, accelerators: {} },
81
+ "Sydney, Australia": { lat: -33.8688, lon: 151.2093, accelerators: {} },
82
+ "Toronto, Ontario, Canada": { lat: 43.6532, lon: -79.3832, accelerators: {} },
83
+ "Seoul, South Korea": { lat: 37.5665, lon: 126.9780, accelerators: {} },
84
+ "Mumbai, India": { lat: 19.0760, lon: 72.8777, accelerators: {} },
85
+ "London, UK": { lat: 51.5074, lon: -0.1278, accelerators: {} },
86
+ "Frankfurt, Germany": { lat: 50.1109, lon: 8.6821, accelerators: {} },
87
+ "Salt Lake City, Utah, USA": { lat: 40.7608, lon: -111.8910, accelerators: {} },
88
+ "Hong Kong": { lat: 22.3193, lon: 114.1694, accelerators: {} },
89
+ "Jakarta, Indonesia": { lat: -6.2088, lon: 106.8456, accelerators: {} },
90
+ "Warsaw, Poland": { lat: 52.2297, lon: 21.0122, accelerators: {} },
91
+ "Tel Aviv, Israel": { lat: 32.0853, lon: 34.7818, accelerators: {} },
92
+ "Osasco, São Paulo, Brazil": { lat: -23.5325, lon: -46.7917, accelerators: {} },
93
+ "Montréal, Québec, Canada": { lat: 45.5017, lon: -73.5673, accelerators: {} },
94
+ "Los Angeles, California, USA": { lat: 34.0522, lon: -118.2437, accelerators: {} },
95
+ "Zurich, Switzerland": { lat: 47.3769, lon: 8.5417, accelerators: {} },
96
+ "Dammam, Saudi Arabia": { lat: 26.4207, lon: 50.0888, accelerators: {} }
97
+ };
98
+
99
+ const datacenterData = [
100
+ // TPU v2
101
+ { accelerator: "TPU v2", region: "us-central1", zones: "b, c, f", location: "Council Bluffs, Iowa, USA" },
102
+ { accelerator: "TPU v2", region: "europe-west4", zones: "a", location: "Eemshaven, Netherlands" },
103
+ { accelerator: "TPU v2", region: "asia-east1", zones: "c", location: "Changhua County, Taiwan" },
104
+ // TPU v3 (many are repeated in source, assuming unique locations for now)
105
+ { accelerator: "TPU v3", region: "us-central1", zones: "a, b, f", location: "Council Bluffs, Iowa, USA" },
106
+ { accelerator: "TPU v3", region: "europe-west4", zones: "a", location: "Eemshaven, Netherlands" },
107
+ // TPU v4
108
+ { accelerator: "TPU v4", region: "us-central2", zones: "b", location: "Council Bluffs, Iowa, USA" }, // Note: Original data has "(?)"
109
+ // TPU v5e
110
+ { accelerator: "TPU v5e", region: "us-central1", zones: "a", location: "Council Bluffs, Iowa, USA" },
111
+ { accelerator: "TPU v5e", region: "us-east5", zones: "a, b, c", location: "Columbus, Ohio, USA" },
112
+ { accelerator: "TPU v5e", region: "us-south1", zones: "a", location: "Dallas, Texas, USA" },
113
+ { accelerator: "TPU v5e", region: "us-west1", zones: "c", location: "The Dalles, Oregon, USA" },
114
+ { accelerator: "TPU v5e", region: "us-west4", zones: "a", location: "Las Vegas, Nevada, USA" },
115
+ { accelerator: "TPU v5e", region: "europe-west1", zones: "b", location: "St. Ghislain, Belgium" },
116
+ { accelerator: "TPU v5e", region: "asia-southeast1", zones: "b", location: "Jurong West, Singapore" },
117
+ // TPU v5p
118
+ { accelerator: "TPU v5p", region: "us-east5", zones: "a", location: "Columbus, Ohio, USA" },
119
+ { accelerator: "TPU v5p", region: "europe-west4", zones: "b", location: "Eemshaven, Netherlands" },
120
+ // TPU v6e (Data seems to have a typo for H100 A3 Mega, correcting as TPU v6e based on position)
121
+ { accelerator: "TPU v6e", region: "us-east1", zones: "d", location: "Moncks Corner, South Carolina, USA" },
122
+ { accelerator: "TPU v6e", region: "us-east5", zones: "b", location: "Columbus, Ohio, USA" },
123
+ { accelerator: "TPU v6e", region: "europe-west4", zones: "a", location: "Eemshaven, Netherlands" },
124
+ { accelerator: "TPU v6e", region: "asia-northeast1", zones: "b", location: "Tokyo, Japan" },
125
+ // H100 A3 Mega
126
+ { accelerator: "H100 A3 Mega", region: "us-central1", zones: "a, b*, c", location: "Council Bluffs, Iowa, USA" },
127
+ { accelerator: "H100 A3 Mega", region: "us-east4", zones: "a, b, c", location: "Ashburn, Virginia, USA" },
128
+ { accelerator: "H100 A3 Mega", region: "us-west1", zones: "a, b", location: "The Dalles, Oregon, USA" },
129
+ { accelerator: "H100 A3 Mega", region: "us-west4", zones: "a", location: "Las Vegas, Nevada, USA" },
130
+ { accelerator: "H100 A3 Mega", region: "asia-northeast1", zones: "b", location: "Tokyo, Japan" },
131
+ { accelerator: "H100 A3 Mega", region: "asia-southeast1", zones: "b, c", location: "Jurong West, Singapore" },
132
+ { accelerator: "H100 A3 Mega", region: "australia-southeast1", zones: "c*", location: "Sydney, Australia" },
133
+ { accelerator: "H100 A3 Mega", region: "europe-west1", zones: "b*, c*", location: "St. Ghislain, Belgium" },
134
+ { accelerator: "H100 A3 Mega", region: "europe-west4", zones: "b, c", location: "Eemshaven, Netherlands" },
135
+ // H100 A3 High
136
+ { accelerator: "H100 A3 High", region: "us-central1", zones: "a, c", location: "Council Bluffs, Iowa, USA" },
137
+ { accelerator: "H100 A3 High", region: "us-east4", zones: "a, b", location: "Ashburn, Virginia, USA" },
138
+ { accelerator: "H100 A3 High", region: "us-east5", zones: "a", location: "Columbus, Ohio, USA" },
139
+ { accelerator: "H100 A3 High", region: "us-west1", zones: "a, b", location: "The Dalles, Oregon, USA" },
140
+ { accelerator: "H100 A3 High", region: "us-west4", zones: "a", location: "Las Vegas, Nevada, USA" },
141
+ { accelerator: "H100 A3 High", region: "asia-northeast1", zones: "b", location: "Tokyo, Japan" },
142
+ { accelerator: "H100 A3 High", region: "asia-southeast1", zones: "b, c", location: "Jurong West, Singapore" },
143
+ { accelerator: "H100 A3 High", region: "europe-west1", zones: "b*", location: "St. Ghislain, Belgium" },
144
+ // H100 A3 Edge
145
+ { accelerator: "H100 A3 Edge", region: "northamerica-northeast2", zones: "c", location: "Toronto, Ontario, Canada" },
146
+ { accelerator: "H100 A3 Edge", region: "asia-northeast1", zones: "b", location: "Tokyo, Japan" },
147
+ { accelerator: "H100 A3 Edge", region: "asia-northeast3", zones: "a, c", location: "Seoul, South Korea" },
148
+ { accelerator: "H100 A3 Edge", region: "asia-south1", zones: "c", location: "Mumbai, India" },
149
+ { accelerator: "H100 A3 Edge", region: "europe-west2", zones: "b", location: "London, UK" },
150
+ { accelerator: "H100 A3 Edge", region: "europe-west3", zones: "a", location: "Frankfurt, Germany" },
151
+ // A100 A2 Ultra
152
+ { accelerator: "A100 A2 Ultra", region: "us-central1", zones: "a, c", location: "Council Bluffs, Iowa, USA" },
153
+ { accelerator: "A100 A2 Ultra", region: "us-east4", zones: "c", location: "Ashburn, Virginia, USA" },
154
+ { accelerator: "A100 A2 Ultra", region: "us-east5", zones: "b", location: "Columbus, Ohio, USA" },
155
+ { accelerator: "A100 A2 Ultra", region: "asia-southeast1", zones: "c", location: "Jurong West, Singapore" },
156
+ { accelerator: "A100 A2 Ultra", region: "europe-west4", zones: "a, b, c", location: "Eemshaven, Netherlands" },
157
+ // A100 40GB A2 Standard
158
+ { accelerator: "A100 40GB A2 Standard", region: "us-central1", zones: "a*, b*, c*, f*", location: "Council Bluffs, Iowa, USA" },
159
+ { accelerator: "A100 40GB A2 Standard", region: "us-east1", zones: "b", location: "Moncks Corner, South Carolina, USA" },
160
+ { accelerator: "A100 40GB A2 Standard", region: "us-west1", zones: "b", location: "The Dalles, Oregon, USA" },
161
+ { accelerator: "A100 40GB A2 Standard", region: "us-west3", zones: "b", location: "Salt Lake City, Utah, USA" },
162
+ { accelerator: "A100 40GB A2 Standard", region: "us-west4", zones: "b", location: "Las Vegas, Nevada, USA" },
163
+ { accelerator: "A100 40GB A2 Standard", region: "asia-northeast1", zones: "a, c", location: "Tokyo, Japan" },
164
+ { accelerator: "A100 40GB A2 Standard", region: "asia-northeast3", zones: "a, b", location: "Seoul, South Korea" },
165
+ { accelerator: "A100 40GB A2 Standard", region: "asia-southeast1", zones: "b, c*", location: "Jurong West, Singapore" },
166
+ { accelerator: "A100 40GB A2 Standard", region: "me-west1", zones: "a, c", location: "Tel Aviv, Israel" },
167
+ { accelerator: "A100 40GB A2 Standard", region: "europe-west4", zones: "a*, b*", location: "Eemshaven, Netherlands" },
168
+ // G2 (L4)
169
+ { accelerator: "G2 (L4)", region: "us-central1", zones: "a, b, c", location: "Council Bluffs, Iowa, USA" },
170
+ { accelerator: "G2 (L4)", region: "us-east1", zones: "b, c, d", location: "Moncks Corner, South Carolina, USA" },
171
+ { accelerator: "G2 (L4)", region: "us-east4", zones: "a", location: "Ashburn, Virginia, USA" },
172
+ { accelerator: "G2 (L4)", region: "us-west1", zones: "a, b, c", location: "The Dalles, Oregon, USA" },
173
+ { accelerator: "G2 (L4)", region: "us-west4", zones: "a, c", location: "Las Vegas, Nevada, USA" },
174
+ { accelerator: "G2 (L4)", region: "northamerica-northeast2", zones: "a", location: "Toronto, Ontario, Canada" },
175
+ { accelerator: "G2 (L4)", region: "asia-east1", zones: "a, b, c", location: "Changhua County, Taiwan" },
176
+ { accelerator: "G2 (L4)", region: "asia-northeast1", zones: "a, b, c", location: "Tokyo, Japan" },
177
+ { accelerator: "G2 (L4)", region: "asia-northeast3", zones: "a, b", location: "Seoul, South Korea" },
178
+ { accelerator: "G2 (L4)", region: "asia-south1", zones: "a, b, c", location: "Mumbai, India" },
179
+ { accelerator: "G2 (L4)", region: "asia-southeast1", zones: "a, b, c", location: "Jurong West, Singapore" },
180
+ { accelerator: "G2 (L4)", region: "australia-southeast1", zones: "a", location: "Sydney, Australia" },
181
+ { accelerator: "G2 (L4)", region: "europe-west1", zones: "b, c", location: "St. Ghislain, Belgium" },
182
+ { accelerator: "G2 (L4)", region: "europe-west2", zones: "a, b", location: "London, UK" },
183
+ { accelerator: "G2 (L4)", region: "europe-west3", zones: "a, b", location: "Frankfurt, Germany" },
184
+ { accelerator: "G2 (L4)", region: "europe-west4", zones: "a, b, c", location: "Eemshaven, Netherlands" },
185
+ { accelerator: "G2 (L4)", region: "europe-west6", zones: "b, c", location: "Zurich, Switzerland" },
186
+ { accelerator: "G2 (L4)", region: "me-central2", zones: "a", location: "Dammam, Saudi Arabia" },
187
+ // N1+T4
188
+ { accelerator: "N1+T4", region: "us-central1", zones: "a, b, f", location: "Council Bluffs, Iowa, USA" },
189
+ { accelerator: "N1+T4", region: "us-east1", zones: "c, d", location: "Moncks Corner, South Carolina, USA" },
190
+ { accelerator: "N1+T4", region: "us-east4", zones: "a, b", location: "Ashburn, Virginia, USA" },
191
+ { accelerator: "N1+T4", region: "us-west1", zones: "a, b", location: "The Dalles, Oregon, USA" },
192
+ { accelerator: "N1+T4", region: "us-west3", zones: "b", location: "Salt Lake City, Utah, USA" },
193
+ { accelerator: "N1+T4", region: "us-west4", zones: "a, b", location: "Las Vegas, Nevada, USA" },
194
+ { accelerator: "N1+T4", region: "northamerica-northeast1", zones: "c", location: "Montréal, Québec, Canada" },
195
+ { accelerator: "N1+T4", region: "asia-east1", zones: "a, c", location: "Changhua County, Taiwan" },
196
+ { accelerator: "N1+T4", region: "asia-east2", zones: "a, c", location: "Hong Kong" },
197
+ { accelerator: "N1+T4", region: "asia-northeast1", zones: "a, c", location: "Tokyo, Japan" },
198
+ { accelerator: "N1+T4", region: "asia-northeast3", zones: "b, c", location: "Seoul, South Korea" },
199
+ { accelerator: "N1+T4", region: "asia-south1", zones: "a, b", location: "Mumbai, India" },
200
+ { accelerator: "N1+T4", region: "asia-southeast1", zones: "a, b, c", location: "Jurong West, Singapore" },
201
+ { accelerator: "N1+T4", region: "asia-southeast2", zones: "a", location: "Jakarta, Indonesia" },
202
+ { accelerator: "N1+T4", region: "australia-southeast1", zones: "a, c", location: "Sydney, Australia" },
203
+ { accelerator: "N1+T4", region: "europe-central2", zones: "b, c", location: "Warsaw, Poland" },
204
+ { accelerator: "N1+T4", region: "europe-west1", zones: "b, c, d", location: "St. Ghislain, Belgium" },
205
+ { accelerator: "N1+T4", region: "europe-west2", zones: "a, b", location: "London, UK" },
206
+ { accelerator: "N1+T4", region: "europe-west3", zones: "b", location: "Frankfurt, Germany" },
207
+ { accelerator: "N1+T4", region: "europe-west4", zones: "a, b, c", location: "Eemshaven, Netherlands" },
208
+ { accelerator: "N1+T4", region: "me-west1", zones: "b, c", location: "Tel Aviv, Israel" },
209
+ { accelerator: "N1+T4", region: "southamerica-east1", zones: "a, c", location: "Osasco, São Paulo, Brazil" },
210
+ // N1+V100
211
+ { accelerator: "N1+V100", region: "us-central1", zones: "a, b, c, f", location: "Council Bluffs, Iowa, USA" },
212
+ { accelerator: "N1+V100", region: "us-east1", zones: "c", location: "Moncks Corner, South Carolina, USA" },
213
+ { accelerator: "N1+V100", region: "us-west1", zones: "a, b", location: "The Dalles, Oregon, USA" },
214
+ { accelerator: "N1+V100", region: "asia-east1", zones: "c", location: "Changhua County, Taiwan" },
215
+ { accelerator: "N1+V100", region: "europe-west4", zones: "a, b, c", location: "Eemshaven, Netherlands" },
216
+ // N1+P100
217
+ { accelerator: "N1+P100", region: "us-central1", zones: "c, f", location: "Council Bluffs, Iowa, USA" },
218
+ { accelerator: "N1+P100", region: "us-east1", zones: "b, c", location: "Moncks Corner, South Carolina, USA" },
219
+ { accelerator: "N1+P100", region: "us-west1", zones: "a, b", location: "The Dalles, Oregon, USA" },
220
+ { accelerator: "N1+P100", region: "asia-east1", zones: "a, c", location: "Changhua County, Taiwan" },
221
+ { accelerator: "N1+P100", region: "australia-southeast1", zones: "c", location: "Sydney, Australia" },
222
+ { accelerator: "N1+P100", region: "europe-west1", zones: "b, d", location: "St. Ghislain, Belgium" },
223
+ { accelerator: "N1+P100", region: "europe-west4", zones: "a", location: "Eemshaven, Netherlands" },
224
+ // N1+P4
225
+ { accelerator: "N1+P4", region: "us-central1", zones: "a, c", location: "Council Bluffs, Iowa, USA" },
226
+ { accelerator: "N1+P4", region: "us-east4", zones: "a, b, c", location: "Ashburn, Virginia, USA" },
227
+ { accelerator: "N1+P4", region: "northamerica-northeast1", zones: "a, b, c", location: "Montréal, Québec, Canada" },
228
+ { accelerator: "N1+P4", region: "us-west2", zones: "b, c", location: "Los Angeles, California, USA" }, // Assumed LA based on region
229
+ { accelerator: "N1+P4", region: "asia-southeast1", zones: "b, c", location: "Jurong West, Singapore" },
230
+ { accelerator: "N1+P4", region: "australia-southeast1", zones: "a, b", location: "Sydney, Australia" },
231
+ { accelerator: "N1+P4", region: "europe-west4", zones: "b, c", location: "Eemshaven, Netherlands" },
232
+ ];
233
+
234
+ // Group accelerators by physical location for easier display and entity creation
235
+ const groupedLocations = {};
236
+ datacenterData.forEach(item => {
237
+ if (!locations[item.location]) {
238
+ console.warn(`Location data for "${item.location}" not found. Skipping.`);
239
+ return;
240
+ }
241
+ if (!groupedLocations[item.location]) {
242
+ groupedLocations[item.location] = {
243
+ lat: locations[item.location].lat,
244
+ lon: locations[item.location].lon,
245
+ name: item.location,
246
+ accelerators: [],
247
+ regions: new Set(), // To store unique region IDs for this location
248
+ zones: new Set() // To store unique zones for this location
249
+ };
250
+ }
251
+ // Add accelerator if not already listed for this location
252
+ if (!groupedLocations[item.location].accelerators.some(acc => acc.type === item.accelerator)) {
253
+ groupedLocations[item.location].accelerators.push({
254
+ type: item.accelerator,
255
+ region: item.region,
256
+ zones: item.zones
257
+ });
258
+ }
259
+ // Consolidate region and zone info at the location level
260
+ // This part is tricky because region/zones can be specific to an accelerator
261
+ // For simplicity, we'll list all associated, but for precise info, click is needed
262
+ groupedLocations[item.location].regions.add(item.region);
263
+ item.zones.split(',').map(z => z.trim()).forEach(z => groupedLocations[item.location].zones.add(z));
264
+ });
265
+
266
+
267
+ // Cesium.Ion.defaultAccessToken = 'YOUR_CESIUM_ION_ACCESS_TOKEN'; // Only if using Cesium Ion assets
268
+
269
+ const viewer = new Cesium.Viewer('cesiumContainer', {
270
+ terrainProvider: Cesium.createWorldTerrain(), // Optional: adds terrain
271
+ // imageryProvider: new Cesium.OpenStreetMapImageryProvider({ // Optional: different base map
272
+ // url : 'https://a.tile.openstreetmap.org/'
273
+ // }),
274
+ animation: false,
275
+ timeline: false,
276
+ geocoder: false,
277
+ homeButton: false,
278
+ sceneModePicker: false,
279
+ baseLayerPicker: false,
280
+ navigationHelpButton: false,
281
+ fullscreenButton: false,
282
+ });
283
+
284
+ viewer.camera.flyTo({
285
+ destination: Cesium.Cartesian3.fromDegrees(-95, 38, 15000000), // Fly to a general view of the US
286
+ duration: 3
287
+ });
288
+
289
+ const acceleratorFilter = document.getElementById('acceleratorFilter');
290
+ const infoBox = document.getElementById('infoBox');
291
+ const locationNameEl = document.getElementById('locationName');
292
+ const regionIdEl = document.getElementById('regionId');
293
+ const zoneIdEl = document.getElementById('zoneId');
294
+ const acceleratorListEl = document.getElementById('acceleratorList');
295
+
296
+ const uniqueAccelerators = new Set();
297
+ datacenterData.forEach(dc => uniqueAccelerators.add(dc.accelerator));
298
+ uniqueAccelerators.forEach(acc => {
299
+ const option = document.createElement('option');
300
+ option.value = acc;
301
+ option.textContent = acc;
302
+ acceleratorFilter.appendChild(option);
303
+ });
304
+
305
+ const locationEntities = [];
306
+
307
+ Object.values(groupedLocations).forEach(locData => {
308
+ if (locData.lat === undefined || locData.lon === undefined) {
309
+ console.warn(`Missing coordinates for ${locData.name}`);
310
+ return;
311
+ }
312
+ const entity = viewer.entities.add({
313
+ position: Cesium.Cartesian3.fromDegrees(locData.lon, locData.lat),
314
+ point: {
315
+ pixelSize: 10,
316
+ color: Cesium.Color.DODGERBLUE,
317
+ outlineColor: Cesium.Color.WHITE,
318
+ outlineWidth: 2
319
+ },
320
+ label: {
321
+ text: locData.name,
322
+ font: '12pt monospace',
323
+ style: Cesium.LabelStyle.FILL_AND_OUTLINE,
324
+ outlineWidth: 2,
325
+ verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
326
+ pixelOffset: new Cesium.Cartesian2(0, -12)
327
+ },
328
+ properties: { // Custom properties
329
+ name: locData.name,
330
+ accelerators: locData.accelerators, // Array of {type, region, zones}
331
+ all_regions_at_location: Array.from(locData.regions).join(', '),
332
+ all_zones_at_location: Array.from(locData.zones).join(', ')
333
+ }
334
+ });
335
+ locationEntities.push(entity);
336
+ });
337
+
338
+
339
+ acceleratorFilter.addEventListener('change', (event) => {
340
+ const selectedAccelerator = event.target.value;
341
+ infoBox.style.display = 'none'; // Hide info box on filter change
342
+
343
+ locationEntities.forEach(entity => {
344
+ if (selectedAccelerator === 'all') {
345
+ entity.show = true;
346
+ } else {
347
+ // Check if any of the accelerators at this location match the filter
348
+ const hasAccelerator = entity.properties.accelerators.getValue().some(acc => acc.type === selectedAccelerator);
349
+ entity.show = hasAccelerator;
350
+ }
351
+ });
352
+ });
353
+
354
+ // Handle clicks on entities
355
+ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
356
+ const pickedObject = viewer.scene.pick(movement.position);
357
+ infoBox.style.display = 'none'; // Hide by default
358
+
359
+ if (Cesium.defined(pickedObject) && Cesium.defined(pickedObject.id) && Cesium.defined(pickedObject.id.properties)) {
360
+ const properties = pickedObject.id.properties;
361
+ const locationName = properties.name.getValue();
362
+ const acceleratorsAtLocation = properties.accelerators.getValue(); // This is an array of {type, region, zones}
363
+
364
+ locationNameEl.textContent = locationName;
365
+
366
+ // Collect all regions and zones for *this specific picked location*
367
+ const regionsForDisplay = new Set();
368
+ const zonesForDisplay = new Set();
369
+ acceleratorListEl.innerHTML = ''; // Clear previous list
370
+
371
+ acceleratorsAtLocation.forEach(acc => {
372
+ regionsForDisplay.add(acc.region);
373
+ acc.zones.split(',').map(z => z.trim()).forEach(zone => zonesForDisplay.add(zone));
374
+
375
+ const listItem = document.createElement('li');
376
+ listItem.textContent = `${acc.type} (Region: ${acc.region}, Zones: ${acc.zones})`;
377
+ acceleratorListEl.appendChild(listItem);
378
+ });
379
+
380
+ regionIdEl.textContent = Array.from(regionsForDisplay).join(', ') || 'N/A';
381
+ zoneIdEl.textContent = Array.from(zonesForDisplay).sort().join(', ') || 'N/A';
382
+
383
+ infoBox.style.display = 'block';
384
+ }
385
+ }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
386
+
387
+ </script>
388
+ </body>
389
+ </html>