Update app.py

app.py

@@ -1,141 +1,109 @@
 import folium
-from folium.plugins import MeasureControl, FloatImage
-from folium.features import DivIcon
+import gradio as gr
 import os
 from bs4 import BeautifulSoup
 import simplekml
-import gradio as gr
 
-# Function to create the map
+# Function to create the permaculture map
 def create_permaculture_map(coordinates, output_dir="output"):
-    # Create the map centered on the provided coordinates
-    map = folium.Map(location=coordinates, zoom_start=18, control_scale=True)
-
-    # Add a north arrow (custom HTML)
-    north_arrow_html = """
-    <div style="position: fixed; top: 10px; right: 10px; z-index: 1000; font-size: 24px; font-weight: bold; color: black;">↑ N</div>
+    # 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>
     """
-    map.get_root().html.add_child(folium.Element(north_arrow_html))
-
-    # Add coordinates display
-    coordinates_html = f"""
-    <div style="position: fixed; bottom: 50px; left: 10px; z-index: 1000; background: white; padding: 5px; border: 1px solid black;">
-        <strong>Coordinates:</strong> {coordinates}
-    </div>
-    """
-    map.get_root().html.add_child(folium.Element(coordinates_html))
-
-    # Add map items (buildings, vegetation, paths, water management, energy)
-    folium.Marker(
-        location=[coordinates[0] + 0.0001, coordinates[1] + 0.0001],
-        icon=folium.Icon(color="red", icon="home"),
-        popup="Building",
-    ).add_to(map)
-
-    folium.Marker(
-        location=[coordinates[0] - 0.0001, coordinates[1] - 0.0001],
-        icon=folium.Icon(color="green", icon="tree"),
-        popup="Vegetation",
-    ).add_to(map)
-
+    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():
+        folium.Marker(
+            location=[coordinates[0] + props["loc"][0], 
+                     coordinates[1] + props["loc"][1]],
+            icon=folium.Icon(color=props["color"], icon=props["icon"]),
+            popup=name
+        ).add_to(m)
+
+    # Add paths
     folium.PolyLine(
         locations=[
             [coordinates[0] - 0.0002, coordinates[1] - 0.0002],
-            [coordinates[0] + 0.0002, coordinates[1] + 0.0002],
+            [coordinates[0] + 0.0002, coordinates[1] + 0.0002]
         ],
         color="brown",
         weight=2,
-        popup="Path",
-    ).add_to(map)
-
-    folium.Circle(
-        location=[coordinates[0] + 0.0003, coordinates[1] - 0.0003],
-        radius=10,
-        color="blue",
-        fill=True,
-        popup="Water Management",
-    ).add_to(map)
-
-    folium.Marker(
-        location=[coordinates[0] - 0.0003, coordinates[1] + 0.0003],
-        icon=folium.Icon(color="orange", icon="bolt"),
-        popup="Energy",
-    ).add_to(map)
-
-    # Add a legend
-    legend_html = """
-    <div style="position: fixed; bottom: 10px; left: 10px; z-index: 1000; background: white; padding: 10px; border: 1px solid black;">
-        <h4>Legend</h4>
-        <p><i class="fa fa-home" style="color:red"></i> Buildings</p>
-        <p><i class="fa fa-tree" style="color:green"></i> Vegetation</p>
-        <p><i class="fa fa-road" style="color:brown"></i> Paths</p>
-        <p><i class="fa fa-tint" style="color:blue"></i> Water Management</p>
-        <p><i class="fa fa-bolt" style="color:orange"></i> Energy</p>
-    </div>
-    """
-    map.get_root().html.add_child(folium.Element(legend_html))
-
-    # Save the map as an HTML file
-    if not os.path.exists(output_dir):
-        os.makedirs(output_dir)
-    map_path = os.path.join(output_dir, "permaculture_map.html")
-    map.save(map_path)
-
-    # Export the map as SVG and KML
-    export_map(map_path, coordinates, output_dir)
+        popup="Path"
+    ).add_to(m)
 
+    # Save map
+    os.makedirs(output_dir, exist_ok=True)
+    map_path = os.path.join(output_dir, "map.html")
+    m.save(map_path)
     return map_path
 
-# Function to export the map as SVG and KML
-def export_map(map_path, coordinates, output_dir):
-    # Export as SVG using BeautifulSoup
-    export_svg(map_path, output_dir)
-
-    # Export as KML using SimpleKML
-    export_kml(coordinates, output_dir)
-
-# Function to export the map as SVG
-def export_svg(map_path, output_dir):
-    with open(map_path, "r", encoding="utf-8") as file:
-        soup = BeautifulSoup(file, "html.parser")
-
-    svg_path = os.path.join(output_dir, "permaculture_map.svg")
-    with open(svg_path, "w", encoding="utf-8") as file:
-        file.write(soup.prettify())
-    print(f"Map exported as SVG: {svg_path}")
-
-# Function to export the map as KML
-def export_kml(coordinates, output_dir):
-    kml = simplekml.Kml()
-
-    # Add map items to KML
-    kml.newpoint(name="Building", coords=[(coordinates[1] + 0.0001, coordinates[0] + 0.0001)])
-    kml.newpoint(name="Vegetation", coords=[(coordinates[1] - 0.0001, coordinates[0] - 0.0001)])
-    kml.newlinestring(name="Path", coords=[(coordinates[1] - 0.0002, coordinates[0] - 0.0002), (coordinates[1] + 0.0002, coordinates[0] + 0.0002)])
-    kml.newpoint(name="Water Management", coords=[(coordinates[1] - 0.0003, coordinates[0] + 0.0003)])
-    kml.newpoint(name="Energy", coords=[(coordinates[1] + 0.0003, coordinates[0] - 0.0003)])
-
-    kml_path = os.path.join(output_dir, "permaculture_map.kml")
-    kml.save(kml_path)
-    print(f"Map exported as KML: {kml_path}")
-
 # Gradio interface
-def gradio_interface(latitude, longitude):
-    coordinates = [latitude, longitude]
-    map_path = create_permaculture_map(coordinates)
-    return map_path
-
-# Gradio app
-iface = gr.Interface(
-    fn=gradio_interface,
-    inputs=[
-        gr.Number(label="Latitude", value=45.5236),
-        gr.Number(label="Longitude", value=-122.6750),
-    ],
-    outputs=gr.HTML(label="Permaculture Map"),
-    title="Permaculture Base Map Designer",
-    description="Design a permaculture base map with buildings, vegetation, paths, water management, and energy. Enter coordinates to generate the map.",
-)
-
-# Run the app
-iface.launch()
+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])
+    
+    with open(map_path, "r") as f:
+        html = f.read()
+    
+    return f'<iframe srcdoc="{html}" width="100%" height="500"></iframe>'
+
+# Create Gradio app
+with gr.Blocks() as app:
+    gr.Markdown("# 🌱 Permaculture Base Map Designer")
+    
+    with gr.Row():
+        with gr.Column():
+            # Map location picker
+            map_picker = gr.Map(label="Click map to select location", height=300)
+            
+            # Coordinate inputs
+            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")
+            )
+        
+        # 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
+    
+    map_picker.select(update_coords, outputs=[lat_input, lon_input])
+
+# Launch app
+if __name__ == "__main__":
+    app.launch()