update

pages/4_Test.py

@@ -1,141 +1,102 @@
+
 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>
-    """
+    '''
 )
 
-import json
+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:
-        # Read the uploaded file and parse as JSON (GeoJSON is a subset of JSON)
         uploaded_geojson = json.load(uploaded_file)
-
-        # Basic validation (checking if it's a valid GeoJSON format)
         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.")
 
-# Assuming there are two maps in the original app.
-# Let's create a dropdown for each map to select which data to display.
-
-map_choices = ["Original Map 1", "Original Map 2"]
+# 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)
 
-if selected_map_1 == "Uploaded GeoJSON":
-    # Display the uploaded GeoJSON data on Map 1
-    # You'll need to integrate this with the leafmap.foliumap methods you use
-    st.write("Display uploaded GeoJSON on Map 1")
-
-elif selected_map_1 == "Original Map 1":
-    # Display the original Map 1
-    # This should be the code from your original app that displays the first map
-    st.write("Display original Map 1")
-
-# ... Similarly for Map 2 and any other maps you have
-
-# Rest of the application logic follows...
+# Integrate with leafmap.foliumap to display the selected map dataset
+row1_col1, row1_col2 = st.columns([1, 1])
 
-
-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 shows the representation of rates of hate and all crimes according to MPS data.
-    """
-)
-
-row1_col1, row1_col2, row1_col3 = st.columns([1, 1, 1])
-
-# Twitter Hate Tweets Map
+# Display Map 1
 with row1_col1:
-    twitter = "https://raw.githubusercontent.com/yunusserhat/data/main/data/boroughs_count_df_2022_dec.geojson"
     m1 = leafmap.Map(center=[51.50, -0.1], zoom=10)
-    m1.add_data(
-        twitter,
-        column="count",
-        scheme='Quantiles',
-        cmap='YlOrRd',
-        legend_title='Total Hate Tweet Number'
-    )
-
-# MPS Hate Crimes Map
+    if selected_map_1 == "Uploaded GeoJSON":
+        m1.add_data(uploaded_geojson)
+    elif selected_map_1 == "Original Map 1":
+        m1.add_data(map_1)
+    elif selected_map_1 == "Original Map 2":
+        m1.add_data(map_2)
+    else:
+        m1.add_data(map_3)
+
+# Display Map 2
 with row1_col2:
-    mps_hate = "https://raw.githubusercontent.com/yunusserhat/data/main/data/mps_hate_2022_dec_count.geojson"
     m2 = leafmap.Map(center=[51.50, -0.1], zoom=10)
-    m2.add_data(
-        mps_hate,
-        column="Hate_Crime_Number",
-        scheme='Quantiles',
-        cmap='YlOrRd',
-        legend_title='Hate Crime Number'
-    )
-
-# MPS Total Crimes Map
-with row1_col3:
-    mps_total = "https://raw.githubusercontent.com/yunusserhat/data/main/data/mps2022dec_count.geojson"
-    m3 = leafmap.Map(center=[51.50, -0.1], zoom=10)
-    m3.add_data(
-        mps_total,
-        column="Crime_Number",
-        scheme='Quantiles',
-        cmap='YlOrRd',
-        legend_title='Total Crime Number'
-    )
-
-row2_col1, row2_col2, row2_col3 = st.columns([1, 1, 1])
-
-# Setting the zoom and center for each map
+    if selected_map_2 == "Uploaded GeoJSON":
+        m2.add_data(uploaded_geojson)
+    elif selected_map_2 == "Original Map 1":
+        m2.add_data(map_1)
+    elif selected_map_2 == "Original Map 2":
+        m2.add_data(map_2)
+    else:
+        m2.add_data(map_3)
+
+# 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)
 
-with row2_col3:
-    m3.set_center(longitude, latitude, zoomlevel)
-
-row3_col1, row3_col2, row3_col3 = st.columns([1, 1, 1])
-
+row3_col1, row3_col2 = st.columns([1, 1])
 with row3_col1:
     m1.to_streamlit()
-
 with row3_col2:
     m2.to_streamlit()
-
-with row3_col3:
-    m3.to_streamlit()