Spaces:

fredmo
/

gcp-gpu-tpu-map

Running

App Files Files Community

fredmo commited on 16 days ago

Commit

763e7aa

verified ·

1 Parent(s): ea86f50

Update index.html

Browse files

Files changed (1) hide show

index.html +260 -359

index.html CHANGED Viewed

@@ -3,418 +3,319 @@
 <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>

 <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>