app.py

import streamlit as st
import pandas as pd
import numpy as np
from geopy.distance import geodesic

# Create a DataFrame with sample data
data = pd.DataFrame({
    'lat': np.random.uniform(-90, 90, 1000),
    'lon': np.random.uniform(-180, 180, 1000),
    'value': np.random.rand(1000) * 100
})

# Function to calculate distance in meters between two coordinates
def calculate_distance(lat1, lon1, lat2, lon2):
    coords_1 = (lat1, lon1)
    coords_2 = (lat2, lon2)
    return geodesic(coords_1, coords_2).meters

# Create a sidebar for controls
with st.sidebar:
    # Display a title
    st.title('Geospatial Dashboard')

    # Dropdown to select specific coordinates
    selected_coords = st.selectbox('Select Coordinates', ['Random', 'Custom'])
    if selected_coords == 'Custom':
        custom_lat = st.number_input('Enter Latitude', value=0.0)
        custom_lon = st.number_input('Enter Longitude', value=0.0)
    else:
        custom_lat, custom_lon = 0.0, 0.0

    # Slider for setting the zoom level
    zoom_level = st.slider('Zoom Level', min_value=1, max_value=15, value=5)

    # Slider to set the radius in meters
    radius_in_meters = st.slider('Select Radius (in meters)', min_value=100, max_value=5000, value=1000)

# Filter data based on the radius
if selected_coords == 'Custom':
    filtered_data = data[data.apply(lambda x: calculate_distance(x['lat'], x['lon'], custom_lat, custom_lon), axis=1) <= radius_in_meters]
else:
    filtered_data = data

# Add a custom CSS class to the map container
st.markdown(f"""<style>
.map {{
  width: 100%;
  height: 100vh;
}}
</style>""", unsafe_allow_html=True)

# Wrap the map in a container with the custom CSS class
with st.container():
    st.map(filtered_data, zoom=zoom_level, use_container_width=True)