Update app.py

app.py

@@ -1,4 +1,63 @@
 import streamlit as st
+import folium
+import json
 
-x = st.slider('Select a value')
-st.write(x, 'squared is', x * x)
+# Set the map center and zoom level
+MAP_CENTER = [35.6895, 139.6917] # Tokyo
+ZOOM_LEVEL = 10
+
+# Create a folium map object
+m = folium.Map(location=MAP_CENTER, zoom_start=ZOOM_LEVEL)
+
+# Create a DrawControl object
+dc = folium.plugins.DrawControl()
+
+# Set the draw options to allow only polygons and rectangles
+dc.draw_options = {
+    "polyline": False,
+    "circle": False,
+    "circlemarker": False,
+    "marker": False,
+}
+
+# Set the edit options to allow editing and deleting
+dc.edit_options = {
+    "edit": True,
+    "remove": True,
+}
+
+# Add the DrawControl object to the map
+m.add_child(dc)
+
+# Define a JavaScript function to handle the draw events
+draw_events = """
+function handleDrawEvent(e) {
+    // Get the type and layer of the drawn or edited feature
+    var type = e.layerType;
+    var layer = e.layer;
+
+    // If the feature is a polygon or a rectangle, get its geojson data
+    if (type === 'polygon' || type === 'rectangle') {
+        var geojson = layer.toGeoJSON();
+
+        // Send the geojson data to Python via Streamlit
+        streamlit.setComponentValue(geojson);
+    }
+}
+"""
+
+# Add the JavaScript function to the HTML header of the map
+m.get_root().header.add_child(folium.Element(draw_events))
+
+# Register the JavaScript function to the draw:created and draw:edited events
+m.add_child(folium.Element("map.on('draw:created', handleDrawEvent);"))
+m.add_child(folium.Element("map.on('draw:edited', handleDrawEvent);"))
+
+# Display the folium map using streamlit
+st_folium(m)
+
+# Get the geojson data from Streamlit
+geojson = st_folium.get_value()
+
+# Display the geojson data using streamlit
+st.write(geojson)