Update air_quality_map.py

air_quality_map.py

@@ -561,390 +561,6 @@ class AirQualityApp:
                 "city_name": "New York",
                 "county_name": "New York",
                 "state_name": "New York",
-                "cbsa_name": "New York-Newark-Jersey City",
-                "date_established": "1998-01-01",
-                "last_sample_date": "2024-04-10"
-            }
-        ]
-        
-        # Texas monitors (South)
-        tx_monitors = [
-            {
-                "state_code": "48",
-                "county_code": "201",
-                "site_number": "0024",
-                "parameter_code": "88101",
-                "parameter_name": "PM2.5 - Local Conditions",
-                "poc": 1,
-                "latitude": 29.7349,
-                "longitude": -95.3063,
-                "local_site_name": "Houston - Clinton Drive",
-                "address": "9525 Clinton Drive",
-                "city_name": "Houston",
-                "county_name": "Harris",
-                "state_name": "Texas",
-                "cbsa_name": "Houston-The Woodlands-Sugar Land",
-                "date_established": "1997-09-01",
-                "last_sample_date": "2024-04-10"
-            },
-            {
-                "state_code": "48",
-                "county_code": "113",
-                "site_number": "0050",
-                "parameter_code": "44201",
-                "parameter_name": "Ozone",
-                "poc": 1,
-                "latitude": 32.8198,
-                "longitude": -96.8602,
-                "local_site_name": "Dallas - Hinton Street",
-                "address": "1415 Hinton Street",
-                "city_name": "Dallas",
-                "county_name": "Dallas",
-                "state_name": "Texas",
-                "cbsa_name": "Dallas-Fort Worth-Arlington",
-                "date_established": "1998-01-01",
-                "last_sample_date": "2024-04-10"
-            }
-        ]
-        
-        # Midwest monitors
-        midwest_monitors = [
-            {
-                "state_code": "17",
-                "county_code": "031",
-                "site_number": "0076",
-                "parameter_code": "88101",
-                "parameter_name": "PM2.5 - Local Conditions",
-                "poc": 1,
-                "latitude": 41.7513,
-                "longitude": -87.7130,
-                "local_site_name": "Chicago - Ashburn",
-                "address": "3535 West 110th Street",
-                "city_name": "Chicago",
-                "county_name": "Cook",
-                "state_name": "Illinois",
-                "cbsa_name": "Chicago-Naperville-Elgin",
-                "date_established": "1999-01-01",
-                "last_sample_date": "2024-04-10"
-            },
-            {
-                "state_code": "26",
-                "county_code": "163",
-                "site_number": "0015",
-                "parameter_code": "88101",
-                "parameter_name": "PM2.5 - Local Conditions",
-                "poc": 1,
-                "latitude": 42.3328,
-                "longitude": -83.1501,
-                "local_site_name": "Detroit - W 7 Mile",
-                "address": "10748 West 7 Mile Road",
-                "city_name": "Detroit",
-                "county_name": "Wayne",
-                "state_name": "Michigan",
-                "cbsa_name": "Detroit-Warren-Dearborn",
-                "date_established": "1999-01-01",
-                "last_sample_date": "2024-04-10"
-            }
-        ]
-        
-        # Combine all regions
-        all_monitors.extend(ca_monitors)
-        all_monitors.extend(ny_monitors)
-        all_monitors.extend(tx_monitors)
-        all_monitors.extend(midwest_monitors)
-        
-        # Filter by coordinates
-        filtered_monitors = []
-        for monitor in all_monitors:
-            lat = float(monitor.get("latitude", 0))
-            lon = float(monitor.get("longitude", 0))
-            if min_lat <= lat <= max_lat and min_lon <= lon <= max_lon:
-                filtered_monitors.append(monitor)
-        
-        # Filter by parameter code if provided
-        if parameter_code:
-            filtered_monitors = [m for m in filtered_monitors if m["parameter_code"] == parameter_code]
-            
-        return filtered_monitors
-    
-    def create_bound_event_handler(self):
-        """Create a custom JavaScript element to handle map events and load data dynamically"""
-        
-        class BoundEventHandler(MacroElement):
-            """
-            An element that will be added to the map to handle events.
-            This is where we'll add JavaScript to reload markers when the map view changes.
-            """
-            
-            def __init__(self):
-                super(BoundEventHandler, self).__init__()
-                self._name = "BoundEventHandler"
-            
-            def render(self, **kwargs):
-                """Render the JavaScript for handling bounds changes"""
-                figure = self.get_root()
-                assert isinstance(figure, Figure), "You must add this to a folium Figure (map)"
-                
-                # Add necessary JavaScript libraries
-                figure.header.add_child(JavascriptLink("https://code.jquery.com/jquery-3.7.1.min.js"))
-                
-                # Create JavaScript to handle map bounds changes and load data
-                script = """
-                <script>
-                // Wait for the map to be created and fully loaded
-                $(document).ready(function() {
-                    // This function will run once the map is loaded
-                    setTimeout(function() {
-                        // Get the map instance
-                        var map = Object.values(window).find(function(v) {
-                            return v && v.layerManager && v.layerManager._map;
-                        });
-                        
-                        if (!map) {
-                            console.error("Could not find map instance");
-                            return;
-                        }
-                        
-                        var foliumMap = map.layerManager._map;
-                        
-                        // Function to get data when bounds change
-                        function loadDataForBounds() {
-                            // Get current map bounds
-                            var bounds = foliumMap.getBounds();
-                            var minLat = bounds.getSouth();
-                            var maxLat = bounds.getNorth();
-                            var minLng = bounds.getWest();
-                            var maxLng = bounds.getEast();
-                            var zoom = foliumMap.getZoom();
-                            
-                            // Only load data if zoom level is high enough
-                            // This prevents too many requests when viewing the whole country
-                            if (zoom < 6) {
-                                console.log("Zoom level too low, not loading data");
-                                return;
-                            }
-                            
-                            console.log("Map bounds changed. Zoom: " + zoom);
-                            console.log("Bounds: " + minLat + ", " + maxLat + ", " + minLng + ", " + maxLng);
-                            
-                            // This part would normally send a request to the server
-                            // In this demo, we'll just show a notification
-                            
-                            // Create a notification element
-                            var notificationId = "bounds-notification-" + Date.now();
-                            var notification = $('<div id="' + notificationId + '" style="position: absolute; z-index: 1000; background-color: white; padding: 10px; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,0.5); top: 10px; left: 50%; transform: translateX(-50%);">Loading air quality stations within view...</div>');
-                            
-                            // Add it to the map container
-                            $(foliumMap.getContainer()).append(notification);
-                            
-                            // Remove it after 2 seconds
-                            setTimeout(function() {
-                                $("#" + notificationId).fadeOut(500, function() {
-                                    $(this).remove();
-                                });
-                            }, 2000);
-                            
-                            // In a real implementation, we would now:
-                            // 1. Send a request to the server to get data for these bounds
-                            // 2. The server would query the API for the data
-                            // 3. The server would return the data
-                            // 4. We would add markers to the map
-                        }
-                        
-                        // Add event listener for map moveend (happens after pan/zoom)
-                        foliumMap.on('moveend', loadDataForBounds);
-                        
-                        console.log("Bounds event handler attached successfully");
-                    }, 1000); // Wait 1 second for the map to fully initialize
-                });
-                </script>
-                """
-                
-                figure.script.add_child(folium.Element(script))
-                return self._template.render(**kwargs)
-        
-        return BoundEventHandler
-
-def create_air_quality_map_ui():
-    """Create the Gradio interface for the Air Quality Map application"""
-    app = AirQualityApp()
-    
-    def show_map(parameter=None):
-        """Callback to generate and display the map"""
-        # Extract code from parameter string if provided
-        parameter_code = None
-        if parameter and ":" in parameter:
-            parameter_code = parameter.split(":")[0].strip()
-            
-        # Generate the map
-        result = app.create_map(parameter_code=parameter_code)
-        
-        if isinstance(result, dict):
-            # Combine map and legend HTML
-            html_content = f"""
-            <div>
-                {result["map"]}
-                {result["legend"]}
-            </div>
-            """
-            return html_content
-        else:
-            # Return error message or whatever was returned
-            return result
-    
-    # Create the UI
-    with gr.Blocks(title="Air Quality Monitoring Stations") as interface:
-        gr.Markdown("# NOAA Air Quality Monitoring Stations Map")
-        gr.Markdown("""
-        This application displays air quality monitoring stations in the United States.
-        
-        **Features:**
-        - The map automatically loads air quality sites as you zoom or pan.
-        - Stations are color-coded based on their most recent Air Quality Index (AQI) reading.
-        - Click on a station marker to view detailed information and recent readings.
-        
-        **Note:** To use the actual EPA AQS API, you need to register for an API key and set 
-        `EPA_AQS_EMAIL` and `EPA_AQS_API_KEY` environment variables in your Hugging Face Space.
-        
-        For demonstration without an API key, the app shows sample data for major US regions.
-        """)
-        
-        with gr.Row():
-            with gr.Column(scale=1):
-                # Parameter dropdown (pollutant type)
-                parameter_dropdown = gr.Dropdown(
-                    choices=app.mock_get_parameters(),
-                    label="Filter by Pollutant (Optional)",
-                    allow_custom_value=True
-                )
-                
-                # Instructions for using the map
-                gr.Markdown("""
-                ### How to use the map:
-                1. Zoom in or pan to an area of interest
-                2. Air quality monitoring stations will automatically load
-                3. Click on markers to view detailed information
-                
-                The map will only load stations when zoomed in to avoid
-                displaying too many stations at once.
-                """)
-                
-                # Button to refresh map
-                map_button = gr.Button("Refresh Map")
-            
-            # HTML component to display the map in a larger column
-            with gr.Column(scale=3):
-                map_html = gr.HTML(label="Air Quality Monitoring Stations Map")
-        
-        # Set up event handlers
-        map_button.click(
-            fn=show_map,
-            inputs=[parameter_dropdown],
-            outputs=map_html
-        )
-        
-        # Initialize the map on load
-        interface.load(
-            fn=show_map,
-            inputs=[parameter_dropdown],
-            outputs=map_html
-        )
-    
-    return interface
-
-# Creating and launching the app in app.py
-def create_air_quality_map_ui():
-    """Create the Gradio interface for the Air Quality Map application"""
-    app = AirQualityApp()
-    
-    def show_map(parameter=None):
-        """Callback to generate and display the map"""
-        # Extract code from parameter string if provided
-        parameter_code = None
-        if parameter and ":" in parameter:
-            parameter_code = parameter.split(":")[0].strip()
-            
-        # Generate the map
-        result = app.create_map(parameter_code=parameter_code)
-        
-        if isinstance(result, dict):
-            # Combine map and legend HTML
-            html_content = f"""
-            <div>
-                {result["map"]}
-                {result["legend"]}
-            </div>
-            """
-            return html_content
-        else:
-            # Return error message or whatever was returned
-            return result
-    
-    # Create the UI
-    with gr.Blocks(title="Air Quality Monitoring Stations") as interface:
-        gr.Markdown("# Air Quality Monitoring Stations Map")
-        gr.Markdown("""
-        This application displays air quality monitoring stations in the United States.
-        
-        **Features:**
-        - The map automatically loads air quality sites as you zoom or pan.
-        - Stations are color-coded based on their most recent Air Quality Index (AQI) reading.
-        - Click on a station marker to view detailed information and recent readings.
-        
-        **Note:** To use the actual EPA AQS API, you need to register for an API key and set 
-        `EPA_AQS_EMAIL` and `EPA_AQS_API_KEY` environment variables in your Hugging Face Space.
-        
-        For demonstration without an API key, the app shows sample data for major US regions.
-        """)
-        
-        with gr.Row():
-            with gr.Column(scale=1):
-                # Parameter dropdown (pollutant type)
-                parameter_dropdown = gr.Dropdown(
-                    choices=app.mock_get_parameters(),
-                    label="Filter by Pollutant (Optional)",
-                    allow_custom_value=True
-                )
-                
-                # Instructions for using the map
-                gr.Markdown("""
-                ### How to use the map:
-                1. Zoom in or pan to an area of interest
-                2. Air quality monitoring stations will automatically load
-                3. Click on markers to view detailed information
-                
-                The map will only load stations when zoomed in to avoid
-                displaying too many stations at once.
-                """)
-                
-                # Button to refresh map
-                map_button = gr.Button("Refresh Map")
-            
-            # HTML component to display the map in a larger column
-            with gr.Column(scale=3):
-                map_html = gr.HTML(label="Air Quality Monitoring Stations Map")
-        
-        # Set up event handlers
-        map_button.click(
-            fn=show_map,
-            inputs=[parameter_dropdown],
-            outputs=map_html
-        )
-        
-        # Initialize the map on load
-        interface.load(
-            fn=show_map,
-            inputs=[parameter_dropdown],
-            outputs=map_html
-        )
-    
-    return interface
-
-# For direct execution and Hugging Face Spaces deployment
-if __name__ == "__main__":
-    app = create_air_quality_map_ui()
-    app.launch()
- York",
                 "cbsa_name": "New York-Newark-Jersey City",
                 "date_established": "1999-07-15",
                 "last_sample_date": "2024-04-10"
@@ -962,4 +578,9 @@ if __name__ == "__main__":
                 "address": "681 Kelly Street",
                 "city_name": "Bronx",
                 "county_name": "Bronx",
-                "state_name": "New
+                "state_name": "New York",
+                "cbsa_name": "New York-Newark-Jersey City",
+                "date_established": "1998-01-01",
+                "last_sample_date": "2024-04-10"
+            }
+        ]