Update app.py

app.py

@@ -1,338 +1,341 @@
 import gradio as gr
 import requests
-import pandas as pd
 import folium
-from folium import plugins
 import json
-from datetime import datetime, timedelta
-import plotly.express as px
-import plotly.graph_objects as go
-from plotly.subplots import make_subplots
+import time
+import os
+from typing import Dict, List, Optional, Tuple
+import pandas as pd
 
-class AirQualityMonitor:
+class AirQualityMapper:
+    """Class to handle AirNow API interactions and map generation"""
+    
     def __init__(self):
-        self.base_url = "https://www.airnowapi.org/aq"
-        # You'll need to get an API key from https://docs.airnowapi.org/
-        self.api_key = "YOUR_API_KEY_HERE"  # Replace with actual API key
-        
-    def get_current_observations(self, state_code=None, bbox=None):
-        """Get current air quality observations"""
-        if not self.api_key or self.api_key == "YOUR_API_KEY_HERE":
-            # Return sample data for demo purposes
-            return self._get_sample_data()
-            
-        url = f"{self.base_url}/observation/zipCode/current/"
-        params = {
-            'format': 'application/json',
-            'API_KEY': self.api_key,
-            'distance': 100
+        self.base_url = "https://www.airnowapi.org"
+        self.aqi_colors = {
+            "Good": "#00E400",
+            "Moderate": "#FFFF00", 
+            "Unhealthy for Sensitive Groups": "#FF7E00",
+            "Unhealthy": "#FF0000",
+            "Very Unhealthy": "#8F3F97",
+            "Hazardous": "#7E0023"
         }
-        
-        if state_code:
-            # Get observations for a specific state
-            params['zipCode'] = self._get_state_zip(state_code)
-        
-        try:
-            response = requests.get(url, params=params)
-            response.raise_for_status()
-            return response.json()
-        except Exception as e:
-            print(f"API Error: {e}")
-            return self._get_sample_data()
-    
-    def _get_state_zip(self, state_code):
-        """Get a representative zip code for a state"""
-        state_zips = {
-            'CA': '90210', 'NY': '10001', 'TX': '73301', 'FL': '33101',
-            'IL': '60601', 'PA': '19101', 'OH': '43215', 'GA': '30301',
-            'NC': '27601', 'MI': '48201', 'NJ': '07001', 'VA': '23219',
-            'WA': '98101', 'AZ': '85001', 'MA': '02101', 'TN': '37201',
-            'IN': '46201', 'MO': '63101', 'MD': '21201', 'WI': '53201'
+        self.aqi_ranges = {
+            (0, 50): "Good",
+            (51, 100): "Moderate", 
+            (101, 150): "Unhealthy for Sensitive Groups",
+            (151, 200): "Unhealthy",
+            (201, 300): "Very Unhealthy",
+            (301, 500): "Hazardous"
         }
-        return state_zips.get(state_code, '90210')
     
-    def _get_sample_data(self):
-        """Return sample data for demonstration"""
-        return [
-            {
-                "DateObserved": "2025-06-29",
-                "HourObserved": 14,
-                "LocalTimeZone": "PST",
-                "ReportingArea": "Los Angeles-South Coast Air Basin",
-                "StateCode": "CA",
-                "Latitude": 34.0522,
-                "Longitude": -118.2437,
-                "ParameterName": "PM2.5",
-                "AQI": 65,
-                "Category": {"Number": 2, "Name": "Moderate"}
-            },
-            {
-                "DateObserved": "2025-06-29",
-                "HourObserved": 14,
-                "LocalTimeZone": "EST",
-                "ReportingArea": "New York",
-                "StateCode": "NY",
-                "Latitude": 40.7128,
-                "Longitude": -74.0060,
-                "ParameterName": "Ozone",
-                "AQI": 45,
-                "Category": {"Number": 1, "Name": "Good"}
-            },
-            {
-                "DateObserved": "2025-06-29",
-                "HourObserved": 14,
-                "LocalTimeZone": "CST",
-                "ReportingArea": "Chicago",
-                "StateCode": "IL",
-                "Latitude": 41.8781,
-                "Longitude": -87.6298,
-                "ParameterName": "PM2.5",
-                "AQI": 85,
-                "Category": {"Number": 3, "Name": "Unhealthy for Sensitive Groups"}
-            },
-            {
-                "DateObserved": "2025-06-29",
-                "HourObserved": 14,
-                "LocalTimeZone": "MST",
-                "ReportingArea": "Phoenix",
-                "StateCode": "AZ",
-                "Latitude": 33.4484,
-                "Longitude": -112.0740,
-                "ParameterName": "Ozone",
-                "AQI": 95,
-                "Category": {"Number": 3, "Name": "Unhealthy for Sensitive Groups"}
-            },
-            {
-                "DateObserved": "2025-06-29",
-                "HourObserved": 14,
-                "LocalTimeZone": "PST",
-                "ReportingArea": "Seattle",
-                "StateCode": "WA",
-                "Latitude": 47.6062,
-                "Longitude": -122.3321,
-                "ParameterName": "PM2.5",
-                "AQI": 25,
-                "Category": {"Number": 1, "Name": "Good"}
-            },
-            {
-                "DateObserved": "2025-06-29",
-                "HourObserved": 14,
-                "LocalTimeZone": "EST",
-                "ReportingArea": "Miami",
-                "StateCode": "FL",
-                "Latitude": 25.7617,
-                "Longitude": -80.1918,
-                "ParameterName": "Ozone",
-                "AQI": 55,
-                "Category": {"Number": 2, "Name": "Moderate"}
-            }
-        ]
-
-def get_aqi_color(aqi):
-    """Return color based on AQI value"""
-    if aqi <= 50:
-        return "#00E400"  # Green
-    elif aqi <= 100:
-        return "#FFFF00"  # Yellow
-    elif aqi <= 150:
-        return "#FF7E00"  # Orange
-    elif aqi <= 200:
-        return "#FF0000"  # Red
-    elif aqi <= 300:
-        return "#8F3F97"  # Purple
-    else:
-        return "#7E0023"  # Maroon
-
-def create_air_quality_map(data):
-    """Create an interactive map with air quality data"""
-    if not data:
-        # Create empty map centered on US
-        m = folium.Map(location=[39.8283, -98.5795], zoom_start=4)
-        folium.Marker(
-            [39.8283, -98.5795],
-            popup="No data available. Please add your AirNow API key.",
-            icon=folium.Icon(color='red')
-        ).add_to(m)
-        return m._repr_html_()
+    def get_aqi_category(self, aqi_value: int) -> str:
+        """Get AQI category based on value"""
+        for (min_val, max_val), category in self.aqi_ranges.items():
+            if min_val <= aqi_value <= max_val:
+                return category
+        return "Unknown"
     
-    # Calculate map center
-    lats = [float(station['Latitude']) for station in data]
-    lons = [float(station['Longitude']) for station in data]
-    center_lat = sum(lats) / len(lats)
-    center_lon = sum(lons) / len(lons)
+    def get_aqi_color(self, category: str) -> str:
+        """Get color for AQI category"""
+        return self.aqi_colors.get(category, "#808080")
     
-    # Create map
-    m = folium.Map(location=[center_lat, center_lon], zoom_start=4)
+    def fetch_airnow_data(self, api_key: str) -> Tuple[List[Dict], str]:
+        """
+        Fetch air quality data from AirNow API
+        Returns: (data_list, status_message)
+        """
+        if not api_key or api_key.strip() == "":
+            return [], "❌ Please enter a valid AirNow API key"
+        
+        try:
+            # Get data for major US cities and regions
+            # We'll use a comprehensive list of state capitals and major cities
+            locations = [
+                ("90210", "California"), ("10001", "New York"), ("60601", "Illinois"),
+                ("75201", "Texas"), ("33101", "Florida"), ("30301", "Georgia"),
+                ("98101", "Washington"), ("97201", "Oregon"), ("80201", "Colorado"),
+                ("85001", "Arizona"), ("89101", "Nevada"), ("84101", "Utah"),
+                ("59601", "Montana"), ("58501", "North Dakota"), ("57501", "South Dakota"),
+                ("68501", "Nebraska"), ("66601", "Kansas"), ("73101", "Oklahoma"),
+                ("55101", "Minnesota"), ("50301", "Iowa"), ("65101", "Missouri"),
+                ("72201", "Arkansas"), ("70801", "Louisiana"), ("39201", "Mississippi"),
+                ("35201", "Alabama"), ("37201", "Tennessee"), ("40601", "Kentucky"),
+                ("25301", "West Virginia"), ("23219", "Virginia"), ("27601", "North Carolina"),
+                ("29201", "South Carolina"), ("32301", "Florida"), ("01501", "Massachusetts"),
+                ("06101", "Connecticut"), ("02901", "Rhode Island"), ("03301", "New Hampshire"),
+                ("05601", "Vermont"), ("04330", "Maine"), ("19901", "Delaware"),
+                ("21201", "Maryland"), ("17101", "Pennsylvania"), ("07001", "New Jersey"),
+                ("12201", "New York"), ("43215", "Ohio"), ("46201", "Indiana"),
+                ("48601", "Michigan"), ("53201", "Wisconsin"), ("99501", "Alaska"),
+                ("96801", "Hawaii")
+            ]
+            
+            all_data = []
+            
+            for zipcode, state in locations:
+                try:
+                    # Current observations endpoint
+                    url = f"{self.base_url}/aq/observation/zipCode/current/"
+                    params = {
+                        "format": "application/json",
+                        "zipCode": zipcode,
+                        "distance": 50,  # 50 mile radius
+                        "API_KEY": api_key
+                    }
+                    
+                    response = requests.get(url, params=params, timeout=10)
+                    
+                    if response.status_code == 200:
+                        data = response.json()
+                        if data:  # If data is not empty
+                            for observation in data:
+                                observation['source_state'] = state
+                                observation['source_zipcode'] = zipcode
+                            all_data.extend(data)
+                    
+                    # Add delay to respect rate limits
+                    time.sleep(0.5)
+                    
+                except requests.exceptions.RequestException as e:
+                    continue  # Skip this location and continue with others
+            
+            if not all_data:
+                return [], "⚠️ No air quality data found. Please check your API key or try again later."
+            
+            # Remove duplicates based on reporting area
+            seen_areas = set()
+            unique_data = []
+            for item in all_data:
+                area_key = (item.get('ReportingArea', ''), item.get('StateCode', ''))
+                if area_key not in seen_areas:
+                    seen_areas.add(area_key)
+                    unique_data.append(item)
+            
+            return unique_data, f"✅ Successfully loaded {len(unique_data)} monitoring locations"
+            
+        except Exception as e:
+            return [], f"❌ Error fetching data: {str(e)}"
     
-    # Add markers for each monitoring station
-    for station in data:
-        lat = float(station['Latitude'])
-        lon = float(station['Longitude'])
-        aqi = station.get('AQI', 0)
-        parameter = station.get('ParameterName', 'Unknown')
-        area = station.get('ReportingArea', 'Unknown Area')
-        category = station.get('Category', {}).get('Name', 'Unknown')
+    def create_map(self, data: List[Dict]) -> str:
+        """Create an interactive map with air quality data"""
+        if not data:
+            # Create a basic US map if no data
+            m = folium.Map(location=[39.8283, -98.5795], zoom_start=4)
+            folium.Marker(
+                [39.8283, -98.5795],
+                popup="No data available. Please check your API key.",
+                icon=folium.Icon(color='red', icon='info-sign')
+            ).add_to(m)
+            return m._repr_html_()
+        
+        # Calculate center point of all data
+        lats = [item['Latitude'] for item in data if 'Latitude' in item]
+        lons = [item['Longitude'] for item in data if 'Longitude' in item]
         
-        color = get_aqi_color(aqi)
+        if lats and lons:
+            center_lat = sum(lats) / len(lats)
+            center_lon = sum(lons) / len(lons)
+        else:
+            center_lat, center_lon = 39.8283, -98.5795  # Center of US
         
-        popup_html = f"""
-        <div style="width: 200px;">
-            <h4>{area}</h4>
-            <p><strong>AQI:</strong> {aqi}</p>
-            <p><strong>Parameter:</strong> {parameter}</p>
-            <p><strong>Category:</strong> {category}</p>
-            <p><strong>Date:</strong> {station.get('DateObserved', 'N/A')}</p>
-            <p><strong>Time:</strong> {station.get('HourObserved', 'N/A')}:00 {station.get('LocalTimeZone', '')}</p>
+        # Create map
+        m = folium.Map(location=[center_lat, center_lon], zoom_start=4)
+        
+        # Add markers for each monitoring location
+        for item in data:
+            try:
+                lat = item.get('Latitude')
+                lon = item.get('Longitude')
+                aqi = item.get('AQI', 0)
+                parameter = item.get('ParameterName', 'Unknown')
+                area = item.get('ReportingArea', 'Unknown Area')
+                state = item.get('StateCode', 'Unknown')
+                category = item.get('Category', {}).get('Name', self.get_aqi_category(aqi))
+                
+                if lat is None or lon is None:
+                    continue
+                
+                # Get color based on AQI category
+                color = self.get_aqi_color(category)
+                
+                # Create popup content
+                popup_content = f"""
+                <div style="width: 200px;">
+                    <h4>{area}, {state}</h4>
+                    <p><b>AQI:</b> {aqi} ({category})</p>
+                    <p><b>Parameter:</b> {parameter}</p>
+                    <p><b>Location:</b> {lat:.3f}, {lon:.3f}</p>
+                    <p><b>Last Updated:</b> {item.get('DateObserved', 'Unknown')} {item.get('HourObserved', '')}:00</p>
+                </div>
+                """
+                
+                # Determine marker color based on AQI
+                if aqi <= 50:
+                    marker_color = 'green'
+                elif aqi <= 100:
+                    marker_color = 'yellow'
+                elif aqi <= 150:
+                    marker_color = 'orange'
+                elif aqi <= 200:
+                    marker_color = 'red'
+                elif aqi <= 300:
+                    marker_color = 'purple'
+                else:
+                    marker_color = 'darkred'
+                
+                # Add marker
+                folium.Marker(
+                    [lat, lon],
+                    popup=folium.Popup(popup_content, max_width=250),
+                    tooltip=f"{area}: AQI {aqi}",
+                    icon=folium.Icon(color=marker_color, icon='cloud')
+                ).add_to(m)
+                
+            except Exception as e:
+                continue  # Skip problematic markers
+        
+        # Add legend
+        legend_html = """
+        <div style="position: fixed; 
+                    bottom: 50px; left: 50px; width: 150px; height: 180px; 
+                    background-color: white; border:2px solid grey; z-index:9999; 
+                    font-size:14px; padding: 10px">
+        <h4>AQI Legend</h4>
+        <p><i class="fa fa-circle" style="color:green"></i> Good (0-50)</p>
+        <p><i class="fa fa-circle" style="color:yellow"></i> Moderate (51-100)</p>
+        <p><i class="fa fa-circle" style="color:orange"></i> Unhealthy for Sensitive (101-150)</p>
+        <p><i class="fa fa-circle" style="color:red"></i> Unhealthy (151-200)</p>
+        <p><i class="fa fa-circle" style="color:purple"></i> Very Unhealthy (201-300)</p>
+        <p><i class="fa fa-circle" style="color:darkred"></i> Hazardous (301+)</p>
         </div>
         """
+        m.get_root().html.add_child(folium.Element(legend_html))
         
-        folium.CircleMarker(
-            location=[lat, lon],
-            radius=8,
-            popup=folium.Popup(popup_html, max_width=250),
-            color='black',
-            weight=1,
-            fill=True,
-            fillColor=color,
-            fillOpacity=0.8,
-            tooltip=f"{area}: AQI {aqi}"
-        ).add_to(m)
-    
-    # Add legend
-    legend_html = '''
-    <div style="position: fixed; 
-                top: 10px; right: 10px; width: 160px; height: 140px; 
-                background-color: white; border:2px solid grey; z-index:9999; 
-                font-size:14px; padding: 10px">
-    <h4>AQI Legend</h4>
-    <p><i class="fa fa-circle" style="color:#00E400"></i> Good (0-50)</p>
-    <p><i class="fa fa-circle" style="color:#FFFF00"></i> Moderate (51-100)</p>
-    <p><i class="fa fa-circle" style="color:#FF7E00"></i> Unhealthy for Sensitive (101-150)</p>
-    <p><i class="fa fa-circle" style="color:#FF0000"></i> Unhealthy (151-200)</p>
-    <p><i class="fa fa-circle" style="color:#8F3F97"></i> Very Unhealthy (201-300)</p>
-    </div>
-    '''
-    m.get_root().html.add_child(folium.Element(legend_html))
+        return m._repr_html_()
     
-    return m._repr_html_()
+    def create_data_table(self, data: List[Dict]) -> pd.DataFrame:
+        """Create a data table from the air quality data"""
+        if not data:
+            return pd.DataFrame()
+        
+        # Extract relevant columns
+        table_data = []
+        for item in data:
+            table_data.append({
+                'Reporting Area': item.get('ReportingArea', 'Unknown'),
+                'State': item.get('StateCode', 'Unknown'),
+                'AQI': item.get('AQI', 0),
+                'Category': item.get('Category', {}).get('Name', self.get_aqi_category(item.get('AQI', 0))),
+                'Parameter': item.get('ParameterName', 'Unknown'),
+                'Date': item.get('DateObserved', 'Unknown'),
+                'Hour': item.get('HourObserved', 'Unknown'),
+                'Latitude': item.get('Latitude', 'Unknown'),
+                'Longitude': item.get('Longitude', 'Unknown')
+            })
+        
+        df = pd.DataFrame(table_data)
+        return df.sort_values('AQI', ascending=False)
 
-def create_aqi_chart(data):
-    """Create a chart showing AQI levels by location"""
-    if not data:
-        return None
-    
-    df = pd.DataFrame(data)
-    df['AQI'] = pd.to_numeric(df['AQI'], errors='coerce')
-    
-    # Create bar chart
-    fig = px.bar(df, 
-                 x='ReportingArea', 
-                 y='AQI',
-                 color='AQI',
-                 color_continuous_scale='RdYlGn_r',
-                 title='Air Quality Index by Location',
-                 labels={'AQI': 'Air Quality Index', 'ReportingArea': 'Location'})
-    
-    fig.update_layout(xaxis_tickangle=-45, height=500)
-    fig.update_traces(hovertemplate='<b>%{x}</b><br>AQI: %{y}<extra></extra>')
-    
-    return fig
+# Initialize the mapper
+mapper = AirQualityMapper()
 
-def get_air_quality_summary(data):
-    """Generate a summary of air quality data"""
-    if not data:
-        return "No air quality data available."
-    
-    df = pd.DataFrame(data)
-    df['AQI'] = pd.to_numeric(df['AQI'], errors='coerce')
+def update_map(api_key: str):
+    """Update the map with fresh air quality data"""
+    if not api_key.strip():
+        return "Please enter your AirNow API key above.", pd.DataFrame()
     
-    total_stations = len(df)
-    avg_aqi = df['AQI'].mean()
-    max_aqi = df['AQI'].max()
-    min_aqi = df['AQI'].min()
+    # Fetch data
+    data, status = mapper.fetch_airnow_data(api_key)
     
-    # Count by category
-    categories = df['Category'].apply(lambda x: x.get('Name', 'Unknown') if isinstance(x, dict) else 'Unknown')
-    category_counts = categories.value_counts()
-    
-    summary = f"""
-    ## Air Quality Summary
-    
-    **Total Monitoring Stations:** {total_stations}
-    **Average AQI:** {avg_aqi:.1f}
-    **Highest AQI:** {max_aqi}
-    **Lowest AQI:** {min_aqi}
-    
-    ### Air Quality Categories:
-    """
-    
-    for category, count in category_counts.items():
-        percentage = (count / total_stations) * 100
-        summary += f"- **{category}:** {count} stations ({percentage:.1f}%)\n"
-    
-    return summary
-
-def update_data():
-    """Main function to fetch and display air quality data"""
-    monitor = AirQualityMonitor()
-    data = monitor.get_current_observations()
+    # Create map
+    map_html = mapper.create_map(data)
     
-    map_html = create_air_quality_map(data)
-    chart = create_aqi_chart(data)
-    summary = get_air_quality_summary(data)
+    # Create data table
+    df = mapper.create_data_table(data)
     
-    return map_html, chart, summary
+    return map_html, df
 
 # Create Gradio interface
-with gr.Blocks(title="Air Quality Monitor", theme=gr.themes.Soft()) as demo:
-    gr.Markdown("# 🌬️ Real-Time Air Quality Monitor")
-    gr.Markdown("Monitor air quality data from NOAA/EPA AirNow stations across the United States")
-    
-    with gr.Row():
-        gr.Markdown("""
-        This application displays real-time air quality data from over 2,000 monitoring stations 
-        across the United States. The data includes Air Quality Index (AQI) values for various 
-        pollutants like PM2.5, PM10, Ozone, and more.
+with gr.Blocks(title="AirNow Air Quality Sensor Map", theme=gr.themes.Soft()) as demo:
+    gr.Markdown(
+        """
+        # 🌬️ AirNow Air Quality Sensor Map
         
-        **Note:** To access live data, you need to:
-        1. Get a free API key from [AirNow API](https://docs.airnowapi.org/)
-        2. Replace `YOUR_API_KEY_HERE` in the code with your actual API key
+        This interactive map displays real-time air quality data from EPA's AirNow network of over 2,000 monitoring stations across the United States.
         
-        Currently showing sample data for demonstration.
-        """)
-    
-    with gr.Row():
-        update_btn = gr.Button("🔄 Update Air Quality Data", variant="primary", size="lg")
+        ## How to use:
+        1. **Get an API Key**: Register for a free API key at [docs.airnowapi.org](https://docs.airnowapi.org/)
+        2. **Enter your API key** in the field below
+        3. **Click "Load Air Quality Data"** to fetch current readings
+        4. **Explore the map**: Click on markers to see detailed information about each monitoring station
+        
+        ## About the Data:
+        - Data is updated hourly from state, local, tribal, and federal air quality agencies
+        - Colors indicate Air Quality Index (AQI) levels from Good (green) to Hazardous (dark red)
+        - AQI values tell you how clean or polluted the air is and associated health effects
+        
+        **⚠️ Note**: This data is preliminary and should not be used for regulatory decisions. For official data, visit [EPA's AirData](https://www.epa.gov/outdoor-air-quality-data).
+        """
+    )
     
     with gr.Row():
-        with gr.Column(scale=2):
-            map_output = gr.HTML(label="Air Quality Map")
+        with gr.Column(scale=3):
+            api_key_input = gr.Textbox(
+                label="AirNow API Key",
+                placeholder="Enter your AirNow API key here...",
+                type="password",
+                info="Get your free API key at docs.airnowapi.org"
+            )
         with gr.Column(scale=1):
-            summary_output = gr.Markdown(label="Summary")
+            load_button = gr.Button("Load Air Quality Data", variant="primary", size="lg")
     
-    with gr.Row():
-        chart_output = gr.Plot(label="AQI Chart")
+    status_text = gr.Markdown("Enter your API key and click 'Load Air Quality Data' to begin.")
     
-    # Add information section
-    with gr.Row():
-        gr.Markdown("""
-        ## About Air Quality Index (AQI)
+    with gr.Tabs():
+        with gr.TabItem("Interactive Map"):
+            map_output = gr.HTML(label="Air Quality Map", height=600)
         
-        The AQI is an index for reporting daily air quality. It tells you how clean or polluted your air is:
+        with gr.TabItem("Data Table"):
+            data_table = gr.Dataframe(
+                label="Air Quality Monitoring Stations",
+                height=500,
+                interactive=False
+            )
+    
+    gr.Markdown(
+        """
+        ## AQI Health Guidelines:
+        
+        - **Good (0-50)**: Air quality is satisfactory for everyone
+        - **Moderate (51-100)**: Air quality is acceptable for most people
+        - **Unhealthy for Sensitive Groups (101-150)**: Members of sensitive groups may experience health effects
+        - **Unhealthy (151-200)**: Everyone may begin to experience health effects
+        - **Very Unhealthy (201-300)**: Health warnings of emergency conditions
+        - **Hazardous (301+)**: Health alert - everyone may experience serious health effects
         
-        - **Good (0-50)**: 🟢 Air quality is satisfactory
-        - **Moderate (51-100)**: 🟡 Acceptable for most people
-        - **Unhealthy for Sensitive Groups (101-150)**: 🟠 May cause problems for sensitive individuals
-        - **Unhealthy (151-200)**: 🔴 May cause health problems for everyone
-        - **Very Unhealthy (201-300)**: 🟣 Health alert for everyone
-        - **Hazardous (301+)**: 🟤 Health emergency
+        ## Data Sources:
+        - **AirNow API**: Real-time air quality data from EPA's monitoring network
+        - **Monitoring Agencies**: 120+ local, state, tribal, and federal government agencies
+        - **Update Frequency**: Hourly observations, daily forecasts
         
-        **Data Source:** EPA AirNow - Real-time air quality observations from government monitoring stations
-        """)
+        ## Links:
+        - [AirNow.gov](https://www.airnow.gov) - Official air quality information
+        - [AirNow API Documentation](https://docs.airnowapi.org/) - API documentation and registration
+        - [EPA AirData](https://www.epa.gov/outdoor-air-quality-data) - Official regulatory air quality data
+        """
+    )
     
-    # Load initial data
-    demo.load(update_data, outputs=[map_output, chart_output, summary_output])
-    update_btn.click(update_data, outputs=[map_output, chart_output, summary_output])
+    # Set up event handler
+    load_button.click(
+        fn=update_map,
+        inputs=[api_key_input],
+        outputs=[map_output, data_table]
+    ).then(
+        fn=lambda: "Map updated with latest air quality data! 🌍",
+        outputs=[status_text]
+    )
 
+# Launch the app
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch(share=True)