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 { | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| overflow: hidden; /* Important to prevent scrollbars from interfering */ | |
| font-family: sans-serif; | |
| } | |
| #cesiumContainer { | |
| width: 100%; | |
| height: 100%; | |
| /* visibility: visible !important; Ensure it's not hidden by other styles */ | |
| /* background-color: lightblue; Add a temporary background to see if the div itself is rendered */ | |
| } | |
| #controls { | |
| position: absolute; | |
| top: 10px; | |
| left: 10px; | |
| background: rgba(40, 40, 40, 0.85); | |
| padding: 12px; | |
| border-radius: 8px; | |
| color: white; | |
| z-index: 10; /* Ensure it's above the map */ | |
| box-shadow: 0 2px 5px rgba(0,0,0,0.2); | |
| } | |
| #controls label { | |
| margin-right: 8px; | |
| font-weight: bold; | |
| } | |
| #acceleratorSearch { | |
| padding: 8px; | |
| border-radius: 4px; | |
| border: 1px solid #555; | |
| background-color: #333; | |
| color: white; | |
| width: 250px; /* Adjust as needed */ | |
| } | |
| #infoBox { | |
| position: absolute; | |
| bottom: 20px; /* Increased spacing */ | |
| left: 10px; | |
| background: rgba(40, 40, 40, 0.85); | |
| padding: 15px; | |
| border-radius: 8px; | |
| color: white; | |
| z-index: 10; | |
| max-width: 350px; /* Slightly wider */ | |
| display: none; /* Hidden by default */ | |
| box-shadow: 0 2px 5px rgba(0,0,0,0.2); | |
| } | |
| #infoBox h3 { | |
| margin-top: 0; | |
| margin-bottom: 10px; | |
| border-bottom: 1px solid #555; | |
| padding-bottom: 5px; | |
| } | |
| #infoBox p { | |
| margin: 5px 0; | |
| } | |
| #acceleratorList { | |
| list-style-type: none; | |
| padding-left: 0; | |
| max-height: 150px; /* Prevent very long lists */ | |
| overflow-y: auto; /* Add scroll for long lists */ | |
| } | |
| #acceleratorList li { | |
| padding: 3px 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="cesiumContainer"></div> | |
| <div id="controls"> | |
| <label for="acceleratorSearch">Search Accelerators:</label> | |
| <input type="text" id="acceleratorSearch" placeholder="E.g., TPU v5e, H100, A100..."> | |
| </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 --- | |
| const locations = { | |
| "Council Bluffs, Iowa, USA": { lat: 41.2619, lon: -95.8608 }, | |
| "Eemshaven, Netherlands": { lat: 53.442, lon: 6.83 }, | |
| "Changhua County, Taiwan": { lat: 24.0706, lon: 120.5417 }, | |
| "Columbus, Ohio, USA": { lat: 39.9612, lon: -82.9988 }, | |
| "Dallas, Texas, USA": { lat: 32.7767, lon: -96.7970 }, | |
| "The Dalles, Oregon, USA": { lat: 45.5946, lon: -121.1787 }, | |
| "Las Vegas, Nevada, USA": { lat: 36.1699, lon: -115.1398 }, | |
| "St. Ghislain, Belgium": { lat: 50.446, lon: 3.82 }, | |
| "Jurong West, Singapore": { lat: 1.3398, lon: 103.7053 }, | |
| "Moncks Corner, South Carolina, USA": { lat: 33.1913, lon: -80.0195 }, | |
| "Ashburn, Virginia, USA": { lat: 39.0438, lon: -77.4874 }, | |
| "Tokyo, Japan": { lat: 35.6895, lon: 139.6917 }, | |
| "Sydney, Australia": { lat: -33.8688, lon: 151.2093 }, | |
| "Toronto, Ontario, Canada": { lat: 43.6532, lon: -79.3832 }, | |
| "Seoul, South Korea": { lat: 37.5665, lon: 126.9780 }, | |
| "Mumbai, India": { lat: 19.0760, lon: 72.8777 }, | |
| "London, UK": { lat: 51.5074, lon: -0.1278 }, | |
| "Frankfurt, Germany": { lat: 50.1109, lon: 8.6821 }, | |
| "Salt Lake City, Utah, USA": { lat: 40.7608, lon: -111.8910 }, | |
| "Hong Kong": { lat: 22.3193, lon: 114.1694 }, | |
| "Jakarta, Indonesia": { lat: -6.2088, lon: 106.8456 }, | |
| "Warsaw, Poland": { lat: 52.2297, lon: 21.0122 }, | |
| "Tel Aviv, Israel": { lat: 32.0853, lon: 34.7818 }, | |
| "Osasco, São Paulo, Brazil": { lat: -23.5325, lon: -46.7917 }, | |
| "Montréal, Québec, Canada": { lat: 45.5017, lon: -73.5673 }, | |
| "Los Angeles, California, USA": { lat: 34.0522, lon: -118.2437 }, | |
| "Zurich, Switzerland": { lat: 47.3769, lon: 8.5417 }, | |
| "Dammam, Saudi Arabia": { lat: 26.4207, lon: 50.0888 } | |
| }; | |
| 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 | |
| { 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" }, | |
| // 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 | |
| { 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" }, | |
| { 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 | |
| const groupedLocations = {}; | |
| datacenterData.forEach(item => { | |
| if (!locations[item.location]) { | |
| console.warn(`Location data for "${item.location}" not found. Skipping item:`, item); | |
| return; | |
| } | |
| if (!groupedLocations[item.location]) { | |
| groupedLocations[item.location] = { | |
| lat: locations[item.location].lat, | |
| lon: locations[item.location].lon, | |
| name: item.location, | |
| accelerators: [], // Will store {type, region, zones} | |
| regions: new Set(), | |
| zones: new Set() | |
| }; | |
| } | |
| groupedLocations[item.location].accelerators.push({ | |
| type: item.accelerator, | |
| region: item.region, | |
| zones: item.zones | |
| }); | |
| groupedLocations[item.location].regions.add(item.region); | |
| item.zones.split(',').map(z => z.trim()).forEach(z => groupedLocations[item.location].zones.add(z)); | |
| }); | |
| let viewer; | |
| try { | |
| viewer = new Cesium.Viewer('cesiumContainer', { | |
| // Simplified for basic rendering. Add back features like terrainProvider later. | |
| animation: false, | |
| timeline: false, | |
| geocoder: false, | |
| homeButton: true, // Keep home button for now | |
| sceneModePicker: true, // Useful for switching between 3D, 2.5D, 2D | |
| baseLayerPicker: true, // Allows changing base map | |
| navigationHelpButton: false, | |
| fullscreenButton: true, | |
| infoBox: false // We are using a custom info box | |
| }); | |
| console.log("Cesium Viewer initialized successfully."); | |
| viewer.camera.flyTo({ | |
| destination: Cesium.Cartesian3.fromDegrees(-95, 38, 15000000), | |
| duration: 0 // Fly immediately | |
| }); | |
| } catch (error) { | |
| console.error("Error initializing Cesium Viewer:", error); | |
| alert("Could not initialize the 3D map. Please check the console for errors (F12). It might be a WebGL issue or a problem loading CesiumJS."); | |
| // Hide controls if map fails to load | |
| document.getElementById('controls').style.display = 'none'; | |
| document.getElementById('infoBox').style.display = 'none'; | |
| } | |
| const acceleratorSearchInput = document.getElementById('acceleratorSearch'); | |
| const infoBoxEl = document.getElementById('infoBox'); | |
| const locationNameEl = document.getElementById('locationName'); | |
| const regionIdEl = document.getElementById('regionId'); | |
| const zoneIdEl = document.getElementById('zoneId'); | |
| const acceleratorListEl = document.getElementById('acceleratorList'); | |
| const locationEntities = []; | |
| if (viewer) { // Only proceed if viewer was initialized | |
| Object.values(groupedLocations).forEach(locData => { | |
| if (locData.lat === undefined || locData.lon === undefined) { | |
| console.warn(`Missing coordinates for ${locData.name}, cannot plot.`); | |
| return; | |
| } | |
| const entity = viewer.entities.add({ | |
| position: Cesium.Cartesian3.fromDegrees(locData.lon, locData.lat), | |
| point: { | |
| pixelSize: 10, | |
| color: Cesium.Color.ORANGERED, // Changed color for better visibility | |
| outlineColor: Cesium.Color.WHITE, | |
| outlineWidth: 2, | |
| disableDepthTestDistance: Number.POSITIVE_INFINITY // Ensures point is visible even if behind terrain | |
| }, | |
| label: { | |
| text: locData.name, | |
| font: '12pt Segoe UI, sans-serif', // More readable font | |
| style: Cesium.LabelStyle.FILL_AND_OUTLINE, | |
| outlineWidth: 3, | |
| outlineColor: Cesium.Color.BLACK, | |
| verticalOrigin: Cesium.VerticalOrigin.BOTTOM, | |
| pixelOffset: new Cesium.Cartesian2(0, -15), // Adjusted offset | |
| distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 10000000.0) // Hide label when far away | |
| }, | |
| properties: { | |
| name: locData.name, | |
| accelerators: locData.accelerators, // Array of {type, region, zones} | |
| // The following are consolidated for the location, specific assignments are in accelerators array | |
| all_regions_at_location: Array.from(locData.regions).join(', '), | |
| all_zones_at_location: Array.from(locData.zones).sort().join(', ') | |
| } | |
| }); | |
| locationEntities.push(entity); | |
| }); | |
| acceleratorSearchInput.addEventListener('input', (event) => { | |
| const searchTerm = event.target.value.toLowerCase().trim(); | |
| infoBoxEl.style.display = 'none'; | |
| locationEntities.forEach(entity => { | |
| if (!searchTerm) { // If search bar is empty, show all | |
| entity.show = true; | |
| } else { | |
| const hasAccelerator = entity.properties.accelerators.getValue().some(acc => | |
| acc.type.toLowerCase().includes(searchTerm) | |
| ); | |
| entity.show = hasAccelerator; | |
| } | |
| }); | |
| }); | |
| viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) { | |
| const pickedObject = viewer.scene.pick(movement.position); | |
| infoBoxEl.style.display = 'none'; | |
| 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(); // Array of {type, region, zones} | |
| locationNameEl.textContent = locationName; | |
| acceleratorListEl.innerHTML = ''; // Clear previous list | |
| const uniqueRegionsForDisplay = new Set(); | |
| const uniqueZonesForDisplay = new Set(); | |
| if (acceleratorsAtLocation && acceleratorsAtLocation.length > 0) { | |
| acceleratorsAtLocation.forEach(acc => { | |
| const listItem = document.createElement('li'); | |
| listItem.textContent = `${acc.type} (Region: ${acc.region}, Zones: ${acc.zones})`; | |
| acceleratorListEl.appendChild(listItem); | |
| uniqueRegionsForDisplay.add(acc.region); | |
| acc.zones.split(',').map(z => z.trim()).forEach(zone => uniqueZonesForDisplay.add(zone)); | |
| }); | |
| } else { | |
| acceleratorListEl.innerHTML = '<li>No specific accelerator data.</li>'; | |
| } | |
| regionIdEl.textContent = Array.from(uniqueRegionsForDisplay).join(', ') || 'N/A'; | |
| zoneIdEl.textContent = Array.from(uniqueZonesForDisplay).sort().join(', ') || 'N/A'; | |
| infoBoxEl.style.display = 'block'; | |
| // Optionally fly to the picked entity | |
| viewer.flyTo(pickedObject.id, {duration: 0.5}); | |
| } | |
| }, Cesium.ScreenSpaceEventType.LEFT_CLICK); | |
| } // end if(viewer) | |
| </script> | |
| </body> | |
| </html> |