Update app.py

app.py

@@ -1,109 +1,95 @@
-import folium
 import gradio as gr
+import folium
 import os
 from bs4 import BeautifulSoup
 import simplekml
 
-# Function to create the permaculture map
-def create_permaculture_map(coordinates, output_dir="output"):
+# Function to create permaculture map
+def create_permaculture_map(lat, lon):
+    # Validate coordinates
+    if not (-90 <= lat <= 90) or not (-180 <= lon <= 180):
+        raise gr.Error("Invalid coordinates! Latitude: -90 to 90, Longitude: -180 to 180")
+    
     # Create base map
-    m = folium.Map(
-        location=coordinates,
-        zoom_start=18,
-        control_scale=True,
-        tiles="cartodbpositron"
-    )
-
-    # Add north arrow
-    north_arrow = """
-    <div style="position: fixed; top: 10px; right: 10px; z-index: 1000;
-                font-size: 24px; font-weight: bold; color: black;">↑ N</div>
-    """
-    m.get_root().html.add_child(folium.Element(north_arrow))
-
-    # Add scale
-    folium.plugins.MousePosition().add_to(m)
-
-    # Add map elements
-    elements = {
-        "Building": {"loc": [0.0001, 0.0001], "color": "red", "icon": "home"},
-        "Vegetation": {"loc": [-0.0001, -0.0001], "color": "green", "icon": "tree"},
-        "Water Management": {"loc": [0.0003, -0.0003], "color": "blue", "icon": "tint"},
-        "Energy": {"loc": [-0.0003, 0.0003], "color": "orange", "icon": "bolt"}
-    }
-
-    for name, props in elements.items():
+    m = folium.Map(location=[lat, lon], zoom_start=16, control_scale=True)
+    
+    # Add permaculture elements
+    elements = [
+        {"name": "Building", "location": [lat+0.0001, lon+0.0001], "color": "red", "icon": "home"},
+        {"name": "Vegetation", "location": [lat-0.0001, lon-0.0001], "color": "green", "icon": "tree"},
+        {"name": "Water", "location": [lat+0.0002, lon-0.0002], "color": "blue", "icon": "tint"},
+        {"name": "Energy", "location": [lat-0.0002, lon+0.0002], "color": "orange", "icon": "bolt"}
+    ]
+    
+    for element in elements:
         folium.Marker(
-            location=[coordinates[0] + props["loc"][0], 
-                     coordinates[1] + props["loc"][1]],
-            icon=folium.Icon(color=props["color"], icon=props["icon"]),
-            popup=name
+            element["location"],
+            popup=element["name"],
+            icon=folium.Icon(color=element["color"], icon=element["icon"])
         ).add_to(m)
-
+        
     # Add paths
     folium.PolyLine(
-        locations=[
-            [coordinates[0] - 0.0002, coordinates[1] - 0.0002],
-            [coordinates[0] + 0.0002, coordinates[1] + 0.0002]
-        ],
+        locations=[[lat-0.0003, lon-0.0003], [lat+0.0003, lon+0.0003]],
         color="brown",
-        weight=2,
-        popup="Path"
+        weight=2
     ).add_to(m)
-
+    
     # Save map
-    os.makedirs(output_dir, exist_ok=True)
-    map_path = os.path.join(output_dir, "map.html")
+    os.makedirs("output", exist_ok=True)
+    map_path = os.path.join("output", "map.html")
     m.save(map_path)
-    return map_path
-
-# Gradio interface
-def generate_map(lat, lon):
-    # Validate coordinates
-    if not (-90 <= lat <= 90) or not (-180 <= lon <= 180):
-        raise gr.Error("Invalid coordinates! Lat: -90 to 90, Lon: -180 to 180")
-    
-    map_path = create_permaculture_map([lat, lon])
     
+    # Return HTML content
     with open(map_path, "r") as f:
-        html = f.read()
-    
-    return f'<iframe srcdoc="{html}" width="100%" height="500"></iframe>'
+        return f.read()
 
-# Create Gradio app
+# Gradio interface
 with gr.Blocks() as app:
-    gr.Markdown("# 🌱 Permaculture Base Map Designer")
+    gr.Markdown("# 🌿 Permaculture Base Map Creator")
     
     with gr.Row():
         with gr.Column():
-            # Map location picker
-            map_picker = gr.Map(label="Click map to select location", height=300)
-            
-            # Coordinate inputs
+            gr.Markdown("## 📍 Location Selection")
             with gr.Row():
-                lat_input = gr.Number(label="Latitude", value=45.5236)
-                lon_input = gr.Number(label="Longitude", value=-122.6750)
-            
-            gr.Markdown("### Map Options")
-            gr.Button("Generate Map").click(
-                generate_map,
-                inputs=[lat_input, lon_input],
-                outputs=gr.HTML(label="Generated Map")
-            )
+                lat = gr.Number(label="Latitude", value=45.5236)
+                lon = gr.Number(label="Longitude", value=-122.6750)
+            gr.Markdown("### OR")
+            gr.Markdown("Search on map below:")
+            map_html = gr.HTML(value="<div id='map' style='height: 300px'></div>")
+            btn = gr.Button("Generate Map", variant="primary")
         
-        # Display generated map
         with gr.Column():
-            gr.HTML(label="Generated Map")
-
-    # Connect map clicks to coordinate inputs
-    def update_coords(map_data):
-        if map_data and map_data.get("features"):
-            lon, lat = map_data["features"][0]["geometry"]["coordinates"]
-            return lat, lon
-        return None, None
+            gr.Markdown("## 🗺️ Your Permaculture Design")
+            output_map = gr.HTML()
     
-    map_picker.select(update_coords, outputs=[lat_input, lon_input])
+    # Interactive map script
+    app.load(
+        None,
+        None,
+        None,
+        _js="""
+        () => {
+            const map = L.map('map').setView([45.5236, -122.6750], 13);
+            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
+            
+            let marker;
+            map.on('click', (e) => {
+                if(marker) map.removeLayer(marker);
+                marker = L.marker(e.latlng).addTo(map);
+                document.querySelector('#component-1 input').value = e.latlng.lat;
+                document.querySelector('#component-2 input').value = e.latlng.lng;
+            });
+        }
+        """
+    )
+    
+    btn.click(
+        fn=create_permaculture_map,
+        inputs=[lat, lon],
+        outputs=output_map,
+        _js="(lat, lon) => `<iframe srcdoc='${create_permaculture_map(lat, lon)}' width='100%' height='500'></iframe>`"
+    )
 
-# Launch app
 if __name__ == "__main__":
     app.launch()