File size: 3,143 Bytes
3535b1a d910b17 24b198e 6627d90 3535b1a 6627d90 7ca9ac5 3535b1a 7ca9ac5 653ed34 1b5eabb 7ca9ac5 3535b1a 1b5eabb eff42fb 740cd64 1b5eabb 6627d90 740cd64 eff42fb 3535b1a 1b5eabb 740cd64 8d2776b 3535b1a 8d2776b 24b198e 8d2776b 7ca9ac5 8d2776b 3535b1a 8d2776b eff42fb 8d2776b 3535b1a eff42fb 653ed34 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
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) |