pages/4_Test.py

import streamlit as st
import leafmap.foliumap as leafmap
import leafmap.colormaps as cm
import json

st.set_page_config(layout="wide")

st.sidebar.info(
    '''
    - Web App URL: <https://interactive-crime-map.hf.space/>
    - HuggingFace repository: <https://huggingface.co/spaces/interactive-crime/map/tree/main>
    '''
)

st.sidebar.title("Contact")
st.sidebar.info(
    '''
    Yunus Serhat Bıçakçı at [yunusserhat.com](https://yunusserhat.com) | [GitHub](https://github.com/yunusserhat) | [Twitter](https://twitter.com/yunusserhat) | [LinkedIn](https://www.linkedin.com/in/yunusserhat)
    '''
)

st.title("Comparision of Hate Tweets, Hate Crime Rates and Total Crime Rates")
st.markdown(
    '''
    These interactive maps illustrate a comparison of overall borough-level rates based on Twitter and London Metropolitan Police Service (MPS) data as of December 2022.

    In the first map shows the representation of hate tweets according to Twitter data, while the second and third maps show the representation of rates of hate and all crimes according to MPS data.
    '''
)

# Adding a widget to allow users to upload GeoJSON files
uploaded_file = st.file_uploader("Upload a GeoJSON file", type=["geojson"])

# Variable to hold the uploaded GeoJSON data
uploaded_geojson = None
map_1 = "https://raw.githubusercontent.com/yunusserhat/data/main/data/boroughs_count_df_2022_dec.geojson"
map_2 = "https://raw.githubusercontent.com/yunusserhat/data/main/data/mps_hate_2022_dec_count.geojson"
map_3 = "https://raw.githubusercontent.com/yunusserhat/data/main/data/mps2022dec_count.geojson"

if uploaded_file:
    try:
        uploaded_geojson = json.load(uploaded_file)
        if "features" not in uploaded_geojson:
            st.warning("The uploaded file does not seem to be a valid GeoJSON format.")
            uploaded_geojson = None
        else:
            st.success("GeoJSON file uploaded successfully!")
    except json.JSONDecodeError:
        st.error("Failed to decode the uploaded file. Please ensure it's a valid GeoJSON format.")

# Create a list of choices for the user to select from
map_choices = ["Original Map 1", "Original Map 2", "Original Map 3"]
if uploaded_geojson:
    map_choices.append("Uploaded GeoJSON")

selected_map_1 = st.selectbox("Select data for Map 1", map_choices)
selected_map_2 = st.selectbox("Select data for Map 2", map_choices)
# Load the dataset to determine available columns
import geopandas as gpd

if selected_map_1 == "Uploaded GeoJSON":
    gdf_1 = gpd.GeoDataFrame.from_features(uploaded_geojson)
    gdf_1.crs = "EPSG:4326"
elif selected_map_1 == "Original Map 1":
    gdf_1 = gpd.read_file(map_1)
elif selected_map_1 == "Original Map 2":
    gdf_1 = gpd.read_file(map_2)
else:
    gdf_1 = gpd.read_file(map_3)

if selected_map_2 == "Uploaded GeoJSON":
    gdf_2 = gpd.GeoDataFrame.from_features(uploaded_geojson)
gdf_2.crs = "EPSG:4326"

elif selected_map_2 == "Original Map 1":
    gdf_2 = gpd.read_file(map_1)
elif selected_map_2 == "Original Map 2":
    gdf_2 = gpd.read_file(map_2)
else:
    gdf_2 = gpd.read_file(map_3)

# Extract column names excluding 'geometry'
available_columns_1 = [col for col in gdf_1.columns if col != 'geometry']
available_columns_2 = [col for col in gdf_2.columns if col != 'geometry']

selected_column_1 = st.selectbox("Select column for Map 1 visualization", available_columns_1)
selected_column_2 = st.selectbox("Select column for Map 2 visualization", available_columns_2)
row1_col1, row1_col2 = st.columns([1, 1])

# Display Map 1
with row1_col1:
    m1 = leafmap.Map(center=[51.50, -0.1], zoom=10)
    if selected_map_1 == "Uploaded GeoJSON":
        m1.add_data(gdf_1, column=selected_column_1)
    elif selected_map_1 == "Original Map 1":
        m1.add_data(map_1, column=selected_column_1)
    elif selected_map_1 == "Original Map 2":
        m1.add_data(map_2, column=selected_column_1)
    else:
        m1.add_data(map_3, column=selected_column_1)

# Display Map 2
with row1_col2:
    m2 = leafmap.Map(center=[51.50, -0.1], zoom=10)
    if selected_map_2 == "Uploaded GeoJSON":
        m2.add_data(gdf_2, column=selected_column_2)
    elif selected_map_2 == "Original Map 1":
        m2.add_data(map_1, column=selected_column_2)
    elif selected_map_2 == "Original Map 2":
        m2.add_data(map_2, column=selected_column_2)
    else:
        m2.add_data(map_3, column=selected_column_2)

# Additional map configurations and display
longitude = -0.1
latitude = 51.50
zoomlevel = st.number_input("Zoom", 0, 20, 10)

row2_col1, row2_col2 = st.columns([1, 1])
with row2_col1:
    m1.set_center(longitude, latitude, zoomlevel)
with row2_col2:
    m2.set_center(longitude, latitude, zoomlevel)

row3_col1, row3_col2 = st.columns([1, 1])
with row3_col1:
    m1.to_streamlit()
with row3_col2:
    m2.to_streamlit()