Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>GCP 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: 15px; | |
| border-radius: 8px; | |
| color: white; | |
| max-height: 90vh; | |
| overflow-y: auto; | |
| z-index: 10; | |
| } | |
| #controls h3 { | |
| margin-top: 0; | |
| } | |
| #controls label { | |
| display: block; | |
| margin-bottom: 8px; | |
| cursor: pointer; | |
| } | |
| #controls input[type="checkbox"] { | |
| margin-right: 8px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="cesiumContainer"></div> | |
| <div id="controls"> | |
| <h3>Filter by Accelerator</h3> | |
| <div id="acceleratorFilters"> | |
| </div> | |
| </div> | |
| <script> | |
| // --- Cesium Ion Access Token (Replace with your own) --- | |
| Cesium.Ion.defaultAccessToken = 'YOUR_CESIUM_ION_ACCESS_TOKEN'; // Optional | |
| // --- Datacenter Data --- | |
| // (Latitude and Longitude are approximate and need to be verified/corrected) | |
| const rawData = [ | |
| { accelerator: "TPU v2", regionId: "us-central1", zones: "b, c, f", location: "Council Bluffs, Iowa, USA", lat: 41.2619, lon: -95.8514 }, | |
| { accelerator: "TPU v2", regionId: "europe-west4", zones: "a", location: "Eemshaven, Netherlands", lat: 53.4427, lon: 6.8442 }, | |
| { accelerator: "TPU v2", regionId: "asia-east1", zones: "c", location: "Changhua County, Taiwan", lat: 24.0716, lon: 120.5469 }, | |
| // ... (Duplicate TPU v2 entries were present, consolidated by location for mapping) | |
| { accelerator: "TPU v3", regionId: "us-central1", zones: "a, b, f", location: "Council Bluffs, Iowa, USA", lat: 41.2619, lon: -95.8514 }, | |
| { accelerator: "TPU v3", regionId: "europe-west4", zones: "a", location: "Eemshaven, Netherlands", lat: 53.4427, lon: 6.8442 }, | |
| // ... (Duplicate TPU v3 entries) | |
| { accelerator: "TPU v4", regionId: "us-central2", zones: "b", location: "Council Bluffs, Iowa, USA (?)", lat: 41.2619, lon: -95.8514 }, // Note: Location was marked with (?) | |
| { accelerator: "TPU v5e", regionId: "us-central1", zones: "a", location: "Council Bluffs, Iowa, USA", lat: 41.2619, lon: -95.8514 }, | |
| { accelerator: "TPU v5e", regionId: "us-east5", zones: "a, b, c", location: "Columbus, Ohio, USA", lat: 39.9612, lon: -82.9988 }, | |
| { accelerator: "TPU v5e", regionId: "us-south1", zones: "a", location: "Dallas, Texas, USA", lat: 32.7767, lon: -96.7970 }, | |
| { accelerator: "TPU v5e", regionId: "us-west1", zones: "c", location: "The Dalles, Oregon, USA", lat: 45.5946, lon: -121.1787 }, | |
| { accelerator: "TPU v5e", regionId: "us-west4", zones: "a", location: "Las Vegas, Nevada, USA", lat: 36.1699, lon: -115.1398 }, | |
| { accelerator: "TPU v5e", regionId: "europe-west1", zones: "b", location: "St. Ghislain, Belgium", lat: 50.4377, lon: 3.8203 }, | |
| { accelerator: "TPU v5e", regionId: "asia-southeast1", zones: "b", location: "Jurong West, Singapore", lat: 1.3521, lon: 103.8198 }, // Using general Singapore coords | |
| { accelerator: "TPU v5p", regionId: "us-east5", zones: "a", location: "Columbus, Ohio, USA", lat: 39.9612, lon: -82.9988 }, | |
| { accelerator: "TPU v5p", regionId: "europe-west4", zones: "b", location: "Eemshaven, Netherlands", lat: 53.4427, lon: 6.8442 }, | |
| { accelerator: "TPU v6e", regionId: "us-east1", zones: "d", location: "Moncks Corner, South Carolina, USA", lat: 33.1957, lon: -79.9906 }, | |
| { accelerator: "TPU v6e", regionId: "us-east5", zones: "b", location: "Columbus, Ohio, USA", lat: 39.9612, lon: -82.9988 }, | |
| { accelerator: "TPU v6e", regionId: "europe-west4", zones: "a", location: "Eemshaven, Netherlands", lat: 53.4427, lon: 6.8442 }, | |
| { accelerator: "TPU v6e", regionId: "asia-northeast1", zones: "b", location: "Tokyo, Japan", lat: 35.6895, lon: 139.6917 }, | |
| { accelerator: "H100 A3 Mega", regionId: "us-central1", zones: "a, b*, c", location: "Council Bluffs, Iowa, USA", lat: 41.2619, lon: -95.8514, notes: "b: Limited capacity, contact TAM" }, | |
| { accelerator: "H100 A3 Mega", regionId: "us-east4", zones: "a, b, c", location: "Ashburn, Virginia, USA", lat: 39.0438, lon: -77.4874 }, | |
| { accelerator: "H100 A3 Mega", regionId: "us-west1", zones: "a, b", location: "The Dalles, Oregon, USA", lat: 45.5946, lon: -121.1787 }, | |
| { accelerator: "H100 A3 Mega", regionId: "us-west4", zones: "a", location: "Las Vegas, Nevada, USA", lat: 36.1699, lon: -115.1398 }, | |
| { accelerator: "H100 A3 Mega", regionId: "asia-northeast1", zones: "b", location: "Tokyo, Japan", lat: 35.6895, lon: 139.6917 }, | |
| { accelerator: "H100 A3 Mega", regionId: "asia-southeast1", zones: "b, c", location: "Jurong West, Singapore", lat: 1.3521, lon: 103.8198 }, | |
| { accelerator: "H100 A3 Mega", regionId: "australia-southeast1", zones: "c*", location: "Sydney, Australia", lat: -33.8688, lon: 151.2093, notes: "Limited capacity, contact TAM" }, | |
| { accelerator: "H100 A3 Mega", regionId: "europe-west1", zones: "b*, c*", location: "St. Ghislain, Belgium", lat: 50.4377, lon: 3.8203, notes: "Limited capacity, contact TAM" }, | |
| { accelerator: "H100 A3 Mega", regionId: "europe-west4", zones: "b, c", location: "Eemshaven, Netherlands", lat: 53.4427, lon: 6.8442 }, | |
| { accelerator: "H100 A3 High", regionId: "us-central1", zones: "a, c", location: "Council Bluffs, Iowa, USA", lat: 41.2619, lon: -95.8514 }, | |
| { accelerator: "H100 A3 High", regionId: "us-east4", zones: "a, b", location: "Ashburn, Virginia, USA", lat: 39.0438, lon: -77.4874 }, | |
| { accelerator: "H100 A3 High", regionId: "us-east5", zones: "a", location: "Columbus, Ohio, USA", lat: 39.9612, lon: -82.9988 }, | |
| { accelerator: "H100 A3 High", regionId: "us-west1", zones: "a, b", location: "The Dalles, Oregon, USA", lat: 45.5946, lon: -121.1787 }, | |
| { accelerator: "H100 A3 High", regionId: "us-west4", zones: "a", location: "Las Vegas, Nevada, USA", lat: 36.1699, lon: -115.1398 }, | |
| { accelerator: "H100 A3 High", regionId: "asia-northeast1", zones: "b", location: "Tokyo, Japan", lat: 35.6895, lon: 139.6917 }, | |
| { accelerator: "H100 A3 High", regionId: "asia-southeast1", zones: "b, c", location: "Jurong West, Singapore", lat: 1.3521, lon: 103.8198 }, | |
| { accelerator: "H100 A3 High", regionId: "europe-west1", zones: "b*", location: "St. Ghislain, Belgium", lat: 50.4377, lon: 3.8203, notes: "Limited capacity, contact TAM" }, | |
| { accelerator: "H100 A3 Edge", regionId: "northamerica-northeast2", zones: "c", location: "Toronto, Ontario, Canada", lat: 43.6532, lon: -79.3832 }, | |
| { accelerator: "H100 A3 Edge", regionId: "asia-northeast1", zones: "b", location: "Tokyo, Japan", lat: 35.6895, lon: 139.6917 }, | |
| { accelerator: "H100 A3 Edge", regionId: "asia-northeast3", zones: "a, c", location: "Seoul, South Korea", lat: 37.5665, lon: 126.9780 }, | |
| { accelerator: "H100 A3 Edge", regionId: "asia-south1", zones: "c", location: "Mumbai, India", lat: 19.0760, lon: 72.8777 }, | |
| { accelerator: "H100 A3 Edge", regionId: "europe-west2", zones: "b", location: "London, UK", lat: 51.5074, lon: -0.1278 }, | |
| { accelerator: "H100 A3 Edge", regionId: "europe-west3", zones: "a", location: "Frankfurt, Germany", lat: 50.1109, lon: 8.6821 }, | |
| { accelerator: "A100 A2 Ultra", regionId: "us-central1", zones: "a, c", location: "Council Bluffs, Iowa, USA", lat: 41.2619, lon: -95.8514 }, | |
| { accelerator: "A100 A2 Ultra", regionId: "us-east4", zones: "c", location: "Ashburn, Virginia, USA", lat: 39.0438, lon: -77.4874 }, | |
| { accelerator: "A100 A2 Ultra", regionId: "us-east5", zones: "b", location: "Columbus, Ohio, USA", lat: 39.9612, lon: -82.9988 }, | |
| { accelerator: "A100 A2 Ultra", regionId: "asia-southeast1", zones: "c", location: "Jurong West, Singapore", lat: 1.3521, lon: 103.8198 }, | |
| { accelerator: "A100 A2 Ultra", regionId: "europe-west4", zones: "a, b, c", location: "Eemshaven, Netherlands", lat: 53.4427, lon: 6.8442 }, | |
| { accelerator: "A100 40GB A2 Standard", regionId: "us-central1", zones: "a*, b*, c*, f*", location: "Council Bluffs, Iowa, USA", lat: 41.2619, lon: -95.8514, notes: "a2-megagpu-16g only" }, | |
| { accelerator: "A100 40GB A2 Standard", regionId: "us-east1", zones: "b", location: "Moncks Corner, South Carolina, USA", lat: 33.1957, lon: -79.9906 }, | |
| { accelerator: "A100 40GB A2 Standard", regionId: "us-west1", zones: "b", location: "The Dalles, Oregon, USA", lat: 45.5946, lon: -121.1787 }, | |
| { accelerator: "A100 40GB A2 Standard", regionId: "us-west3", zones: "b", location: "Salt Lake City, Utah, USA", lat: 40.7608, lon: -111.8910 }, | |
| { accelerator: "A100 40GB A2 Standard", regionId: "us-west4", zones: "b", location: "Las Vegas, Nevada, USA", lat: 36.1699, lon: -115.1398 }, | |
| { accelerator: "A100 40GB A2 Standard", regionId: "asia-northeast1", zones: "a, c", location: "Tokyo, Japan", lat: 35.6895, lon: 139.6917 }, | |
| { accelerator: "A100 40GB A2 Standard", regionId: "asia-northeast3", zones: "a, b", location: "Seoul, South Korea", lat: 37.5665, lon: 126.9780 }, | |
| { accelerator: "A100 40GB A2 Standard", regionId: "asia-southeast1", zones: "b, c*", location: "Jurong West, Singapore", lat: 1.3521, lon: 103.8198, notes: "c: a2-megagpu-16g only" }, | |
| { accelerator: "A100 40GB A2 Standard", regionId: "me-west1", zones: "a, c", location: "Tel Aviv, Israel", lat: 32.0853, lon: 34.7818 }, | |
| { accelerator: "A100 40GB A2 Standard", regionId: "europe-west4", zones: "a*, b*", location: "Eemshaven, Netherlands", lat: 53.4427, lon: 6.8442, notes: "a2-megagpu-16g only" }, | |
| { accelerator: "G2 (L4)", regionId: "us-central1", zones: "a, b, c", location: "Council Bluffs, Iowa, USA", lat: 41.2619, lon: -95.8514 }, | |
| { accelerator: "G2 (L4)", regionId: "us-east1", zones: "b, c, d", location: "Moncks Corner, South Carolina, USA", lat: 33.1957, lon: -79.9906 }, | |
| { accelerator: "G2 (L4)", regionId: "us-east4", zones: "a", location: "Ashburn, Virginia, USA", lat: 39.0438, lon: -77.4874 }, | |
| { accelerator: "G2 (L4)", regionId: "us-west1", zones: "a, b, c", location: "The Dalles, Oregon, USA", lat: 45.5946, lon: -121.1787 }, | |
| { accelerator: "G2 (L4)", regionId: "us-west4", zones: "a, c", location: "Las Vegas, Nevada, USA", lat: 36.1699, lon: -115.1398 }, | |
| { accelerator: "G2 (L4)", regionId: "northamerica-northeast2", zones: "a", location: "Toronto, Ontario, Canada", lat: 43.6532, lon: -79.3832 }, | |
| { accelerator: "G2 (L4)", regionId: "asia-east1", zones: "a, b, c", location: "Changhua County, Taiwan", lat: 24.0716, lon: 120.5469 }, | |
| { accelerator: "G2 (L4)", regionId: "asia-northeast1", zones: "a, b, c", location: "Tokyo, Japan", lat: 35.6895, lon: 139.6917 }, | |
| { accelerator: "G2 (L4)", regionId: "asia-northeast3", zones: "a, b", location: "Seoul, South Korea", lat: 37.5665, lon: 126.9780 }, | |
| { accelerator: "G2 (L4)", regionId: "asia-south1", zones: "a, b, c", location: "Mumbai, India", lat: 19.0760, lon: 72.8777 }, | |
| { accelerator: "G2 (L4)", regionId: "asia-southeast1", zones: "a, b, c", location: "Jurong West, Singapore", lat: 1.3521, lon: 103.8198 }, | |
| { accelerator: "G2 (L4)", regionId: "australia-southeast1", zones: "a", location: "Sydney, Australia", lat: -33.8688, lon: 151.2093 }, | |
| { accelerator: "G2 (L4)", regionId: "europe-west1", zones: "b, c", location: "St. Ghislain, Belgium", lat: 50.4377, lon: 3.8203 }, | |
| { accelerator: "G2 (L4)", regionId: "europe-west2", zones: "a, b", location: "London, UK", lat: 51.5074, lon: -0.1278 }, | |
| { accelerator: "G2 (L4)", regionId: "europe-west3", zones: "a, b", location: "Frankfurt, Germany", lat: 50.1109, lon: 8.6821 }, | |
| { accelerator: "G2 (L4)", regionId: "europe-west4", zones: "a, b, c", location: "Eemshaven, Netherlands", lat: 53.4427, lon: 6.8442 }, | |
| { accelerator: "G2 (L4)", regionId: "europe-west6", zones: "b, c", location: "Zurich, Switzerland", lat: 47.3769, lon: 8.5417 }, | |
| { accelerator: "G2 (L4)", regionId: "me-central2", zones: "a", location: "Dammam, Saudi Arabia", lat: 26.4207, lon: 50.0888 }, | |
| { accelerator: "N1+T4", regionId: "us-central1", zones: "a, b, f", location: "Council Bluffs, Iowa, USA", lat: 41.2619, lon: -95.8514 }, | |
| { accelerator: "N1+T4", regionId: "us-east1", zones: "c, d", location: "Moncks Corner, South Carolina, USA", lat: 33.1957, lon: -79.9906 }, | |
| { accelerator: "N1+T4", regionId: "us-east4", zones: "a, b", location: "Ashburn, Virginia, USA", lat: 39.0438, lon: -77.4874 }, | |
| { accelerator: "N1+T4", regionId: "us-west1", zones: "a, b", location: "The Dalles, Oregon, USA", lat: 45.5946, lon: -121.1787 }, | |
| { accelerator: "N1+T4", regionId: "us-west3", zones: "b", location: "Salt Lake City, Utah, USA", lat: 40.7608, lon: -111.8910 }, | |
| { accelerator: "N1+T4", regionId: "us-west4", zones: "a, b", location: "Las Vegas, Nevada, USA", lat: 36.1699, lon: -115.1398 }, | |
| { accelerator: "N1+T4", regionId: "northamerica-northeast1", zones: "c", location: "Montréal, Québec, Canada", lat: 45.5017, lon: -73.5673 }, | |
| { accelerator: "N1+T4", regionId: "asia-east1", zones: "a, c", location: "Changhua County, Taiwan", lat: 24.0716, lon: 120.5469 }, | |
| { accelerator: "N1+T4", regionId: "asia-east2", zones: "a, c", location: "Hong Kong", lat: 22.3193, lon: 114.1694 }, | |
| { accelerator: "N1+T4", regionId: "asia-northeast1", zones: "a, c", location: "Tokyo, Japan", lat: 35.6895, lon: 139.6917 }, | |
| { accelerator: "N1+T4", regionId: "asia-northeast3", zones: "b, c", location: "Seoul, South Korea", lat: 37.5665, lon: 126.9780 }, | |
| { accelerator: "N1+T4", regionId: "asia-south1", zones: "a, b", location: "Mumbai, India", lat: 19.0760, lon: 72.8777 }, | |
| { accelerator: "N1+T4", regionId: "asia-southeast1", zones: "a, b, c", location: "Jurong West, Singapore", lat: 1.3521, lon: 103.8198 }, | |
| { accelerator: "N1+T4", regionId: "asia-southeast2", zones: "a", location: "Jakarta, Indonesia", lat: -6.2088, lon: 106.8456 }, | |
| { accelerator: "N1+T4", regionId: "australia-southeast1", zones: "a, c", location: "Sydney, Australia", lat: -33.8688, lon: 151.2093 }, | |
| { accelerator: "N1+T4", regionId: "europe-central2", zones: "b, c", location: "Warsaw, Poland", lat: 52.2297, lon: 21.0122 }, | |
| { accelerator: "N1+T4", regionId: "europe-west1", zones: "b, c, d", location: "St. Ghislain, Belgium", lat: 50.4377, lon: 3.8203 }, | |
| { accelerator: "N1+T4", regionId: "europe-west2", zones: "a, b", location: "London, UK", lat: 51.5074, lon: -0.1278 }, | |
| { accelerator: "N1+T4", regionId: "europe-west3", zones: "b", location: "Frankfurt, Germany", lat: 50.1109, lon: 8.6821 }, | |
| { accelerator: "N1+T4", regionId: "europe-west4", zones: "a, b, c", location: "Eemshaven, Netherlands", lat: 53.4427, lon: 6.8442 }, | |
| { accelerator: "N1+T4", regionId: "me-west1", zones: "b, c", location: "Tel Aviv, Israel", lat: 32.0853, lon: 34.7818 }, | |
| { accelerator: "N1+T4", regionId: "southamerica-east1", zones: "a, c", location: "Osasco, São Paulo, Brazil", lat: -23.5329, lon: -46.7920 }, | |
| { accelerator: "N1+V100", regionId: "us-central1", zones: "a, b, c, f", location: "Council Bluffs, Iowa, USA", lat: 41.2619, lon: -95.8514 }, | |
| { accelerator: "N1+V100", regionId: "us-east1", zones: "c", location: "Moncks Corner, South Carolina, USA", lat: 33.1957, lon: -79.9906 }, | |
| { accelerator: "N1+V100", regionId: "us-west1", zones: "a, b", location: "The Dalles, Oregon, USA", lat: 45.5946, lon: -121.1787 }, | |
| { accelerator: "N1+V100", regionId: "asia-east1", zones: "c", location: "Changhua County, Taiwan", lat: 24.0716, lon: 120.5469 }, | |
| { accelerator: "N1+V100", regionId: "europe-west4", zones: "a, b, c", location: "Eemshaven, Netherlands", lat: 53.4427, lon: 6.8442 }, | |
| { accelerator: "N1+P100", regionId: "us-central1", zones: "c, f", location: "Council Bluffs, Iowa, USA", lat: 41.2619, lon: -95.8514 }, | |
| { accelerator: "N1+P100", regionId: "us-east1", zones: "b, c", location: "Moncks Corner, South Carolina, USA", lat: 33.1957, lon: -79.9906 }, | |
| { accelerator: "N1+P100", regionId: "us-west1", zones: "a, b", location: "The Dalles, Oregon, USA", lat: 45.5946, lon: -121.1787 }, | |
| { accelerator: "N1+P100", regionId: "asia-east1", zones: "a, c", location: "Changhua County, Taiwan", lat: 24.0716, lon: 120.5469 }, | |
| { accelerator: "N1+P100", regionId: "australia-southeast1", zones: "c", location: "Sydney, Australia", lat: -33.8688, lon: 151.2093 }, | |
| { accelerator: "N1+P100", regionId: "europe-west1", zones: "b, d", location: "St. Ghislain, Belgium", lat: 50.4377, lon: 3.8203 }, | |
| { accelerator: "N1+P100", regionId: "europe-west4", zones: "a", location: "Eemshaven, Netherlands", lat: 53.4427, lon: 6.8442 }, | |
| { accelerator: "N1+P4", regionId: "us-central1", zones: "a, c", location: "Council Bluffs, Iowa, USA", lat: 41.2619, lon: -95.8514 }, | |
| { accelerator: "N1+P4", regionId: "us-east4", zones: "a, b, c", location: "Ashburn, Virginia, USA", lat: 39.0438, lon: -77.4874 }, | |
| { accelerator: "N1+P4", regionId: "northamerica-northeast1", zones: "a, b, c", location: "Montréal, Québec, Canada", lat: 45.5017, lon: -73.5673 }, | |
| { accelerator: "N1+P4", regionId: "us-west2", zones: "b, c", location: "Los Angeles, California, USA", lat: 34.0522, lon: -118.2437 }, | |
| { accelerator: "N1+P4", regionId: "asia-southeast1", zones: "b, c", location: "Jurong West, Singapore", lat: 1.3521, lon: 103.8198 }, | |
| { accelerator: "N1+P4", regionId: "australia-southeast1", zones: "a, b", location: "Sydney, Australia", lat: -33.8688, lon: 151.2093 }, | |
| { accelerator: "N1+P4", regionId: "europe-west4", zones: "b, c", location: "Eemshaven, Netherlands", lat: 53.4427, lon: 6.8442 } | |
| ]; | |
| // --- Process Data --- | |
| const locationsMap = new Map(); // Key: location string, Value: { lat, lon, accelerators: Set<string>, details: [] } | |
| rawData.forEach(item => { | |
| const locationKey = `${item.location}_${item.lat}_${item.lon}`; // Unique key for location | |
| if (!locationsMap.has(locationKey)) { | |
| locationsMap.set(locationKey, { | |
| name: item.location, | |
| lat: item.lat, | |
| lon: item.lon, | |
| accelerators: new Set(), | |
| details: [] | |
| }); | |
| } | |
| const locData = locationsMap.get(locationKey); | |
| locData.accelerators.add(item.accelerator); | |
| locData.details.push({ | |
| accelerator: item.accelerator, | |
| regionId: item.regionId, | |
| zones: item.zones, | |
| notes: item.notes || '' | |
| }); | |
| }); | |
| const uniqueAccelerators = [...new Set(rawData.map(item => item.accelerator))].sort(); | |
| // --- Initialize Cesium Viewer --- | |
| const viewer = new Cesium.Viewer('cesiumContainer', { | |
| terrainProvider: Cesium.createWorldTerrain(), // Optional: Needs Ion account or self-hosted terrain | |
| // imageryProvider: new Cesium.IonImageryProvider({ assetId: YOUR_IMAGERY_ASSET_ID }), // Optional | |
| animation: false, | |
| baseLayerPicker: true, | |
| fullscreenButton: false, | |
| geocoder: false, | |
| homeButton: false, | |
| infoBox: true, // Enable InfoBox for entity details | |
| sceneModePicker: true, | |
| selectionIndicator: true, | |
| timeline: false, | |
| navigationHelpButton: false, | |
| scene3DOnly: true, | |
| }); | |
| // Optional: Improve visual quality | |
| viewer.scene.globe.enableLighting = true; | |
| viewer.scene.fog.enabled = true; | |
| viewer.scene.skyAtmosphere.show = true; | |
| // --- Create Filters and Entities --- | |
| const filtersContainer = document.getElementById('acceleratorFilters'); | |
| const entities = []; // To store references to Cesium entities | |
| function createEntity(locationData) { | |
| let description = `<h3>${locationData.name}</h3><hr><ul>`; | |
| locationData.details.forEach(detail => { | |
| description += `<li><b>${detail.accelerator}</b> | |
| <br/>Region: ${detail.regionId} (Zones: ${detail.zones}) | |
| ${detail.notes ? `<br/><em>Note: ${detail.notes}</em>` : ''} | |
| </li>`; | |
| }); | |
| description += '</ul>'; | |
| const entity = viewer.entities.add({ | |
| name: locationData.name, | |
| position: Cesium.Cartesian3.fromDegrees(locationData.lon, locationData.lat), | |
| billboard: { | |
| image: 'data:image/svg+xml;base64,' + btoa(` | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48"> | |
| <circle cx="12" cy="12" r="10" fill="#007bff" stroke="white" stroke-width="1.5"/> | |
| <circle cx="12" cy="12" r="4" fill="white"/> | |
| </svg> | |
| `), // Simple blue dot SVG marker | |
| width: 24, | |
| height: 24, | |
| verticalOrigin: Cesium.VerticalOrigin.BOTTOM, | |
| }, | |
| description: description, | |
| label: { | |
| text: locationData.name, | |
| font: '12pt sans-serif', | |
| style: Cesium.LabelStyle.FILL_AND_OUTLINE, | |
| outlineWidth: 2, | |
| outlineColor: Cesium.Color.BLACK, | |
| verticalOrigin: Cesium.VerticalOrigin.BOTTOM, | |
| pixelOffset: new Cesium.Cartesian2(0, -26), // Offset label above billboard | |
| showBackground: true, | |
| backgroundColor: new Cesium.Color(0.1, 0.1, 0.1, 0.7), | |
| backgroundPadding: new Cesium.Cartesian2(7,5) | |
| }, | |
| _accelerators: locationData.accelerators // Store accelerators for filtering | |
| }); | |
| entities.push(entity); | |
| } | |
| locationsMap.forEach(createEntity); | |
| // --- Filtering Logic --- | |
| uniqueAccelerators.forEach(accel => { | |
| const checkboxId = `filter-${accel.replace(/\s+|\(|\)|\+/g, '-')}`; // Create valid ID | |
| const label = document.createElement('label'); | |
| label.htmlFor = checkboxId; | |
| const checkbox = document.createElement('input'); | |
| checkbox.type = 'checkbox'; | |
| checkbox.id = checkboxId; | |
| checkbox.value = accel; | |
| checkbox.checked = true; // Default to show all | |
| checkbox.addEventListener('change', updateEntityVisibility); | |
| label.appendChild(checkbox); | |
| label.appendChild(document.createTextNode(accel)); | |
| filtersContainer.appendChild(label); | |
| }); | |
| function updateEntityVisibility() { | |
| const selectedAccelerators = []; | |
| filtersContainer.querySelectorAll('input[type="checkbox"]:checked').forEach(cb => { | |
| selectedAccelerators.push(cb.value); | |
| }); | |
| entities.forEach(entity => { | |
| if (selectedAccelerators.length === 0) { | |
| entity.show = false; // Hide if no filters selected | |
| } else { | |
| // Show if the entity has AT LEAST ONE of the selected accelerators | |
| const hasSelectedAccelerator = Array.from(entity._accelerators).some(accel => selectedAccelerators.includes(accel)); | |
| entity.show = hasSelectedAccelerator; | |
| } | |
| }); | |
| } | |
| // Initial call to set visibility based on default checked states | |
| updateEntityVisibility(); | |
| // Fly to a general overview | |
| viewer.camera.flyTo({ | |
| destination: Cesium.Cartesian3.fromDegrees(-30, 20, 25000000), // Adjust as needed | |
| duration: 3 | |
| }); | |
| </script> | |
| </body> | |
| </html> |