pages/1_🖼️_VertBox.py

import streamlit as st
import folium
from streamlit_folium import folium_static
import pyproj
from folium.plugins import Draw, MousePosition

st.set_page_config(layout="wide", page_title="BBoxFinder Clone")

@st.cache_data
def get_coordinate_systems():
    return {
        "EPSG:4326": "WGS 84",
        "EPSG:3857": "Web Mercator",
        "EPSG:2056": "CH1903+ / LV95 (Swiss)",
        "EPSG:21781": "CH1903 / LV03 (Swiss)",
        "EPSG:2154": "RGF93 / Lambert-93 (France)",
        "EPSG:25832": "ETRS89 / UTM zone 32N (Germany)",
    }

# Styles CSS
st.markdown("""
<style>
    .main { padding-top: 1rem; padding-bottom: 0; }
    .block-container { padding-top: 0; padding-bottom: 0; max-width: 100% !important; }
    .stApp { margin-top: 0; }
    .css-1kyxreq { justify-content: center; }
    .css-5rimss { font-size: 14px; }
    .leaflet-control-mouseposition { background-color: rgba(255, 255, 255, 0.8); padding: 2px 5px; }
    #root > div:nth-child(1) > div.withScreencast > div > div > div > section > div.block-container.css-1y4p8pa.ea3mdgi4 {
        padding-top: 0;
    }
</style>
""", unsafe_allow_html=True)

# Main layout
st.markdown("### BBoxFinder Clone", unsafe_allow_html=True)

# CRS selection
coordinate_systems = get_coordinate_systems()
selected_crs = st.selectbox("Select Coordinate System", options=list(coordinate_systems.keys()), format_func=lambda x: f"{x} - {coordinate_systems[x]}")

# Map
m = folium.Map(location=[46.8, 8.2], zoom_start=8, control_scale=True)

# Add draw control
draw = Draw(
    export=True,
    position='topleft',
    draw_options={
        'polyline': True,
        'polygon': True,
        'rectangle': True,
        'circle': True,
        'marker': True,
        'circlemarker': True
    },
    edit_options={'edit': True}
)
draw.add_to(m)

# Add mouse position control
formatter = "function(num) {return L.Util.formatNum(num, 5);};"
MousePosition(
    position='bottomleft',
    separator=' | ',
    empty_string='',
    lng_first=True,
    num_digits=5,
    prefix="Coordinates:",
    lat_formatter=formatter,
    lng_formatter=formatter,
).add_to(m)

# JavaScript to handle drawing and coordinate updates
m.get_root().html.add_child(folium.Element("""
<script>
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
map.on(L.Draw.Event.CREATED, function (event) {
    var layer = event.layer;
    drawnItems.addLayer(layer);
    updateCoordinates(layer);
});
map.on(L.Draw.Event.EDITED, function (event) {
    var layers = event.layers;
    layers.eachLayer(function (layer) {
        updateCoordinates(layer);
    });
});
function updateCoordinates(layer) {
    var bounds = layer.getBounds();
    var bbox = [bounds.getWest(), bounds.getSouth(), bounds.getEast(), bounds.getNorth()];
    var bboxString = bbox.join(',');
    // Here you can send the bboxString to your backend or update a Streamlit component
    console.log(bboxString);
}
</script>
"""))

folium_static(m, width=1200, height=600)

# Footer
st.markdown("<div style='text-align: center; color: gray; padding-top: 10px;'>Created with Streamlit - Inspired by bboxfinder.com</div>", unsafe_allow_html=True)