import streamlit as st
import leafmap.foliumap as leafmap
from config import setup_page, render_sidebar, LONDON_CENTER, DEFAULT_ZOOM
# ── Page setup ────────────────────────────────────────────────────────────────
setup_page("Home", icon="🏠")
render_sidebar()
# ── Hero section ──────────────────────────────────────────────────────────────
st.markdown(
"""
🗺️ Interactive Crime Map
Exploring hate speech & crime patterns across London boroughs
""",
unsafe_allow_html=True,
)
# ── Quick overview metrics ────────────────────────────────────────────────────
col1, col2, col3 = st.columns(3)
col1.metric("📍 Borough Coverage", "33", "All London boroughs")
col2.metric("📊 Data Sources", "3", "Tweets + MPS Crime")
col3.metric("🤖 Detection Models", "2", "CardiffNLP · TweetNLP")
st.divider()
# ── About section ─────────────────────────────────────────────────────────────
st.markdown("### About This Application")
st.markdown(
"""
This interactive crime mapping platform lets you **explore, compare, and analyse**
hate speech and crime data across London. Built with modern open-source geospatial
tools, it provides three complementary views:
"""
)
about_col1, about_col2, about_col3 = st.columns(3)
with about_col1:
st.markdown(
"""
#### ↔️ Comparison
Side-by-side choropleth maps comparing hate tweets,
MPS hate crime data, and MPS all-crime data. Upload
your own GeoJSON for custom analysis.
"""
)
with about_col2:
st.markdown(
"""
#### 😡 Hate Tweets
Point-level interactive map of geolocated hate speech
tweets in London (Dec 2022), classified by two
state-of-the-art NLP models.
"""
)
with about_col3:
st.markdown(
"""
#### 📈 Statistics
Borough-level charts, rankings, and correlation
analysis between online hate speech and officially
recorded crime figures.
"""
)
st.divider()
# ── Interactive overview map ──────────────────────────────────────────────────
st.markdown("### 🌍 London at a Glance")
st.caption("An overview map of London boroughs — navigate to the other pages for detailed analysis.")
m = leafmap.Map(center=LONDON_CENTER, zoom=DEFAULT_ZOOM)
m.add_basemap("CartoDB.Positron")
m.add_geojson(
"https://raw.githubusercontent.com/yunusserhat/data/main/data/londonborough.geojson",
layer_name="London Boroughs",
style={"color": "#0f3460", "weight": 2, "fillOpacity": 0.08},
)
m.to_streamlit(height=500)
# ── Tech stack footer ────────────────────────────────────────────────────────
st.divider()
st.markdown(
"""
""",
unsafe_allow_html=True,
)
st.info("👈 Use the sidebar to navigate between pages.")