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 Availability Map</title> | |
| <style> | |
| body { margin: 0; font-family: sans-serif; background-color: #111; color: #eee; } | |
| #globeViz { width: 100vw; height: 100vh; } | |
| #controls { | |
| position: absolute; | |
| top: 10px; | |
| left: 10px; | |
| background: rgba(0, 0, 0, 0.7); | |
| padding: 15px; | |
| border-radius: 5px; | |
| max-height: 90vh; | |
| overflow-y: auto; | |
| z-index: 10; | |
| } | |
| #controls h3 { margin-top: 0; border-bottom: 1px solid #555; padding-bottom: 5px; } | |
| #controls label { | |
| display: block; | |
| margin-bottom: 8px; | |
| cursor: pointer; | |
| font-size: 0.9em; | |
| } | |
| #controls input[type="checkbox"] { | |
| margin-right: 5px; | |
| } | |
| #info-panel { | |
| position: absolute; | |
| bottom: 10px; | |
| left: 10px; | |
| background: rgba(0, 0, 0, 0.8); | |
| padding: 10px; | |
| border-radius: 5px; | |
| max-width: 300px; | |
| font-size: 0.85em; | |
| z-index: 10; | |
| display: none; /* Hidden by default */ | |
| } | |
| #info-panel h4 { margin: 0 0 5px 0; } | |
| #info-panel ul { margin: 0; padding-left: 15px; } | |
| #info-panel li { margin-bottom: 3px; } | |
| </style> | |
| <!-- Import globe.gl library --> | |
| <script src="//unpkg.com/three"></script> | |
| <script src="//unpkg.com/globe.gl"></script> | |
| </head> | |
| <body> | |
| <div id="globeViz"></div> | |
| <div id="controls"> | |
| <h3>Filter by Accelerator:</h3> | |
| <div id="accelerator-filters"> | |
| <!-- Filters will be populated by JavaScript --> | |
| </div> | |
| <button id="show-all" style="margin-top: 10px; padding: 5px 10px;">Show All</button> | |
| <button id="hide-all" style="margin-top: 10px; padding: 5px 10px;">Hide All</button> | |
| </div> | |
| <div id="info-panel"> | |
| <!-- Info about hovered location --> | |
| </div> | |
| <script> | |
| // --- 1. Data Processing --- | |
| // Raw data based on the provided table | |
| // Note: Some locations might be slightly approximated. Need exact coordinates for higher precision. | |
| // Note: Handling duplicates and summarizing zones/notes. | |
| const rawData = [ | |
| { accel: "TPU v2", region: "us-central1", zones: "b, c, f", location: "Council Bluffs, Iowa, USA" }, | |
| { accel: "TPU v2", region: "europe-west4", zones: "a", location: "Eemshaven, Netherlands" }, | |
| { accel: "TPU v2", region: "asia-east1", zones: "c", location: "Changhua County, Taiwan" }, | |
| // Some TPU v2/v3 entries seem redundant in the input, consolidating them by location | |
| { accel: "TPU v3", region: "us-central1", zones: "a, b, f", location: "Council Bluffs, Iowa, USA" }, | |
| { accel: "TPU v3", region: "europe-west4", zones: "a", location: "Eemshaven, Netherlands" }, | |
| { accel: "TPU v4", region: "us-central2", zones: "b", location: "Council Bluffs, Iowa, USA", notes: "Location assumed near us-central1" }, // Added note about assumption | |
| { accel: "TPU v5e", region: "us-central1", zones: "a", location: "Council Bluffs, Iowa, USA" }, | |
| { accel: "TPU v5e", region: "us-east5", zones: "a, b, c", location: "Columbus, Ohio, USA" }, | |
| { accel: "TPU v5e", region: "us-south1", zones: "a", location: "Dallas, Texas, USA" }, | |
| { accel: "TPU v5e", region: "us-west1", zones: "c", location: "The Dalles, Oregon, USA" }, | |
| { accel: "TPU v5e", region: "us-west4", zones: "a", location: "Las Vegas, Nevada, USA" }, | |
| { accel: "TPU v5e", region: "europe-west1", zones: "b", location: "St. Ghislain, Belgium" }, | |
| { accel: "TPU v5e", region: "asia-southeast1", zones: "b", location: "Jurong West, Singapore" }, | |
| { accel: "TPU v5p", region: "us-east5", zones: "a", location: "Columbus, Ohio, USA" }, | |
| { accel: "TPU v5p", region: "europe-west4", zones: "b", location: "Eemshaven, Netherlands" }, | |
| { accel: "TPU v6e", region: "us-east1", zones: "d", location: "Moncks Corner, South Carolina, USA" }, | |
| { accel: "TPU v6e", region: "us-east5", zones: "b", location: "Columbus, Ohio, USA" }, | |
| { accel: "TPU v6e", region: "europe-west4", zones: "a", location: "Eemshaven, Netherlands" }, | |
| { accel: "TPU v6e", region: "asia-northeast1", zones: "b", location: "Tokyo, Japan" }, | |
| { accel: "H100 A3 Mega", region: "us-central1", zones: "a, b*, c", location: "Council Bluffs, Iowa, USA", notes: "b: Limited capacity" }, | |
| { accel: "H100 A3 Mega", region: "us-east4", zones: "a, b, c", location: "Ashburn, Virginia, USA" }, | |
| { accel: "H100 A3 Mega", region: "us-west1", zones: "a, b", location: "The Dalles, Oregon, USA" }, | |
| { accel: "H100 A3 Mega", region: "us-west4", zones: "a", location: "Las Vegas, Nevada, USA" }, | |
| { accel: "H100 A3 Mega", region: "asia-northeast1", zones: "b", location: "Tokyo, Japan" }, | |
| { accel: "H100 A3 Mega", region: "asia-southeast1", zones: "b, c", location: "Jurong West, Singapore" }, | |
| { accel: "H100 A3 Mega", region: "australia-southeast1", zones: "c*", location: "Sydney, Australia", notes: "Limited capacity" }, | |
| { accel: "H100 A3 Mega", region: "europe-west1", zones: "b*, c*", location: "St. Ghislain, Belgium", notes: "Limited capacity" }, | |
| { accel: "H100 A3 Mega", region: "europe-west4", zones: "b, c", location: "Eemshaven, Netherlands" }, | |
| { accel: "H100 A3 High", region: "us-central1", zones: "a, c", location: "Council Bluffs, Iowa, USA" }, | |
| { accel: "H100 A3 High", region: "us-east4", zones: "a, b", location: "Ashburn, Virginia, USA" }, | |
| { accel: "H100 A3 High", region: "us-east5", zones: "a", location: "Columbus, Ohio, USA" }, | |
| { accel: "H100 A3 High", region: "us-west1", zones: "a, b", location: "The Dalles, Oregon, USA" }, | |
| { accel: "H100 A3 High", region: "us-west4", zones: "a", location: "Las Vegas, Nevada, USA" }, | |
| { accel: "H100 A3 High", region: "asia-northeast1", zones: "b", location: "Tokyo, Japan" }, | |
| { accel: "H100 A3 High", region: "asia-southeast1", zones: "b, c", location: "Jurong West, Singapore" }, | |
| { accel: "H100 A3 High", region: "europe-west1", zones: "b*", location: "St. Ghislain, Belgium", notes: "Limited capacity" }, | |
| { accel: "H100 A3 Edge", region: "northamerica-northeast2", zones: "c", location: "Toronto, Ontario, Canada" }, | |
| { accel: "H100 A3 Edge", region: "asia-northeast1", zones: "b", location: "Tokyo, Japan" }, | |
| { accel: "H100 A3 Edge", region: "asia-northeast3", zones: "a, c", location: "Seoul, South Korea" }, | |
| { accel: "H100 A3 Edge", region: "asia-south1", zones: "c", location: "Mumbai, India" }, | |
| { accel: "H100 A3 Edge", region: "europe-west2", zones: "b", location: "London, UK" }, | |
| { accel: "H100 A3 Edge", region: "europe-west3", zones: "a", location: "Frankfurt, Germany" }, | |
| { accel: "A100 A2 Ultra", region: "us-central1", zones: "a, c", location: "Council Bluffs, Iowa, USA" }, | |
| { accel: "A100 A2 Ultra", region: "us-east4", zones: "c", location: "Ashburn, Virginia, USA" }, | |
| { accel: "A100 A2 Ultra", region: "us-east5", zones: "b", location: "Columbus, Ohio, USA" }, | |
| { accel: "A100 A2 Ultra", region: "asia-southeast1", zones: "c", location: "Jurong West, Singapore" }, | |
| { accel: "A100 A2 Ultra", region: "europe-west4", zones: "a, b, c", location: "Eemshaven, Netherlands" }, | |
| { accel: "A100 40GB A2 Standard", region: "us-central1", zones: "a*, b*, c*, f*", location: "Council Bluffs, Iowa, USA", notes: "a2-megagpu-16g only" }, | |
| { accel: "A100 40GB A2 Standard", region: "us-east1", zones: "b", location: "Moncks Corner, South Carolina, USA" }, | |
| { accel: "A100 40GB A2 Standard", region: "us-west1", zones: "b", location: "The Dalles, Oregon, USA" }, | |
| { accel: "A100 40GB A2 Standard", region: "us-west3", zones: "b", location: "Salt Lake City, Utah, USA" }, | |
| { accel: "A100 40GB A2 Standard", region: "us-west4", zones: "b", location: "Las Vegas, Nevada, USA" }, | |
| { accel: "A100 40GB A2 Standard", region: "asia-northeast1", zones: "a, c", location: "Tokyo, Japan" }, | |
| { accel: "A100 40GB A2 Standard", region: "asia-northeast3", zones: "a, b", location: "Seoul, South Korea" }, | |
| { accel: "A100 40GB A2 Standard", region: "asia-southeast1", zones: "b, c*", location: "Jurong West, Singapore", notes: "c: a2-megagpu-16g only" }, | |
| { accel: "A100 40GB A2 Standard", region: "me-west1", zones: "a, c", location: "Tel Aviv, Israel" }, | |
| { accel: "A100 40GB A2 Standard", region: "europe-west4", zones: "a*, b*", location: "Eemshaven, Netherlands", notes: "a2-megagpu-16g only" }, | |
| { accel: "G2 (L4)", region: "us-central1", zones: "a, b, c", location: "Council Bluffs, Iowa, USA" }, | |
| { accel: "G2 (L4)", region: "us-east1", zones: "b, c, d", location: "Moncks Corner, South Carolina, USA" }, | |
| { accel: "G2 (L4)", region: "us-east4", zones: "a", location: "Ashburn, Virginia, USA" }, | |
| { accel: "G2 (L4)", region: "us-west1", zones: "a, b, c", location: "The Dalles, Oregon, USA" }, | |
| { accel: "G2 (L4)", region: "us-west4", zones: "a, c", location: "Las Vegas, Nevada, USA" }, | |
| { accel: "G2 (L4)", region: "northamerica-northeast2", zones: "a", location: "Toronto, Ontario, Canada" }, | |
| { accel: "G2 (L4)", region: "asia-east1", zones: "a, b, c", location: "Changhua County, Taiwan" }, | |
| { accel: "G2 (L4)", region: "asia-northeast1", zones: "a, b, c", location: "Tokyo, Japan" }, | |
| { accel: "G2 (L4)", region: "asia-northeast3", zones: "a, b", location: "Seoul, South Korea" }, | |
| { accel: "G2 (L4)", region: "asia-south1", zones: "a, b, c", location: "Mumbai, India" }, | |
| { accel: "G2 (L4)", region: "asia-southeast1", zones: "a, b, c", location: "Jurong West, Singapore" }, | |
| { accel: "G2 (L4)", region: "australia-southeast1", zones: "a", location: "Sydney, Australia" }, | |
| { accel: "G2 (L4)", region: "europe-west1", zones: "b, c", location: "St. Ghislain, Belgium" }, | |
| { accel: "G2 (L4)", region: "europe-west2", zones: "a, b", location: "London, UK" }, | |
| { accel: "G2 (L4)", region: "europe-west3", zones: "a, b", location: "Frankfurt, Germany" }, | |
| { accel: "G2 (L4)", region: "europe-west4", zones: "a, b, c", location: "Eemshaven, Netherlands" }, | |
| { accel: "G2 (L4)", region: "europe-west6", zones: "b, c", location: "Zurich, Switzerland" }, | |
| { accel: "G2 (L4)", region: "me-central2", zones: "a", location: "Dammam, Saudi Arabia" }, | |
| { accel: "N1+T4", region: "us-central1", zones: "a, b, f", location: "Council Bluffs, Iowa, USA" }, | |
| { accel: "N1+T4", region: "us-east1", zones: "c, d", location: "Moncks Corner, South Carolina, USA" }, | |
| { accel: "N1+T4", region: "us-east4", zones: "a, b", location: "Ashburn, Virginia, USA" }, | |
| { accel: "N1+T4", region: "us-west1", zones: "a, b", location: "The Dalles, Oregon, USA" }, | |
| { accel: "N1+T4", region: "us-west3", zones: "b", location: "Salt Lake City, Utah, USA" }, | |
| { accel: "N1+T4", region: "us-west4", zones: "a, b", location: "Las Vegas, Nevada, USA" }, | |
| { accel: "N1+T4", region: "northamerica-northeast1", zones: "c", location: "Montréal, Québec, Canada" }, | |
| { accel: "N1+T4", region: "asia-east1", zones: "a, c", location: "Changhua County, Taiwan" }, | |
| { accel: "N1+T4", region: "asia-east2", zones: "a, c", location: "Hong Kong" }, | |
| { accel: "N1+T4", region: "asia-northeast1", zones: "a, c", location: "Tokyo, Japan" }, | |
| { accel: "N1+T4", region: "asia-northeast3", zones: "b, c", location: "Seoul, South Korea" }, | |
| { accel: "N1+T4", region: "asia-south1", zones: "a, b", location: "Mumbai, India" }, | |
| { accel: "N1+T4", region: "asia-southeast1", zones: "a, b, c", location: "Jurong West, Singapore" }, | |
| { accel: "N1+T4", region: "asia-southeast2", zones: "a", location: "Jakarta, Indonesia" }, | |
| { accel: "N1+T4", region: "australia-southeast1", zones: "a, c", location: "Sydney, Australia" }, | |
| { accel: "N1+T4", region: "europe-central2", zones: "b, c", location: "Warsaw, Poland" }, | |
| { accel: "N1+T4", region: "europe-west1", zones: "b, c, d", location: "St. Ghislain, Belgium" }, | |
| { accel: "N1+T4", region: "europe-west2", zones: "a, b", location: "London, UK" }, | |
| { accel: "N1+T4", region: "europe-west3", zones: "b", location: "Frankfurt, Germany" }, | |
| { accel: "N1+T4", region: "europe-west4", zones: "a, b, c", location: "Eemshaven, Netherlands" }, | |
| { accel: "N1+T4", region: "me-west1", zones: "b, c", location: "Tel Aviv, Israel" }, | |
| { accel: "N1+T4", region: "southamerica-east1", zones: "a, c", location: "Osasco, São Paulo, Brazil" }, | |
| { accel: "N1+V100", region: "us-central1", zones: "a, b, c, f", location: "Council Bluffs, Iowa, USA" }, | |
| { accel: "N1+V100", region: "us-east1", zones: "c", location: "Moncks Corner, South Carolina, USA" }, | |
| { accel: "N1+V100", region: "us-west1", zones: "a, b", location: "The Dalles, Oregon, USA" }, | |
| { accel: "N1+V100", region: "asia-east1", zones: "c", location: "Changhua County, Taiwan" }, | |
| { accel: "N1+V100", region: "europe-west4", zones: "a, b, c", location: "Eemshaven, Netherlands" }, | |
| { accel: "N1+P100", region: "us-central1", zones: "c, f", location: "Council Bluffs, Iowa, USA" }, | |
| { accel: "N1+P100", region: "us-east1", zones: "b, c", location: "Moncks Corner, South Carolina, USA" }, | |
| { accel: "N1+P100", region: "us-west1", zones: "a, b", location: "The Dalles, Oregon, USA" }, | |
| { accel: "N1+P100", region: "asia-east1", zones: "a, c", location: "Changhua County, Taiwan" }, | |
| { accel: "N1+P100", region: "australia-southeast1", zones: "c", location: "Sydney, Australia" }, | |
| { accel: "N1+P100", region: "europe-west1", zones: "b, d", location: "St. Ghislain, Belgium" }, | |
| { accel: "N1+P100", region: "europe-west4", zones: "a", location: "Eemshaven, Netherlands" }, | |
| { accel: "N1+P4", region: "us-central1", zones: "a, c", location: "Council Bluffs, Iowa, USA" }, | |
| { accel: "N1+P4", region: "us-east4", zones: "a, b, c", location: "Ashburn, Virginia, USA" }, | |
| { accel: "N1+P4", region: "northamerica-northeast1", zones: "a, b, c", location: "Montréal, Québec, Canada" }, | |
| { accel: "N1+P4", region: "us-west2", zones: "b, c", location: "Los Angeles, California, USA" }, | |
| { accel: "N1+P4", region: "asia-southeast1", zones: "b, c", location: "Jurong West, Singapore" }, | |
| { accel: "N1+P4", region: "australia-southeast1", zones: "a, b", location: "Sydney, Australia" }, | |
| { accel: "N1+P4", region: "europe-west4", zones: "b, c", location: "Eemshaven, Netherlands" } | |
| ]; | |
| // Geocode locations (Approximate coordinates) | |
| const locationsCoords = { | |
| "Council Bluffs, Iowa, USA": { lat: 41.2619, lng: -95.8513 }, | |
| "Eemshaven, Netherlands": { lat: 53.4421, lng: 6.8349 }, | |
| "Changhua County, Taiwan": { lat: 24.0729, lng: 120.5446 }, | |
| "Columbus, Ohio, USA": { lat: 39.9612, lng: -82.9988 }, | |
| "Dallas, Texas, USA": { lat: 32.7767, lng: -96.7970 }, | |
| "The Dalles, Oregon, USA": { lat: 45.5946, lng: -121.1787 }, | |
| "Las Vegas, Nevada, USA": { lat: 36.1699, lng: -115.1398 }, | |
| "St. Ghislain, Belgium": { lat: 50.4430, lng: 3.8181 }, | |
| "Jurong West, Singapore": { lat: 1.3392, lng: 103.7062 }, | |
| "Moncks Corner, South Carolina, USA": { lat: 33.1918, lng: -80.0173 }, | |
| "Tokyo, Japan": { lat: 35.6895, lng: 139.6917 }, | |
| "Ashburn, Virginia, USA": { lat: 39.0438, lng: -77.4874 }, | |
| "Sydney, Australia": { lat: -33.8688, lng: 151.2093 }, | |
| "Toronto, Ontario, Canada": { lat: 43.6532, lng: -79.3832 }, | |
| "Seoul, South Korea": { lat: 37.5665, lng: 126.9780 }, | |
| "Mumbai, India": { lat: 19.0760, lng: 72.8777 }, | |
| "London, UK": { lat: 51.5074, lng: -0.1278 }, | |
| "Frankfurt, Germany": { lat: 50.1109, lng: 8.6821 }, | |
| "Salt Lake City, Utah, USA": { lat: 40.7608, lng: -111.8910 }, | |
| "Tel Aviv, Israel": { lat: 32.0853, lng: 34.7818 }, | |
| "Zurich, Switzerland": { lat: 47.3769, lng: 8.5417 }, | |
| "Dammam, Saudi Arabia": { lat: 26.4207, lng: 50.0888 }, | |
| "Montréal, Québec, Canada": { lat: 45.5017, lng: -73.5673 }, | |
| "Hong Kong": { lat: 22.3193, lng: 114.1694 }, | |
| "Jakarta, Indonesia": { lat: -6.2088, lng: 106.8456 }, | |
| "Warsaw, Poland": { lat: 52.2297, lng: 21.0122 }, | |
| "Osasco, São Paulo, Brazil": { lat: -23.5329, lng: -46.7919 }, | |
| "Los Angeles, California, USA": { lat: 34.0522, lng: -118.2437 } | |
| }; | |
| // Aggregate data by location | |
| const locationsData = {}; | |
| const uniqueAccelerators = new Set(); | |
| rawData.forEach(item => { | |
| const locName = item.location; | |
| if (!locationsCoords[locName]) { | |
| console.warn(`Coordinates not found for: ${locName}`); | |
| return; // Skip if no coordinates | |
| } | |
| if (!locationsData[locName]) { | |
| locationsData[locName] = { | |
| name: locName, | |
| lat: locationsCoords[locName].lat, | |
| lng: locationsCoords[locName].lng, | |
| accelerators: [] | |
| }; | |
| } | |
| // Add accelerator details if not already present for this location | |
| // (Simple check based on accel name only for this example) | |
| if (!locationsData[locName].accelerators.some(a => a.name === item.accel)) { | |
| locationsData[locName].accelerators.push({ | |
| name: item.accel, | |
| region: item.region, | |
| zones: item.zones, | |
| notes: item.notes || '' // Include notes if available | |
| }); | |
| } | |
| uniqueAccelerators.add(item.accel); | |
| }); | |
| // Convert aggregated data to array format for globe.gl | |
| const pointsData = Object.values(locationsData); | |
| // Sort accelerator names for consistent filter order | |
| const sortedAccelerators = Array.from(uniqueAccelerators).sort(); | |
| // --- 2. Globe Initialization & Configuration --- | |
| const myGlobe = Globe(); | |
| const globeVizElement = document.getElementById('globeViz'); | |
| const infoPanel = document.getElementById('info-panel'); | |
| myGlobe(globeVizElement) | |
| .globeImageUrl('//unpkg.com/three-globe/example/img/earth-night.jpg') | |
| .backgroundImageUrl('//unpkg.com/three-globe/example/img/night-sky.png') | |
| .pointsData(pointsData) // Initial data | |
| .pointColor(() => '#67ff94') // Nice bright green color for markers | |
| .pointAltitude(0.01) // Slightly raise points off the surface | |
| .pointRadius(0.25) // Adjust size as needed | |
| .pointLabel(d => d.name) | |
| .onPointHover(d => { // Show info panel on hover | |
| if (d) { | |
| infoPanel.style.display = 'block'; | |
| let accelHtml = '<ul>'; | |
| d.accelerators.forEach(accel => { | |
| accelHtml += `<li><b>${accel.name}</b> (${accel.region}: ${accel.zones})${accel.notes ? ` <i>(${accel.notes})</i>` : ''}</li>`; | |
| }); | |
| accelHtml += '</ul>'; | |
| infoPanel.innerHTML = `<h4>${d.name}</h4>${accelHtml}`; | |
| } else { | |
| infoPanel.style.display = 'none'; // Hide if not hovering over a point | |
| } | |
| }); | |
| // Auto-rotate globe initially | |
| myGlobe.controls().autoRotate = true; | |
| myGlobe.controls().autoRotateSpeed = 0.2; | |
| // Stop auto-rotate on user interaction | |
| myGlobe.controls().addEventListener('start', () => { | |
| myGlobe.controls().autoRotate = false; | |
| }); | |
| // --- 3. Filter Implementation --- | |
| const filtersContainer = document.getElementById('accelerator-filters'); | |
| const filterCheckboxes = []; | |
| sortedAccelerators.forEach(accel => { | |
| const label = document.createElement('label'); | |
| const checkbox = document.createElement('input'); | |
| checkbox.type = 'checkbox'; | |
| checkbox.value = accel; | |
| checkbox.checked = true; // Start with all checked | |
| checkbox.addEventListener('change', updateFilters); | |
| label.appendChild(checkbox); | |
| label.appendChild(document.createTextNode(` ${accel}`)); | |
| filtersContainer.appendChild(label); | |
| filterCheckboxes.push(checkbox); | |
| }); | |
| function updateFilters() { | |
| const selectedAccelerators = filterCheckboxes | |
| .filter(cb => cb.checked) | |
| .map(cb => cb.value); | |
| const filteredPoints = pointsData.filter(location => { | |
| // Keep location if it has at least one of the selected accelerators | |
| return location.accelerators.some(accel => selectedAccelerators.includes(accel.name)); | |
| }); | |
| myGlobe.pointsData(filteredPoints); // Update the globe | |
| } | |
| // Show/Hide All buttons | |
| document.getElementById('show-all').addEventListener('click', () => { | |
| filterCheckboxes.forEach(cb => cb.checked = true); | |
| updateFilters(); | |
| }); | |
| document.getElementById('hide-all').addEventListener('click', () => { | |
| filterCheckboxes.forEach(cb => cb.checked = false); | |
| updateFilters(); | |
| }); | |
| // --- 4. Initial Setup --- | |
| // Optional: Center the view on a specific point initially | |
| // myGlobe.pointOfView({ lat: 30, lng: -20, altitude: 2.5 }); | |
| // Handle window resize | |
| window.addEventListener('resize', () => { | |
| myGlobe.width(window.innerWidth); | |
| myGlobe.height(window.innerHeight); | |
| }); | |
| </script> | |
| </body> | |
| </html> |