Update app.py

app.py

@@ -120,7 +120,13 @@ def extract_info(template, text):
 
 def create_map(df, location_col):
     # Initialize map with satellite imagery which shows greenery
-    m = folium.Map(location=[20, 0], zoom_start=2, control_scale=True)
+    m = folium.Map(
+        location=[20, 0],
+        zoom_start=2, 
+        control_scale=True,
+        width='100%',
+        height='100%'
+    )
     
     # Add the satellite tile layer - this will show green areas
     folium.TileLayer(
@@ -356,14 +362,15 @@ with gr.Blocks(css=custom_css) as mapping_interface:
             map_output = gr.HTML(
                 label="Interactive Map",
                 value="""
-                <div style="text-align:center; height:70vh; display:flex; align-items:center; justify-content:center; 
+                <div style="text-align:center; height:70vh; width:100%; display:flex; align-items:center; justify-content:center; 
                           background-color:#f5f5f5; border:1px solid #e0e0e0; border-radius:8px;">
                     <div>
                         <img src="https://cdn-icons-png.flaticon.com/512/854/854878.png" width="100">
                         <p style="margin-top:20px; color:#666;">Your map will appear here after processing</p>
                     </div>
                 </div>
-                """
+                """,
+                elem_id="map_container"
             )
             stats_output = gr.Textbox(
                 label="Location Statistics",
@@ -383,9 +390,19 @@ with gr.Blocks(css=custom_css) as mapping_interface:
             map_html, stats, processed_path = process_excel(file, column)
             
             if map_html and processed_path:
-                # Create responsive container for the map
+                # Create responsive container for the map that fills the available space
                 responsive_html = f"""
-                <div style="width:100%; height:70vh; margin:0; padding:0; border:1px solid #e0e0e0; border-radius:8px; overflow:hidden;">
+                <div style="width:100%; height:70vh; margin:0; padding:0; border:1px solid #e0e0e0; border-radius:8px; overflow:hidden; position:relative;">
+                    <style>
+                    /* Fix map sizing issues */
+                    .leaflet-container {{
+                        width: 100% !important;
+                        height: 100% !important;
+                        position: absolute !important;
+                        top: 0;
+                        left: 0;
+                    }}
+                    </style>
                     {map_html}
                 </div>
                 """