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( """
Built with Streamlit · Leafmap · GeoPandas · Folium
""", unsafe_allow_html=True, ) st.info("👈 Use the sidebar to navigate between pages.")