Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>GCP Datacenter Accelerator Map</title> | |
| <script src="https://cesium.com/downloads/cesiumjs/releases/1.117/Build/Cesium/Cesium.js"></script> | |
| <link href="https://cesium.com/downloads/cesiumjs/releases/1.117/Build/Cesium/Widgets/widgets.css" rel="stylesheet"> | |
| <style> | |
| html, body, #cesiumContainer { | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| overflow: hidden; | |
| font-family: sans-serif; | |
| } | |
| #controls { | |
| position: absolute; | |
| top: 10px; | |
| left: 10px; | |
| background: rgba(40, 40, 40, 0.8); | |
| padding: 10px; | |
| border-radius: 5px; | |
| color: white; | |
| z-index: 1; | |
| } | |
| #controls label { | |
| margin-right: 5px; | |
| } | |
| #infoBox { | |
| position: absolute; | |
| bottom: 10px; | |
| left: 10px; | |
| background: rgba(40, 40, 40, 0.8); | |
| padding: 10px; | |
| border-radius: 5px; | |
| color: white; | |
| z-index: 1; | |
| max-width: 300px; | |
| display: none; /* Hidden by default */ | |
| } | |
| #infoBox h3 { | |
| margin-top: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="cesiumContainer"></div> | |
| <div id="controls"> | |
| <label for="acceleratorFilter">Filter by Accelerator:</label> | |
| <select id="acceleratorFilter"> | |
| <option value="all">All Accelerators</option> | |
| </select> | |
| </div> | |
| <div id="infoBox"> | |
| <h3>Location Details</h3> | |
| <p id="locationName"></p> | |
| <p><strong>Region ID(s):</strong> <span id="regionId"></span></p> | |
| <p><strong>Zone(s):</strong> <span id="zoneId"></span></p> | |
| <p><strong>Available Accelerators here:</strong></p> | |
| <ul id="acceleratorList"></ul> | |
| </div> | |
| <script> | |
| // --- Data Preparation --- | |
| // Approximate coordinates (Latitude, Longitude) | |
| const locations = { | |
| "Council Bluffs, Iowa, USA": { lat: 41.2619, lon: -95.8608, accelerators: {} }, | |
| "Eemshaven, Netherlands": { lat: 53.442, lon: 6.83, accelerators: {} }, | |
| "Changhua County, Taiwan": { lat: 24.0706, lon: 120.5417, accelerators: {} }, | |
| "Columbus, Ohio, USA": { lat: 39.9612, lon: -82.9988, accelerators: {} }, | |
| "Dallas, Texas, USA": { lat: 32.7767, lon: -96.7970, accelerators: {} }, | |
| "The Dalles, Oregon, USA": { lat: 45.5946, lon: -121.1787, accelerators: {} }, | |
| "Las Vegas, Nevada, USA": { lat: 36.1699, lon: -115.1398, accelerators: {} }, | |
| "St. Ghislain, Belgium": { lat: 50.446, lon: 3.82, accelerators: {} }, | |
| "Jurong West, Singapore": { lat: 1.3398, lon: 103.7053, accelerators: {} }, | |
| "Moncks Corner, South Carolina, USA": { lat: 33.1913, lon: -80.0195, accelerators: {} }, | |
| "Ashburn, Virginia, USA": { lat: 39.0438, lon: -77.4874, accelerators: {} }, | |
| "Tokyo, Japan": { lat: 35.6895, lon: 139.6917, accelerators: {} }, | |
| "Sydney, Australia": { lat: -33.8688, lon: 151.2093, accelerators: {} }, | |
| "Toronto, Ontario, Canada": { lat: 43.6532, lon: -79.3832, accelerators: {} }, | |
| "Seoul, South Korea": { lat: 37.5665, lon: 126.9780, accelerators: {} }, | |
| "Mumbai, India": { lat: 19.0760, lon: 72.8777, accelerators: {} }, | |
| "London, UK": { lat: 51.5074, lon: -0.1278, accelerators: {} }, | |
| "Frankfurt, Germany": { lat: 50.1109, lon: 8.6821, accelerators: {} }, | |
| "Salt Lake City, Utah, USA": { lat: 40.7608, lon: -111.8910, accelerators: {} }, | |
| "Hong Kong": { lat: 22.3193, lon: 114.1694, accelerators: {} }, | |
| "Jakarta, Indonesia": { lat: -6.2088, lon: 106.8456, accelerators: {} }, | |
| "Warsaw, Poland": { lat: 52.2297, lon: 21.0122, accelerators: {} }, | |
| "Tel Aviv, Israel": { lat: 32.0853, lon: 34.7818, accelerators: {} }, | |
| "Osasco, São Paulo, Brazil": { lat: -23.5325, lon: -46.7917, accelerators: {} }, | |
| "Montréal, Québec, Canada": { lat: 45.5017, lon: -73.5673, accelerators: {} }, | |
| "Los Angeles, California, USA": { lat: 34.0522, lon: -118.2437, accelerators: {} }, | |
| "Zurich, Switzerland": { lat: 47.3769, lon: 8.5417, accelerators: {} }, | |
| "Dammam, Saudi Arabia": { lat: 26.4207, lon: 50.0888, accelerators: {} } | |
| }; | |
| const datacenterData = [ | |
| // TPU v2 | |
| { accelerator: "TPU v2", region: "us-central1", zones: "b, c, f", location: "Council Bluffs, Iowa, USA" }, | |
| { accelerator: "TPU v2", region: "europe-west4", zones: "a", location: "Eemshaven, Netherlands" }, | |
| { accelerator: "TPU v2", region: "asia-east1", zones: "c", location: "Changhua County, Taiwan" }, | |
| // TPU v3 (many are repeated in source, assuming unique locations for now) | |
| { accelerator: "TPU v3", region: "us-central1", zones: "a, b, f", location: "Council Bluffs, Iowa, USA" }, | |
| { accelerator: "TPU v3", region: "europe-west4", zones: "a", location: "Eemshaven, Netherlands" }, | |
| // TPU v4 | |
| { accelerator: "TPU v4", region: "us-central2", zones: "b", location: "Council Bluffs, Iowa, USA" }, // Note: Original data has "(?)" | |
| // TPU v5e | |
| { accelerator: "TPU v5e", region: "us-central1", zones: "a", location: "Council Bluffs, Iowa, USA" }, | |
| { accelerator: "TPU v5e", region: "us-east5", zones: "a, b, c", location: "Columbus, Ohio, USA" }, | |
| { accelerator: "TPU v5e", region: "us-south1", zones: "a", location: "Dallas, Texas, USA" }, | |
| { accelerator: "TPU v5e", region: "us-west1", zones: "c", location: "The Dalles, Oregon, USA" }, | |
| { accelerator: "TPU v5e", region: "us-west4", zones: "a", location: "Las Vegas, Nevada, USA" }, | |
| { accelerator: "TPU v5e", region: "europe-west1", zones: "b", location: "St. Ghislain, Belgium" }, | |
| { accelerator: "TPU v5e", region: "asia-southeast1", zones: "b", location: "Jurong West, Singapore" }, | |
| // TPU v5p | |
| { accelerator: "TPU v5p", region: "us-east5", zones: "a", location: "Columbus, Ohio, USA" }, | |
| { accelerator: "TPU v5p", region: "europe-west4", zones: "b", location: "Eemshaven, Netherlands" }, | |
| // TPU v6e (Data seems to have a typo for H100 A3 Mega, correcting as TPU v6e based on position) | |
| { accelerator: "TPU v6e", region: "us-east1", zones: "d", location: "Moncks Corner, South Carolina, USA" }, | |
| { accelerator: "TPU v6e", region: "us-east5", zones: "b", location: "Columbus, Ohio, USA" }, | |
| { accelerator: "TPU v6e", region: "europe-west4", zones: "a", location: "Eemshaven, Netherlands" }, | |
| { accelerator: "TPU v6e", region: "asia-northeast1", zones: "b", location: "Tokyo, Japan" }, | |
| // H100 A3 Mega | |
| { accelerator: "H100 A3 Mega", region: "us-central1", zones: "a, b*, c", location: "Council Bluffs, Iowa, USA" }, | |
| { accelerator: "H100 A3 Mega", region: "us-east4", zones: "a, b, c", location: "Ashburn, Virginia, USA" }, | |
| { accelerator: "H100 A3 Mega", region: "us-west1", zones: "a, b", location: "The Dalles, Oregon, USA" }, | |
| { accelerator: "H100 A3 Mega", region: "us-west4", zones: "a", location: "Las Vegas, Nevada, USA" }, | |
| { accelerator: "H100 A3 Mega", region: "asia-northeast1", zones: "b", location: "Tokyo, Japan" }, | |
| { accelerator: "H100 A3 Mega", region: "asia-southeast1", zones: "b, c", location: "Jurong West, Singapore" }, | |
| { accelerator: "H100 A3 Mega", region: "australia-southeast1", zones: "c*", location: "Sydney, Australia" }, | |
| { accelerator: "H100 A3 Mega", region: "europe-west1", zones: "b*, c*", location: "St. Ghislain, Belgium" }, | |
| { accelerator: "H100 A3 Mega", region: "europe-west4", zones: "b, c", location: "Eemshaven, Netherlands" }, | |
| // H100 A3 High | |
| { accelerator: "H100 A3 High", region: "us-central1", zones: "a, c", location: "Council Bluffs, Iowa, USA" }, | |
| { accelerator: "H100 A3 High", region: "us-east4", zones: "a, b", location: "Ashburn, Virginia, USA" }, | |
| { accelerator: "H100 A3 High", region: "us-east5", zones: "a", location: "Columbus, Ohio, USA" }, | |
| { accelerator: "H100 A3 High", region: "us-west1", zones: "a, b", location: "The Dalles, Oregon, USA" }, | |
| { accelerator: "H100 A3 High", region: "us-west4", zones: "a", location: "Las Vegas, Nevada, USA" }, | |
| { accelerator: "H100 A3 High", region: "asia-northeast1", zones: "b", location: "Tokyo, Japan" }, | |
| { accelerator: "H100 A3 High", region: "asia-southeast1", zones: "b, c", location: "Jurong West, Singapore" }, | |
| { accelerator: "H100 A3 High", region: "europe-west1", zones: "b*", location: "St. Ghislain, Belgium" }, | |
| // H100 A3 Edge | |
| { accelerator: "H100 A3 Edge", region: "northamerica-northeast2", zones: "c", location: "Toronto, Ontario, Canada" }, | |
| { accelerator: "H100 A3 Edge", region: "asia-northeast1", zones: "b", location: "Tokyo, Japan" }, | |
| { accelerator: "H100 A3 Edge", region: "asia-northeast3", zones: "a, c", location: "Seoul, South Korea" }, | |
| { accelerator: "H100 A3 Edge", region: "asia-south1", zones: "c", location: "Mumbai, India" }, | |
| { accelerator: "H100 A3 Edge", region: "europe-west2", zones: "b", location: "London, UK" }, | |
| { accelerator: "H100 A3 Edge", region: "europe-west3", zones: "a", location: "Frankfurt, Germany" }, | |
| // A100 A2 Ultra | |
| { accelerator: "A100 A2 Ultra", region: "us-central1", zones: "a, c", location: "Council Bluffs, Iowa, USA" }, | |
| { accelerator: "A100 A2 Ultra", region: "us-east4", zones: "c", location: "Ashburn, Virginia, USA" }, | |
| { accelerator: "A100 A2 Ultra", region: "us-east5", zones: "b", location: "Columbus, Ohio, USA" }, | |
| { accelerator: "A100 A2 Ultra", region: "asia-southeast1", zones: "c", location: "Jurong West, Singapore" }, | |
| { accelerator: "A100 A2 Ultra", region: "europe-west4", zones: "a, b, c", location: "Eemshaven, Netherlands" }, | |
| // A100 40GB A2 Standard | |
| { accelerator: "A100 40GB A2 Standard", region: "us-central1", zones: "a*, b*, c*, f*", location: "Council Bluffs, Iowa, USA" }, | |
| { accelerator: "A100 40GB A2 Standard", region: "us-east1", zones: "b", location: "Moncks Corner, South Carolina, USA" }, | |
| { accelerator: "A100 40GB A2 Standard", region: "us-west1", zones: "b", location: "The Dalles, Oregon, USA" }, | |
| { accelerator: "A100 40GB A2 Standard", region: "us-west3", zones: "b", location: "Salt Lake City, Utah, USA" }, | |
| { accelerator: "A100 40GB A2 Standard", region: "us-west4", zones: "b", location: "Las Vegas, Nevada, USA" }, | |
| { accelerator: "A100 40GB A2 Standard", region: "asia-northeast1", zones: "a, c", location: "Tokyo, Japan" }, | |
| { accelerator: "A100 40GB A2 Standard", region: "asia-northeast3", zones: "a, b", location: "Seoul, South Korea" }, | |
| { accelerator: "A100 40GB A2 Standard", region: "asia-southeast1", zones: "b, c*", location: "Jurong West, Singapore" }, | |
| { accelerator: "A100 40GB A2 Standard", region: "me-west1", zones: "a, c", location: "Tel Aviv, Israel" }, | |
| { accelerator: "A100 40GB A2 Standard", region: "europe-west4", zones: "a*, b*", location: "Eemshaven, Netherlands" }, | |
| // G2 (L4) | |
| { accelerator: "G2 (L4)", region: "us-central1", zones: "a, b, c", location: "Council Bluffs, Iowa, USA" }, | |
| { accelerator: "G2 (L4)", region: "us-east1", zones: "b, c, d", location: "Moncks Corner, South Carolina, USA" }, | |
| { accelerator: "G2 (L4)", region: "us-east4", zones: "a", location: "Ashburn, Virginia, USA" }, | |
| { accelerator: "G2 (L4)", region: "us-west1", zones: "a, b, c", location: "The Dalles, Oregon, USA" }, | |
| { accelerator: "G2 (L4)", region: "us-west4", zones: "a, c", location: "Las Vegas, Nevada, USA" }, | |
| { accelerator: "G2 (L4)", region: "northamerica-northeast2", zones: "a", location: "Toronto, Ontario, Canada" }, | |
| { accelerator: "G2 (L4)", region: "asia-east1", zones: "a, b, c", location: "Changhua County, Taiwan" }, | |
| { accelerator: "G2 (L4)", region: "asia-northeast1", zones: "a, b, c", location: "Tokyo, Japan" }, | |
| { accelerator: "G2 (L4)", region: "asia-northeast3", zones: "a, b", location: "Seoul, South Korea" }, | |
| { accelerator: "G2 (L4)", region: "asia-south1", zones: "a, b, c", location: "Mumbai, India" }, | |
| { accelerator: "G2 (L4)", region: "asia-southeast1", zones: "a, b, c", location: "Jurong West, Singapore" }, | |
| { accelerator: "G2 (L4)", region: "australia-southeast1", zones: "a", location: "Sydney, Australia" }, | |
| { accelerator: "G2 (L4)", region: "europe-west1", zones: "b, c", location: "St. Ghislain, Belgium" }, | |
| { accelerator: "G2 (L4)", region: "europe-west2", zones: "a, b", location: "London, UK" }, | |
| { accelerator: "G2 (L4)", region: "europe-west3", zones: "a, b", location: "Frankfurt, Germany" }, | |
| { accelerator: "G2 (L4)", region: "europe-west4", zones: "a, b, c", location: "Eemshaven, Netherlands" }, | |
| { accelerator: "G2 (L4)", region: "europe-west6", zones: "b, c", location: "Zurich, Switzerland" }, | |
| { accelerator: "G2 (L4)", region: "me-central2", zones: "a", location: "Dammam, Saudi Arabia" }, | |
| // N1+T4 | |
| { accelerator: "N1+T4", region: "us-central1", zones: "a, b, f", location: "Council Bluffs, Iowa, USA" }, | |
| { accelerator: "N1+T4", region: "us-east1", zones: "c, d", location: "Moncks Corner, South Carolina, USA" }, | |
| { accelerator: "N1+T4", region: "us-east4", zones: "a, b", location: "Ashburn, Virginia, USA" }, | |
| { accelerator: "N1+T4", region: "us-west1", zones: "a, b", location: "The Dalles, Oregon, USA" }, | |
| { accelerator: "N1+T4", region: "us-west3", zones: "b", location: "Salt Lake City, Utah, USA" }, | |
| { accelerator: "N1+T4", region: "us-west4", zones: "a, b", location: "Las Vegas, Nevada, USA" }, | |
| { accelerator: "N1+T4", region: "northamerica-northeast1", zones: "c", location: "Montréal, Québec, Canada" }, | |
| { accelerator: "N1+T4", region: "asia-east1", zones: "a, c", location: "Changhua County, Taiwan" }, | |
| { accelerator: "N1+T4", region: "asia-east2", zones: "a, c", location: "Hong Kong" }, | |
| { accelerator: "N1+T4", region: "asia-northeast1", zones: "a, c", location: "Tokyo, Japan" }, | |
| { accelerator: "N1+T4", region: "asia-northeast3", zones: "b, c", location: "Seoul, South Korea" }, | |
| { accelerator: "N1+T4", region: "asia-south1", zones: "a, b", location: "Mumbai, India" }, | |
| { accelerator: "N1+T4", region: "asia-southeast1", zones: "a, b, c", location: "Jurong West, Singapore" }, | |
| { accelerator: "N1+T4", region: "asia-southeast2", zones: "a", location: "Jakarta, Indonesia" }, | |
| { accelerator: "N1+T4", region: "australia-southeast1", zones: "a, c", location: "Sydney, Australia" }, | |
| { accelerator: "N1+T4", region: "europe-central2", zones: "b, c", location: "Warsaw, Poland" }, | |
| { accelerator: "N1+T4", region: "europe-west1", zones: "b, c, d", location: "St. Ghislain, Belgium" }, | |
| { accelerator: "N1+T4", region: "europe-west2", zones: "a, b", location: "London, UK" }, | |
| { accelerator: "N1+T4", region: "europe-west3", zones: "b", location: "Frankfurt, Germany" }, | |
| { accelerator: "N1+T4", region: "europe-west4", zones: "a, b, c", location: "Eemshaven, Netherlands" }, | |
| { accelerator: "N1+T4", region: "me-west1", zones: "b, c", location: "Tel Aviv, Israel" }, | |
| { accelerator: "N1+T4", region: "southamerica-east1", zones: "a, c", location: "Osasco, São Paulo, Brazil" }, | |
| // N1+V100 | |
| { accelerator: "N1+V100", region: "us-central1", zones: "a, b, c, f", location: "Council Bluffs, Iowa, USA" }, | |
| { accelerator: "N1+V100", region: "us-east1", zones: "c", location: "Moncks Corner, South Carolina, USA" }, | |
| { accelerator: "N1+V100", region: "us-west1", zones: "a, b", location: "The Dalles, Oregon, USA" }, | |
| { accelerator: "N1+V100", region: "asia-east1", zones: "c", location: "Changhua County, Taiwan" }, | |
| { accelerator: "N1+V100", region: "europe-west4", zones: "a, b, c", location: "Eemshaven, Netherlands" }, | |
| // N1+P100 | |
| { accelerator: "N1+P100", region: "us-central1", zones: "c, f", location: "Council Bluffs, Iowa, USA" }, | |
| { accelerator: "N1+P100", region: "us-east1", zones: "b, c", location: "Moncks Corner, South Carolina, USA" }, | |
| { accelerator: "N1+P100", region: "us-west1", zones: "a, b", location: "The Dalles, Oregon, USA" }, | |
| { accelerator: "N1+P100", region: "asia-east1", zones: "a, c", location: "Changhua County, Taiwan" }, | |
| { accelerator: "N1+P100", region: "australia-southeast1", zones: "c", location: "Sydney, Australia" }, | |
| { accelerator: "N1+P100", region: "europe-west1", zones: "b, d", location: "St. Ghislain, Belgium" }, | |
| { accelerator: "N1+P100", region: "europe-west4", zones: "a", location: "Eemshaven, Netherlands" }, | |
| // N1+P4 | |
| { accelerator: "N1+P4", region: "us-central1", zones: "a, c", location: "Council Bluffs, Iowa, USA" }, | |
| { accelerator: "N1+P4", region: "us-east4", zones: "a, b, c", location: "Ashburn, Virginia, USA" }, | |
| { accelerator: "N1+P4", region: "northamerica-northeast1", zones: "a, b, c", location: "Montréal, Québec, Canada" }, | |
| { accelerator: "N1+P4", region: "us-west2", zones: "b, c", location: "Los Angeles, California, USA" }, // Assumed LA based on region | |
| { accelerator: "N1+P4", region: "asia-southeast1", zones: "b, c", location: "Jurong West, Singapore" }, | |
| { accelerator: "N1+P4", region: "australia-southeast1", zones: "a, b", location: "Sydney, Australia" }, | |
| { accelerator: "N1+P4", region: "europe-west4", zones: "b, c", location: "Eemshaven, Netherlands" }, | |
| ]; | |
| // Group accelerators by physical location for easier display and entity creation | |
| const groupedLocations = {}; | |
| datacenterData.forEach(item => { | |
| if (!locations[item.location]) { | |
| console.warn(`Location data for "${item.location}" not found. Skipping.`); | |
| return; | |
| } | |
| if (!groupedLocations[item.location]) { | |
| groupedLocations[item.location] = { | |
| lat: locations[item.location].lat, | |
| lon: locations[item.location].lon, | |
| name: item.location, | |
| accelerators: [], | |
| regions: new Set(), // To store unique region IDs for this location | |
| zones: new Set() // To store unique zones for this location | |
| }; | |
| } | |
| // Add accelerator if not already listed for this location | |
| if (!groupedLocations[item.location].accelerators.some(acc => acc.type === item.accelerator)) { | |
| groupedLocations[item.location].accelerators.push({ | |
| type: item.accelerator, | |
| region: item.region, | |
| zones: item.zones | |
| }); | |
| } | |
| // Consolidate region and zone info at the location level | |
| // This part is tricky because region/zones can be specific to an accelerator | |
| // For simplicity, we'll list all associated, but for precise info, click is needed | |
| groupedLocations[item.location].regions.add(item.region); | |
| item.zones.split(',').map(z => z.trim()).forEach(z => groupedLocations[item.location].zones.add(z)); | |
| }); | |
| // Cesium.Ion.defaultAccessToken = 'YOUR_CESIUM_ION_ACCESS_TOKEN'; // Only if using Cesium Ion assets | |
| const viewer = new Cesium.Viewer('cesiumContainer', { | |
| terrainProvider: Cesium.createWorldTerrain(), // Optional: adds terrain | |
| // imageryProvider: new Cesium.OpenStreetMapImageryProvider({ // Optional: different base map | |
| // url : 'https://a.tile.openstreetmap.org/' | |
| // }), | |
| animation: false, | |
| timeline: false, | |
| geocoder: false, | |
| homeButton: false, | |
| sceneModePicker: false, | |
| baseLayerPicker: false, | |
| navigationHelpButton: false, | |
| fullscreenButton: false, | |
| }); | |
| viewer.camera.flyTo({ | |
| destination: Cesium.Cartesian3.fromDegrees(-95, 38, 15000000), // Fly to a general view of the US | |
| duration: 3 | |
| }); | |
| const acceleratorFilter = document.getElementById('acceleratorFilter'); | |
| const infoBox = document.getElementById('infoBox'); | |
| const locationNameEl = document.getElementById('locationName'); | |
| const regionIdEl = document.getElementById('regionId'); | |
| const zoneIdEl = document.getElementById('zoneId'); | |
| const acceleratorListEl = document.getElementById('acceleratorList'); | |
| const uniqueAccelerators = new Set(); | |
| datacenterData.forEach(dc => uniqueAccelerators.add(dc.accelerator)); | |
| uniqueAccelerators.forEach(acc => { | |
| const option = document.createElement('option'); | |
| option.value = acc; | |
| option.textContent = acc; | |
| acceleratorFilter.appendChild(option); | |
| }); | |
| const locationEntities = []; | |
| Object.values(groupedLocations).forEach(locData => { | |
| if (locData.lat === undefined || locData.lon === undefined) { | |
| console.warn(`Missing coordinates for ${locData.name}`); | |
| return; | |
| } | |
| const entity = viewer.entities.add({ | |
| position: Cesium.Cartesian3.fromDegrees(locData.lon, locData.lat), | |
| point: { | |
| pixelSize: 10, | |
| color: Cesium.Color.DODGERBLUE, | |
| outlineColor: Cesium.Color.WHITE, | |
| outlineWidth: 2 | |
| }, | |
| label: { | |
| text: locData.name, | |
| font: '12pt monospace', | |
| style: Cesium.LabelStyle.FILL_AND_OUTLINE, | |
| outlineWidth: 2, | |
| verticalOrigin: Cesium.VerticalOrigin.BOTTOM, | |
| pixelOffset: new Cesium.Cartesian2(0, -12) | |
| }, | |
| properties: { // Custom properties | |
| name: locData.name, | |
| accelerators: locData.accelerators, // Array of {type, region, zones} | |
| all_regions_at_location: Array.from(locData.regions).join(', '), | |
| all_zones_at_location: Array.from(locData.zones).join(', ') | |
| } | |
| }); | |
| locationEntities.push(entity); | |
| }); | |
| acceleratorFilter.addEventListener('change', (event) => { | |
| const selectedAccelerator = event.target.value; | |
| infoBox.style.display = 'none'; // Hide info box on filter change | |
| locationEntities.forEach(entity => { | |
| if (selectedAccelerator === 'all') { | |
| entity.show = true; | |
| } else { | |
| // Check if any of the accelerators at this location match the filter | |
| const hasAccelerator = entity.properties.accelerators.getValue().some(acc => acc.type === selectedAccelerator); | |
| entity.show = hasAccelerator; | |
| } | |
| }); | |
| }); | |
| // Handle clicks on entities | |
| viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) { | |
| const pickedObject = viewer.scene.pick(movement.position); | |
| infoBox.style.display = 'none'; // Hide by default | |
| if (Cesium.defined(pickedObject) && Cesium.defined(pickedObject.id) && Cesium.defined(pickedObject.id.properties)) { | |
| const properties = pickedObject.id.properties; | |
| const locationName = properties.name.getValue(); | |
| const acceleratorsAtLocation = properties.accelerators.getValue(); // This is an array of {type, region, zones} | |
| locationNameEl.textContent = locationName; | |
| // Collect all regions and zones for *this specific picked location* | |
| const regionsForDisplay = new Set(); | |
| const zonesForDisplay = new Set(); | |
| acceleratorListEl.innerHTML = ''; // Clear previous list | |
| acceleratorsAtLocation.forEach(acc => { | |
| regionsForDisplay.add(acc.region); | |
| acc.zones.split(',').map(z => z.trim()).forEach(zone => zonesForDisplay.add(zone)); | |
| const listItem = document.createElement('li'); | |
| listItem.textContent = `${acc.type} (Region: ${acc.region}, Zones: ${acc.zones})`; | |
| acceleratorListEl.appendChild(listItem); | |
| }); | |
| regionIdEl.textContent = Array.from(regionsForDisplay).join(', ') || 'N/A'; | |
| zoneIdEl.textContent = Array.from(zonesForDisplay).sort().join(', ') || 'N/A'; | |
| infoBox.style.display = 'block'; | |
| } | |
| }, Cesium.ScreenSpaceEventType.LEFT_CLICK); | |
| </script> | |
| </body> | |
| </html> |