|
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)", |
|
} |
|
|
|
|
|
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) |
|
|
|
|
|
st.markdown("### BBoxFinder Clone", unsafe_allow_html=True) |
|
|
|
|
|
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]}") |
|
|
|
|
|
m = folium.Map(location=[46.8, 8.2], zoom_start=8, control_scale=True) |
|
|
|
|
|
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) |
|
|
|
|
|
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) |
|
|
|
|
|
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) |
|
|
|
|
|
st.markdown("<div style='text-align: center; color: gray; padding-top: 10px;'>Created with Streamlit - Inspired by bboxfinder.com</div>", unsafe_allow_html=True) |