Update LandsD basemap

pages/1_Wind.py

@@ -0,0 +1,210 @@
+import streamlit as st
+import requests
+import folium
+from streamlit_folium import st_folium
+import pandas as pd
+import plotly.graph_objs as go
+import branca.colormap as cm
+import pytz
+from datetime import datetime
+
+# Set page layout to wide
+st.set_page_config(layout="wide", page_title="Real-Time Wind Data Dashboard")
+
+@st.cache_data(ttl=300)
+def fetch_geojson_data(url):
+    response = requests.get(url)
+    data = response.json()
+    hk_tz = pytz.timezone('Asia/Hong_Kong')
+    fetch_time = datetime.now(hk_tz).strftime('%Y-%m-%dT%H:%M:%S')
+    return data, fetch_time
+
+# Function to calculate wind statistics
+def calculate_wind_stats(features):
+    gust_speeds = [feature['properties']['10-Minute Maximum Gust(km/hour)'] for feature in features if
+                   feature['properties']['10-Minute Maximum Gust(km/hour)'] is not None]
+    mean_speeds = [feature['properties']['10-Minute Mean Speed(km/hour)'] for feature in features if
+                   feature['properties']['10-Minute Mean Speed(km/hour)'] is not None]
+
+    if not gust_speeds:
+        return None, None, None, None
+    avg_gust = sum(gust_speeds) / len(gust_speeds)
+    min_gust = min(gust_speeds)
+    max_gust = max(gust_speeds)
+    avg_mean_speed = sum(mean_speeds) / len(mean_speeds) if mean_speeds else None
+    return avg_gust, min_gust, max_gust, avg_mean_speed
+
+# Function to convert wind direction to degrees
+def mean_wind_direction_to_degrees(direction):
+    directions = {
+        'North': 0, 'Northeast': 45, 'East': 90, 'Southeast': 135,
+        'South': 180, 'Southwest': 225, 'West': 270, 'Northwest': 315
+    }
+    return directions.get(direction, 0)
+
+# Fetch GeoJSON data
+url = 'https://csdi.vercel.app/weather/wind'
+geo_data, fetch_time = fetch_geojson_data(url)
+
+# Calculate wind statistics
+avg_gust, min_gust, max_gust, avg_mean_speed = calculate_wind_stats(geo_data['features'])
+
+# Create a map centered on a specific location
+map_center = [22.35473034278638, 114.14827142452518]  # Coordinates of Hong Kong
+my_map = folium.Map(location=map_center, zoom_start=10.65, tiles='https://landsd.azure-api.net/dev/osm/xyz/basemap/gs/WGS84/tile/{z}/{x}/{y}.png?key=f4d3e21d4fc14954a1d5930d4dde3809',attr="Map infortmation from Lands Department")
+
+folium.TileLayer(
+    tiles='https://mapapi.geodata.gov.hk/gs/api/v1.0.0/xyz/label/hk/en/wgs84/{z}/{x}/{y}.png',
+    attr="Map infortmation from Lands Department"
+).add_to(my_map)
+
+
+# Create a colormap for wind speed with limited width
+colormap = cm.LinearColormap(colors=['#000000', '#0066eb', '#ff3d77', '#eb0000'],
+                             vmin=0, vmax=85)
+my_map.add_child(colormap)
+
+# Function to calculate arrow size based on wind speed
+def get_arrow_size(speed):
+    if speed is None:
+        return 20
+    return max(20, min(50, speed * 2))
+
+# Add the GeoJSON data to the map with arrow markers
+for feature in geo_data['features']:
+    coordinates = feature['geometry']['coordinates']
+    mean_wind_direction = feature['properties']['10-Minute Mean Wind Direction(Compass points)']
+    mean_speed = feature['properties']['10-Minute Mean Speed(km/hour)']
+
+    # Skip plotting if wind direction is null
+    if mean_wind_direction is None:
+        continue
+
+    # Calculate rotation angle for wind direction
+    rotation_angle = mean_wind_direction_to_degrees(mean_wind_direction)
+
+    # Calculate arrow size based on wind speed
+    arrow_size = get_arrow_size(mean_speed)
+
+    # Determine color based on wind speed
+    color = colormap(mean_speed) if mean_speed is not None else 'gray'
+
+    # Create an arrow marker for wind direction
+    folium.Marker(
+        location=[coordinates[1], coordinates[0]],
+        icon=folium.DivIcon(html=f"""
+            <div style="
+                width: {arrow_size}px; height: {arrow_size}px;
+                display: flex; align-items: center; justify-content: center;
+                transform: rotate({rotation_angle}deg);
+                ">
+                <svg width="{arrow_size}" height="{arrow_size}" viewBox="0 0 24 24" fill="none" stroke="{color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <line x1="12" y1="5" x2="12" y2="19"></line>
+                    <polyline points="5 12 12 5 19 12"></polyline>
+                </svg>
+            </div>
+        """),
+        popup=folium.Popup(f"""
+            <b>{feature['properties']['Automatic Weather Station']}</b><br>
+            Direction: {mean_wind_direction}<br>
+            Speed: {mean_speed} km/h<br>
+            Max Gust: {feature['properties']['10-Minute Maximum Gust(km/hour)']} km/h
+        """, max_width=300)
+    ).add_to(my_map)
+
+col1, col2, col3 = st.columns([1.65, 2, 1.15])
+
+with col1:
+    if geo_data['features']:
+        wind_directions = [feature['properties']['10-Minute Mean Wind Direction(Compass points)'] for feature in
+                           geo_data['features']]
+        direction_counts = {d: wind_directions.count(d) for d in
+                            ['North', 'Northeast', 'East', 'Southeast', 'South', 'Southwest', 'West', 'Northwest']}
+
+        # Prepare wind speeds for each direction
+        direction_speeds = {d: [] for d in
+                            ['North', 'Northeast', 'East', 'Southeast', 'South', 'Southwest', 'West', 'Northwest']}
+        for feature in geo_data['features']:
+            direction = feature['properties']['10-Minute Mean Wind Direction(Compass points)']
+            speed = feature['properties']['10-Minute Mean Speed(km/hour)']
+            if direction in direction_speeds and speed is not None:
+                direction_speeds[direction].append(speed)
+
+        # Calculate average wind speed for each direction
+        average_speeds = {d: sum(speeds) / len(speeds) if speeds else 0 for d, speeds in direction_speeds.items()}
+
+        # Plot wind direction rose with average wind speed
+        fig = go.Figure()
+
+        # Add polar bar for wind direction
+        fig.add_trace(go.Barpolar(
+            r=[direction_counts[d] for d in direction_counts.keys()],
+            theta=list(direction_counts.keys()),
+            name='Wind Direction Count',
+            marker_color='#0008ff',
+            opacity=0.5
+        ))
+
+        # Add radial bar for average wind speed
+        fig.add_trace(go.Barpolar(
+            r=list(average_speeds.values()),
+            theta=list(average_speeds.keys()),
+            name='Average Wind Speed',
+            marker_color='#ff0019',  # Orange color for wind speed
+            opacity=0.5,
+            thetaunit='radians',  # Ensures radial bars are correctly positioned
+            base=0  # Base of the radial bars starts from 0
+        ))
+
+        fig.update_layout(
+            polar=dict(
+                radialaxis=dict(
+                    visible=False,
+                    range=[0, max(direction_counts.values())]
+                ),
+                angularaxis=dict(
+                    tickvals=list(direction_counts.keys()),
+                    ticktext=['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'],
+                    rotation=90,  # Rotate to make North the top
+                    direction='clockwise'
+                )
+            ),
+            width=500,
+            height=380,
+            title={'text': 'Wind Direction and Average Speed Rose Plot', 'font': {'size': 18}},
+            legend={'x': 0.8, 'y': 0.95}
+        )
+
+        st.plotly_chart(fig, use_container_width=True)
+
+        st.caption(f"Data fetched at: {fetch_time}")
+
+    if avg_gust is not None:
+        col1a, col1b = st.columns(2)
+        with col1a:
+            st.metric(label="Avg Max Gust (km/h)", value=f"{avg_gust:.2f}")
+            st.metric(label="Min Max Gust (km/h)", value=f"{min_gust}")
+        with col1b:
+            st.metric(label="Max Max Gust (km/h)", value=f"{max_gust}")
+            if avg_mean_speed is not None:
+                st.metric(label="Avg Mean Speed (km/h)", value=f"{avg_mean_speed:.2f}")
+    else:
+        st.write("No valid wind data available to calculate statistics.")
+
+    gust_speeds = [feature['properties']['10-Minute Maximum Gust(km/hour)'] for feature in geo_data['features'] if
+                   feature['properties']['10-Minute Maximum Gust(km/hour)'] is not None]
+
+
+with col3:
+    table_data = [{
+        'Weather Station': feature['properties']['Automatic Weather Station'],
+        'Mean Wind Direction': feature['properties']['10-Minute Mean Wind Direction(Compass points)'],
+        'Mean Speed(km/hour)': feature['properties']['10-Minute Mean Speed(km/hour)'],
+        'Maximum Gust(km/hour)': feature['properties']['10-Minute Maximum Gust(km/hour)']
+    } for feature in geo_data['features']]
+
+    st.dataframe(pd.DataFrame(table_data), height=600)
+
+with col2:
+    # Display map
+    st_folium(my_map, width=500, height=600)

pages/2_Temperature.py

@@ -0,0 +1,201 @@
+import streamlit as st
+import requests
+import json
+import pandas as pd
+import folium
+from streamlit_folium import st_folium
+import plotly.graph_objects as go
+import numpy as np
+from datetime import datetime, timezone
+import time
+import pytz
+
+# Set page layout to wide
+st.set_page_config(layout="wide", page_title="Real-Time Temperature Data Dashboard")
+
+# Function to fetch JSON data with caching and expiration
+@st.cache_data(ttl=300)  # Cache data for 5 minutes (300 seconds)
+def fetch_data():
+    url = 'https://csdi.vercel.app/weather/temp'
+    response = requests.get(url)
+    hk_tz = pytz.timezone('Asia/Hong_Kong')
+    fetch_time = datetime.now(hk_tz).strftime('%Y-%m-%dT%H:%M:%S')
+    return json.loads(response.text), fetch_time
+
+# Fetch the JSON data
+data, fetch_time = fetch_data()
+
+# Create a Pandas DataFrame from the JSON data
+features = data['features']
+df = pd.json_normalize(features)
+
+# Rename columns for easier access
+df.rename(columns={
+    'properties.Automatic Weather Station': 'Station',
+    'properties.Air Temperature(degree Celsius)': 'Temperature',
+    'geometry.coordinates': 'Coordinates'
+}, inplace=True)
+
+# Split Coordinates into separate Longitude and Latitude columns
+df[['Longitude', 'Latitude']] = pd.DataFrame(df['Coordinates'].tolist(), index=df.index)
+
+# Extract temperature data
+temps = df['Temperature'].dropna().tolist()
+
+# Create three columns
+col1, col2, col3 = st.columns([1.65, 2, 1.15])
+
+# Column 1: Histogram and statistics with two-sigma analysis
+with col1:
+    # Row 1: Histogram
+    with st.container():
+        # Convert list to pandas Series
+        temps_series = pd.Series(temps)
+
+        # Calculate histogram data
+        hist_data = np.histogram(temps_series, bins=10)
+        bin_edges = hist_data[1]
+        counts = hist_data[0]
+
+
+        # Create a color gradient from blue to red
+        def get_color(value, min_value, max_value):
+            ratio = (value - min_value) / (max_value - min_value)
+            r = int(255 * ratio)  # Red component
+            b = int(255 * (1 - ratio))  # Blue component
+            return f'rgb({r}, 0, {b})'
+
+
+        # Create histogram with Plotly Graph Objects
+        fig = go.Figure()
+
+        # Add histogram bars with gradient colors
+        for i in range(len(bin_edges) - 1):
+            bin_center = (bin_edges[i] + bin_edges[i + 1]) / 2
+            color = get_color(bin_center, bin_edges.min(), bin_edges.max())
+            fig.add_trace(go.Bar(
+                x=[f'{bin_edges[i]:.1f} - {bin_edges[i + 1]:.1f}'],
+                y=[counts[i]],
+                marker_color=color,
+                name=f'{bin_edges[i]:.1f} - {bin_edges[i + 1]:.1f}'
+            ))
+
+        # Customize layout
+        fig.update_layout(
+            xaxis_title='Temperature (°C)',
+            yaxis_title='Count',
+            title='Temperature Distribution',
+            bargap=0.2,  # Adjust gap between bars
+            title_font_size=20,
+            xaxis_title_font_size=14,
+            yaxis_title_font_size=14,
+            height=350,  # Set plot height
+            xaxis=dict(title_font_size=14),
+            yaxis=dict(title_font_size=14)
+        )
+
+        # Display the plot in Streamlit
+        st.plotly_chart(fig, use_container_width=True)
+        st.caption(f"Data fetched at: {fetch_time}")
+
+    # Row 2: Statistics
+    with st.container():
+        col_1, col_2 = st.columns([1, 1])
+        with col_1:
+            if temps:
+                avg_temp = np.mean(temps)
+                std_temp = np.std(temps)
+                max_temp = np.max(temps)
+                min_temp = np.min(temps)
+
+                two_sigma_range = (avg_temp - 2 * std_temp, avg_temp + 2 * std_temp)
+
+                st.metric(label="Average Temperature (°C)", value=f"{avg_temp:.2f}")
+                st.metric(label="Minimum Temperature (°C)", value=f"{min_temp:.2f}")
+        with col_2:
+            st.metric(label="Maximum Temperature (°C)", value=f"{max_temp:.2f}")
+            st.metric(label="Std. Dev (°C)", value=f"{std_temp:.2f}")
+
+
+# Column 2: Map
+def temperature_to_color(temp, min_temp, max_temp):
+    """Convert temperature to a color based on the gradient from blue (low) to red (high)."""
+    norm_temp = (temp - min_temp) / (max_temp - min_temp)
+    red = int(255 * norm_temp)
+    blue = int(255 * (1 - norm_temp))
+    return f'rgb({red}, 0, {blue})'
+
+with col2:
+    # Create the base map
+    m = folium.Map(location=[22.3547, 114.1483], zoom_start=11, tiles='https://landsd.azure-api.net/dev/osm/xyz/basemap/gs/WGS84/tile/{z}/{x}/{y}.png?key=f4d3e21d4fc14954a1d5930d4dde3809',attr="Map infortmation from Lands Department")
+    folium.TileLayer(
+        tiles='https://mapapi.geodata.gov.hk/gs/api/v1.0.0/xyz/label/hk/en/wgs84/{z}/{x}/{y}.png',
+        attr="Map infortmation from Lands Department"
+    ).add_to(m)
+    # Determine min and max temperatures for color scaling
+    min_temp = df['Temperature'].min()
+    max_temp = df['Temperature'].max()
+
+    # Create a color scale legend
+    colormap = folium.LinearColormap(
+        colors=['blue', 'white', 'red'],
+        index=[min_temp, (min_temp + max_temp) / 2, max_temp],
+        vmin=min_temp,
+        vmax=max_temp,
+        caption='Temperature (°C)'
+    )
+    colormap.add_to(m)
+
+    # Iterate through each row in the DataFrame
+    for _, row in df.iterrows():
+        lat = row['Latitude']
+        lon = row['Longitude']
+        station = row['Station']
+        temp = row['Temperature']
+
+        # Determine the color based on the temperature
+        color = temperature_to_color(temp, min_temp, max_temp) if pd.notna(temp) else 'gray'
+
+        # Create a marker with temperature data
+        folium.Marker(
+            location=[lat, lon],
+            popup=f"<p style='font-size: 12px; background-color: white; padding: 5px; border-radius: 5px;'>{station}: {temp:.1f}°C</p>",
+            icon=folium.DivIcon(
+                html=f'<div style="font-size: 10pt; color: {color}; padding: 2px; border-radius: 5px;">'
+                     f'<strong>{temp:.1f}°C</strong></div>'
+            )
+        ).add_to(m)
+
+    # Render the map in Streamlit
+    st_folium(m, width=500, height=600)
+
+# Column 3: Data table
+with col3:
+    # Set the table height using CSS
+    st.markdown(
+        """
+        <style>
+        .dataframe-container {
+            height: 600px;
+            overflow-y: auto;
+        }
+        </style>
+        """,
+        unsafe_allow_html=True
+    )
+
+    # Display the DataFrame with the custom CSS class
+    st.dataframe(df[['Station', 'Temperature', 'Latitude', 'Longitude']], height=600)
+
+# Add a refresh button
+if st.button("Refresh Data"):
+    st.experimental_rerun()
+
+# Automatically rerun every 5 minutes
+if 'last_ran' not in st.session_state:
+    st.session_state.last_ran = datetime.now(timezone.utc)
+
+current_time = datetime.now(timezone.utc)
+if (current_time - st.session_state.last_ran).total_seconds() > 300:
+    st.session_state.last_ran = current_time
+    st.experimental_rerun()

pages/3_Humidity.py

@@ -0,0 +1,205 @@
+import streamlit as st
+import pandas as pd
+import plotly.express as px
+import plotly.graph_objects as go
+import folium
+from folium import LinearColormap
+import requests
+from datetime import datetime, timedelta
+from streamlit_folium import st_folium
+import pytz
+from datetime import datetime
+
+# Set page layout to wide
+st.set_page_config(layout="wide", page_title="Real-Time Relative Humidity Data Dashboard")
+
+# Function to load data
+@st.cache_data(ttl=300)  # Cache data to avoid reloading every time
+def load_data():
+    with st.spinner("Loading data..."):
+        response = requests.get("https://csdi.vercel.app/weather/rhum")
+        data = response.json()
+        features = data['features']
+        df = pd.json_normalize(features)
+        df.rename(columns={
+            'properties.Relative Humidity(percent)': 'Relative Humidity (%)',
+            'properties.Automatic Weather Station': 'Station Name',
+            'geometry.coordinates': 'Coordinates'
+        }, inplace=True)
+        df.dropna(subset=['Relative Humidity (%)'], inplace=True)
+        hk_tz = pytz.timezone('Asia/Hong_Kong')
+        fetch_time = datetime.now(hk_tz).strftime('%Y-%m-%dT%H:%M:%S')
+        return df, fetch_time
+
+# Check if the data has been loaded before
+if 'last_run' not in st.session_state or (datetime.now() - st.session_state.last_run) > timedelta(minutes=5):
+    st.session_state.df, st.session_state.fetch_time = load_data()
+    st.session_state.last_run = datetime.now()
+
+# Data
+df = st.session_state.df
+fetch_time = st.session_state.fetch_time
+
+# Compute statistics
+humidity_data = df['Relative Humidity (%)']
+avg_humidity = humidity_data.mean()
+max_humidity = humidity_data.max()
+min_humidity = humidity_data.min()
+std_humidity = humidity_data.std()
+
+# Create three columns
+col1, col2, col3 = st.columns([1.65, 2, 1.15])
+
+# Column 1: Histogram and statistics
+with col1:
+    # Define colors for gradient
+    color_scale = ['#58a0db', '#0033cc']
+
+    # Create histogram
+    fig = px.histogram(df, x='Relative Humidity (%)', nbins=20,
+                       labels={'Relative Humidity (%)': 'Relative Humidity (%)'},
+                       title='Relative Humidity Histogram',
+                       color_discrete_sequence=color_scale)
+
+    # Add average line
+    fig.add_shape(
+        go.layout.Shape(
+            type="line",
+            x0=avg_humidity,
+            y0=0,
+            x1=avg_humidity,
+            y1=df['Relative Humidity (%)'].value_counts().max(),
+            line=dict(color="red", width=2, dash="dash"),
+        )
+    )
+
+    # Update layout
+    fig.update_layout(
+        xaxis_title='Relative Humidity (%)',
+        yaxis_title='Count',
+        title='Relative Humidity Distribution',
+        bargap=0.2,
+        title_font_size=20,
+        xaxis_title_font_size=14,
+        yaxis_title_font_size=14,
+        height=350,
+        shapes=[{
+            'type': 'rect',
+            'x0': min_humidity,
+            'x1': max_humidity,
+            'y0': 0,
+            'y1': df['Relative Humidity (%)'].value_counts().max(),
+            'fillcolor': 'rgba(0, 100, 255, 0.2)',
+            'line': {
+                'color': 'rgba(0, 100, 255, 0.2)',
+                'width': 0
+            },
+            'opacity': 0.1
+        }]
+    )
+
+    # Add annotations
+    fig.add_annotation(
+        x=avg_humidity,
+        y=df['Relative Humidity (%)'].value_counts().max() * 0.9,
+        text=f"Average: {avg_humidity:.2f}%",
+        showarrow=True,
+        arrowhead=1
+    )
+
+    st.plotly_chart(fig, use_container_width=True)
+    st.caption(f"Data fetched at: {fetch_time}")
+
+    # Display statistics
+    col_1, col_2 = st.columns([1, 1])
+    with col_1:
+        st.metric(label="Average R.Humidity (%)", value=f"{avg_humidity:.2f}")
+        st.metric(label="Minimum R.Humidity (%)", value=f"{min_humidity:.2f}")
+    with col_2:
+        st.metric(label="Maximum R.Humidity (%)", value=f"{max_humidity:.2f}")
+        st.metric(label="Std. Dev (%)", value=f"{std_humidity:.2f}")
+
+
+# Function to convert humidity to color based on gradient
+def humidity_to_color(humidity, min_humidity, max_humidity):
+    if pd.isna(humidity):
+        return 'rgba(0, 0, 0, 0)'  # Return a transparent color if the humidity is NaN
+
+    norm_humidity = (humidity - min_humidity) / (max_humidity - min_humidity)
+
+    # Colors from light blue (#add8e6) to dark blue (#00008b)
+    if norm_humidity < 0.5:
+        r = int(173 + (0 - 173) * (2 * norm_humidity))
+        g = int(216 + (0 - 216) * (2 * norm_humidity))
+        b = int(230 + (139 - 230) * (2 * norm_humidity))
+    else:
+        r = int(0 + (0 - 0) * (2 * (norm_humidity - 0.5)))
+        g = int(0 + (0 - 0) * (2 * (norm_humidity - 0.5)))
+        b = int(139 + (139 - 139) * (2 * (norm_humidity - 0.5)))
+
+    return f'rgb({r}, {g}, {b})'
+
+# Column 2: Map
+with col2:
+    with st.spinner("Loading map..."):
+        m = folium.Map(location=[22.3547, 114.1483], zoom_start=11, tiles='https://landsd.azure-api.net/dev/osm/xyz/basemap/gs/WGS84/tile/{z}/{x}/{y}.png?key=f4d3e21d4fc14954a1d5930d4dde3809',attr="Map infortmation from Lands Department")
+        folium.TileLayer(
+            tiles='https://mapapi.geodata.gov.hk/gs/api/v1.0.0/xyz/label/hk/en/wgs84/{z}/{x}/{y}.png',
+            attr="Map infortmation from Lands Department"
+        ).add_to(m)
+
+        min_humidity = df['Relative Humidity (%)'].min()
+        max_humidity = df['Relative Humidity (%)'].max()
+
+        colormap = LinearColormap(
+            colors=['#58a0db', 'blue'],
+            index=[min_humidity, max_humidity],
+            vmin=min_humidity,
+            vmax=max_humidity,
+            caption='Relative Humidity (%)'
+        )
+        colormap.add_to(m)
+
+        for _, row in df.iterrows():
+            humidity = row['Relative Humidity (%)']
+            color = humidity_to_color(humidity, min_humidity, max_humidity)
+
+            folium.Marker(
+                location=[row['Coordinates'][1], row['Coordinates'][0]],
+                popup=f"<p style='font-size: 12px; background-color: white; padding: 5px; border-radius: 5px;'>{row['Station Name']}: {humidity:.1f}%</p>",
+                icon=folium.DivIcon(
+                    html=f'<div style="font-size: 10pt; color: {color}; padding: 2px; border-radius: 5px;">'
+                         f'<strong>{humidity:.1f}%</strong></div>'
+                )
+            ).add_to(m)
+
+        st_folium(m, width=500, height=600)
+
+# Column 3: Data Table
+with col3:
+    st.markdown(
+        """
+        <style>
+        .dataframe-container {
+            height: 600px;
+            overflow-y: auto;
+        }
+        .dataframe th, .dataframe td {
+            text-align: left;
+            padding: 8px;
+        }
+        </style>
+        """,
+        unsafe_allow_html=True
+    )
+
+    # Rename column for display
+    df_display = df[['Station Name', 'Relative Humidity (%)']].rename(columns={'Relative Humidity (%)': 'R.Humidity'})
+    st.dataframe(df_display, height=600)
+
+# Refresh Button
+if st.button("Refresh Data"):
+    with st.spinner("Refreshing data..."):
+        st.session_state.df, st.session_state.fetch_time = load_data()
+        st.session_state.last_run = datetime.now()
+        st.experimental_rerun()

pages/4_Smart Lampposts.py

@@ -0,0 +1,182 @@
+import streamlit as st
+import pandas as pd
+import requests
+import plotly.express as px
+import plotly.graph_objs as go
+from folium import DivIcon
+import folium
+from streamlit_folium import st_folium
+from sklearn.linear_model import LinearRegression
+from sklearn.cluster import DBSCAN
+import matplotlib.cm as cm
+import matplotlib.colors as mcolors
+import time
+import json
+import pytz
+from datetime import datetime
+
+# Set page layout to wide
+st.set_page_config(layout="wide", page_title="Real-Time Smart Lamppost Data Dashboard")
+
+# Function to fetch JSON data with caching and expiration
+@st.cache_data(ttl=600)
+def fetch_data(url):
+    response = requests.get(url)
+    hk_tz = pytz.timezone('Asia/Hong_Kong')
+    fetch_time = datetime.now(hk_tz).strftime('%Y-%m-%dT%H:%M:%S')
+    return json.loads(response.text), fetch_time
+
+# Function to calculate "feels like" temperature
+def feels_like_temperature(temp_celsius, humidity_percent):
+    return temp_celsius - (0.55 - 0.0055 * humidity_percent) * (temp_celsius - 14.5)
+
+# Function to process the raw data into a DataFrame
+def process_data(data):
+    features = data['features']
+    records = [
+        {
+            'latitude': feature['geometry']['coordinates'][1],
+            'longitude': feature['geometry']['coordinates'][0],
+            'temperature': feature['properties'].get('Air temperature (°C) / 氣溫 (°C) / 气温 (°C)'),
+            'humidity': feature['properties'].get('Relative humidity (%) / 相對濕度 (%) / 相对湿度 (%)')
+        }
+        for feature in features
+    ]
+    df = pd.DataFrame(records)
+
+    # Convert temperature and humidity to numeric, forcing errors to NaN
+    df['temperature'] = pd.to_numeric(df['temperature'], errors='coerce')
+    df['humidity'] = pd.to_numeric(df['humidity'], errors='coerce')
+
+    # Drop rows with NaN values
+    df = df.dropna(subset=['temperature', 'humidity'])
+
+    # Calculate "feels like" temperature
+    df['feels_like'] = df.apply(lambda row: feels_like_temperature(row['temperature'], row['humidity']), axis=1)
+
+    return df
+
+# Fetch and process data
+url = "https://csdi.vercel.app/weather/smls"
+data, fetch_time = fetch_data(url)
+df = process_data(data)
+
+# Perform clustering using DBSCAN
+coords = df[['latitude', 'longitude']].values
+db = DBSCAN(eps=0.01, min_samples=5).fit(coords)
+df['cluster'] = db.labels_
+
+# Initialize the 'predicted_humidity' column with NaN
+df['predicted_humidity'] = pd.NA
+
+# Perform linear regression for each cluster
+for cluster in df['cluster'].unique():
+    cluster_data = df[df['cluster'] == cluster]
+    if len(cluster_data) > 1:  # Only perform regression if there are enough points
+        X = cluster_data['temperature'].values.reshape(-1, 1)
+        y = cluster_data['humidity'].values
+        reg = LinearRegression().fit(X, y)
+        df.loc[df['cluster'] == cluster, 'predicted_humidity'] = reg.predict(X)
+
+# Calculate temperature statistics
+temp_stats = df['temperature'].describe()
+avg_temp = temp_stats['mean']
+min_temp = temp_stats['min']
+max_temp = temp_stats['max']
+std_temp = temp_stats['std']
+
+# Create regression plot using Plotly
+fig = px.scatter(df, x='temperature', y='humidity', color='cluster',
+                 title='Temperature vs. Relative Humidity with Regression by Cluster')
+
+# Add regression lines to the plot
+for cluster in df['cluster'].unique():
+    cluster_data = df[df['cluster'] == cluster]
+    if 'predicted_humidity' in cluster_data.columns and not cluster_data['predicted_humidity'].isna().all():
+        fig.add_trace(go.Scatter(x=cluster_data['temperature'], y=cluster_data['predicted_humidity'], mode='lines',
+                                 name=f'Cluster {cluster}'))
+
+# Column 1: Regression Plot, Data, and Statistics
+col1, col2, col3 = st.columns([1.65, 2, 1.15])
+
+with col1:
+    st.plotly_chart(fig, use_container_width=True, height=300)
+    st.caption(f"Data fetched at: {fetch_time}")
+
+    # Display temperature statistics
+    col_1, col_2 = st.columns([1, 1])
+    with col_1:
+        st.metric(label="Average Temperature (°C)", value=f"{avg_temp:.2f}")
+        st.metric(label="Minimum Temperature (°C)", value=f"{min_temp:.2f}")
+    with col_2:
+        st.metric(label="Maximum Temperature (°C)", value=f"{max_temp:.2f}")
+        st.metric(label="Std. Dev (°C)", value=f"{std_temp:.2f}")
+
+# Column 2: Map
+with col2:
+    # Initialize the Folium map
+    m = folium.Map(location=[22.320394086610452, 114.21626912476121], zoom_start=14, tiles='https://landsd.azure-api.net/dev/osm/xyz/basemap/gs/WGS84/tile/{z}/{x}/{y}.png?key=f4d3e21d4fc14954a1d5930d4dde3809',attr="Map infortmation from Lands Department")
+
+    folium.TileLayer(
+        tiles='https://mapapi.geodata.gov.hk/gs/api/v1.0.0/xyz/label/hk/en/wgs84/{z}/{x}/{y}.png',
+        attr="Map infortmation from Lands Department"
+    ).add_to(m)
+
+    # Define a color map for clusters
+    unique_clusters = df['cluster'].unique()
+    colors = cm.get_cmap('tab10', len(unique_clusters))  # Using 'tab10' colormap for up to 10 clusters
+    cluster_colors = {cluster: mcolors.to_hex(colors(i)) for i, cluster in enumerate(unique_clusters)}
+
+    # Plot original data points
+    for _, row in df.iterrows():
+        folium.CircleMarker(
+            location=[row['latitude'], row['longitude']],
+            radius=5,
+            color=cluster_colors[row['cluster']],
+            fill=True,
+            fill_color=cluster_colors[row['cluster']],
+            fill_opacity=0.7,
+            popup=f"Temp: {row['temperature']} °C<br>Humidity: {row['humidity']} %<br>Feels Like: {row['feels_like']:.2f} °C<br>Cluster: {row['cluster']}"
+        ).add_to(m)
+
+    # Calculate the average temperature for each cluster
+    cluster_centers = df.groupby('cluster').agg({
+        'latitude': 'mean',
+        'longitude': 'mean',
+        'temperature': 'mean'
+    }).reset_index()
+
+    # Plot cluster centers
+    for _, row in cluster_centers.iterrows():
+        folium.Marker(
+            location=[row['latitude'], row['longitude']],
+            icon=DivIcon(
+                icon_size=(150,36),
+                icon_anchor=(85, 20),  # Adjusted anchor position to move text away from the point
+                html=f'<strong><div style="font-size: 15px; color: {cluster_colors[row["cluster"]]}">{row["temperature"]:.2f} °C</div></strong>'
+            ),
+            popup=f"Cluster: {row['cluster']}<br>Avg Temp: {row['temperature']:.2f} °C"
+        ).add_to(m)
+
+    # Display the map in Streamlit
+    st_folium(m, width=500, height=600)
+
+# Column 3: Data Table
+with col3:
+    st.markdown(
+        """
+        <style>
+        .dataframe-container {
+            height: 600px;
+            overflow-y: auto;
+        }
+        .dataframe th, .dataframe td {
+            text-align: left;
+            padding: 8px;
+        }
+        </style>
+        """,
+        unsafe_allow_html=True
+    )
+    # Display the DataFrame
+    st.dataframe(df[['latitude', 'longitude', 'temperature', 'humidity', 'feels_like', 'cluster']], height=600)

pages/5_Past Records.py

@@ -0,0 +1,141 @@
+import streamlit as st
+import pandas as pd
+import plotly.express as px
+import json
+import os
+import glob
+
+# Directory paths
+data_dir = 'past_temp'
+geojson_file = os.path.join(data_dir, 'FavgTS.geojson')
+
+# Load GeoJSON data
+def load_geojson():
+    with open(geojson_file) as f:
+        return json.load(f)
+
+# Create a dictionary to map short forms to long forms
+def create_station_map(geojson):
+    feature_map = {}
+    for feature in geojson['features']:
+        short_name = feature['properties']['WeatherStationShortName']
+        long_name = feature['properties']['WeatherStationName_en']
+        feature_map[short_name] = long_name
+    return feature_map
+
+# Load CSV files
+def load_csv_files():
+    return glob.glob(os.path.join(data_dir, '*.csv'))
+
+# Plot time series
+def plot_time_series(df, station_name):
+    df['Date'] = pd.to_datetime(df['Date'], format='%Y%m%d', errors='coerce')
+    df['Year'] = df['Date'].dt.year
+    df['Month'] = df['Date'].dt.month
+
+    fig_all_years = px.line(df, x='Date', y='Value', color='Year',
+                            title=f'All-Year Temperature Time Series for {station_name}',
+                            labels={'Date': 'Date', 'Value': 'Temperature (°C)', 'Year': 'Year'},
+                            line_shape='linear')
+    fig_all_years.update_layout(xaxis_title='Date', yaxis_title='Temperature (°C)')
+
+    return fig_all_years
+
+# Plot monthly averages
+def plot_monthly_averages(df, station_name):
+    df['Date'] = pd.to_datetime(df['Date'], format='%Y%m%d', errors='coerce')
+    df['Year'] = df['Date'].dt.year
+    df['Month'] = df['Date'].dt.month
+
+    monthly_avg = df.groupby(['Year', 'Month'])['Value'].mean().reset_index()
+
+    fig_monthly_avg = px.line(monthly_avg, x='Month', y='Value', color='Year',
+                              title=f'Monthly Average Temperature Time Series for {station_name}',
+                              labels={'Month': 'Month', 'Value': 'Average Temperature (°C)', 'Year': 'Year'},
+                              line_shape='linear')
+    fig_monthly_avg.update_layout(xaxis_title='Month', yaxis_title='Average Temperature (°C)', xaxis_tickformat='%b')
+
+    return fig_monthly_avg
+
+def plot_annual_average(df, station_name):
+    annual_avg = df.groupby('Year')['Value'].mean().reset_index()
+
+    fig_annual_avg = px.line(annual_avg, x='Year', y='Value',
+                             title=f'Annual Average Temperature Trend for {station_name}',
+                             labels={'Year': 'Year', 'Value': 'Average Temperature (°C)'},
+                             line_shape='linear')
+    fig_annual_avg.update_layout(xaxis_title='Year', yaxis_title='Average Temperature (°C)')
+
+    return fig_annual_avg
+
+# Streamlit app layout
+st.set_page_config(layout="wide", page_title="Temperature Time Series")
+
+# Load GeoJSON and create mapping
+geojson = load_geojson()
+station_map = create_station_map(geojson)
+
+# Load all CSV files
+csv_files = load_csv_files()
+
+# Initialize data storage for all CSV files
+all_data = []
+
+# Process each CSV file
+for file in csv_files:
+    try:
+        file_name = os.path.basename(file)
+        short_form = file_name.split('.')[0]  # Get the file name without extension
+
+        df = pd.read_csv(file)
+
+        if df.shape[1] < 2:
+            st.error(f"File {file} does not have the expected number of columns. Skipping.")
+            continue
+
+        if df.columns[0] != 'Date':
+            df.columns = ['Date', 'Value']
+
+        long_form = station_map.get(short_form, "Unknown Station")
+        df['Station'] = long_form
+        all_data.append(df)
+
+    except Exception as e:
+        st.error(f"Error loading or processing file {file}: {e}")
+
+# Combine all data into a single DataFrame
+if all_data:
+    combined_df = pd.concat(all_data, ignore_index=True)
+    combined_df['Date'] = pd.to_datetime(combined_df['Date'], format='%Y%m%d', errors='coerce')
+    combined_df = combined_df.dropna(subset=['Date'])
+    combined_df['Year'] = combined_df['Date'].dt.year
+    combined_df['Month'] = combined_df['Date'].dt.month
+
+    stations = combined_df['Station'].unique()
+    default_station = stations[0] if len(stations) > 0 else None
+
+    if not stations.size:
+        st.write("No stations available in the data.")
+    else:
+        st.subheader('Past Daily Average Temperature Time Series')
+        selected_station = st.selectbox("Select a Station", options=stations, index=0)
+
+        station_data = combined_df[combined_df['Station'] == selected_station]
+
+        if not station_data.empty:
+            # Create two columns for plots
+            col1, col2 = st.columns([2,1.5])
+
+            # Top plot: All-year time series
+            with col1:
+                fig_all_years = plot_time_series(station_data, selected_station)
+                st.plotly_chart(fig_all_years, use_container_width=True)
+
+            # Bottom plot: Monthly average temperatures
+            with col2:
+                fig_monthly_avg = plot_monthly_averages(station_data, selected_station)
+                st.plotly_chart(fig_monthly_avg, use_container_width=True)
+        else:
+            st.write(f"No data available for the selected station '{selected_station}'.")
+else:
+    st.write("No data to display.")

pages/6_Heat island.py

@@ -0,0 +1,186 @@
+import streamlit as st
+import folium
+import json
+import plotly.express as px
+import pandas as pd
+from streamlit_folium import st_folium
+import plotly.graph_objs as go
+
+st.set_page_config(layout="wide", page_title="Heat Island Effect Analysis")
+
+def load_geojson(filepath):
+    with open(filepath, 'r', encoding='utf-8') as f:
+        return json.load(f)
+
+def plot_geojson(feature_group, geojson_data, property_name, colormap):
+    folium.GeoJson(
+        geojson_data,
+        style_function=lambda feature: {
+            'fillColor': colormap(feature['properties'][property_name]),
+            'color': 'black',
+            'weight': 1,
+            'fillOpacity': 0.7,
+        },
+        popup=folium.GeoJsonPopup(fields=['NAME_EN', property_name], aliases=['District:', 'Value:']),
+    ).add_to(feature_group)
+
+def compute_difference_geojson(geojson_2013, geojson_2023):
+    difference_geojson = {"type": "FeatureCollection", "features": []}
+
+    name_to_hot_nights_2013 = {
+        feature['properties']['NAME_EN']: feature['properties']['Hot_Nights']
+        for feature in geojson_2013['features']
+    }
+
+    for feature in geojson_2023['features']:
+        name_en = feature['properties']['NAME_EN']
+        hot_nights_2013 = name_to_hot_nights_2013.get(name_en, 0)
+        hot_nights_2023 = feature['properties']['Hot_Nights']
+        difference = hot_nights_2023 - hot_nights_2013
+
+        feature['properties']['Difference'] = difference
+        difference_geojson['features'].append(feature)
+
+    return difference_geojson
+
+def geojson_to_dataframe(geojson_data, year):
+    features = geojson_data['features']
+    data = {
+        'District': [feature['properties']['NAME_EN'] for feature in features],
+        'Hot_Nights': [feature['properties']['Hot_Nights'] for feature in features],
+        'Year': [year] * len(features)  # Add year column
+    }
+    return pd.DataFrame(data)
+
+geojson_2013 = load_geojson('ref/2013_hot.geojson')
+geojson_2023 = load_geojson('ref/2023_hot.geojson')
+
+hot_nights_2013 = [feature['properties']['Hot_Nights'] for feature in geojson_2013['features']]
+hot_nights_2023 = [feature['properties']['Hot_Nights'] for feature in geojson_2023['features']]
+all_hot_nights = hot_nights_2013 + hot_nights_2023
+
+colormap = folium.LinearColormap(
+    colors=['white', 'orange', 'red'],
+    vmin=min(all_hot_nights),
+    vmax=max(all_hot_nights),
+    caption='Hot Nights'
+)
+
+difference_geojson = compute_difference_geojson(geojson_2013, geojson_2023)
+
+diff_colormap = folium.LinearColormap(
+    colors=['blue', 'lightblue', 'white', 'pink', 'red'],
+    index=[-50, -10, 0, 10, 50],
+    vmin=-50,
+    vmax=50,
+    caption='Change in Hot Nights'
+)
+
+m = folium.Map(location=[22.35994791346238, 114.15924623933743], zoom_start=11, tiles='https://landsd.azure-api.net/dev/osm/xyz/basemap/gs/WGS84/tile/{z}/{x}/{y}.png?key=f4d3e21d4fc14954a1d5930d4dde3809',attr="Map infortmation from Lands Department")
+folium.TileLayer(
+        tiles='https://mapapi.geodata.gov.hk/gs/api/v1.0.0/xyz/label/hk/en/wgs84/{z}/{x}/{y}.png',
+        attr="Map infortmation from Lands Department").add_to(m)
+
+feature_group_2013 = folium.FeatureGroup(name='2013 Hot Nights', show=False)
+feature_group_2023 = folium.FeatureGroup(name='2023 Hot Nights', show=False)
+feature_group_diff = folium.FeatureGroup(name='Change in Hot Nights', show=True)
+
+plot_geojson(feature_group_2013, geojson_2013, 'Hot_Nights', colormap)
+plot_geojson(feature_group_2023, geojson_2023, 'Hot_Nights', colormap)
+plot_geojson(feature_group_diff, difference_geojson, 'Difference', diff_colormap)
+
+feature_group_2013.add_to(m)
+feature_group_2023.add_to(m)
+feature_group_diff.add_to(m)
+
+layer_control = folium.LayerControl().add_to(m)
+
+colormap.add_to(m)
+diff_colormap.add_to(m)
+
+df_2013 = geojson_to_dataframe(geojson_2013, '2013')
+df_2023 = geojson_to_dataframe(geojson_2023, '2023')
+
+combined_df = pd.concat([df_2013, df_2023])
+
+def plot_combined_box_plot(df):
+    fig = px.box(
+        df,
+        x='Year',
+        y='Hot_Nights',
+        title='Hot Nights (2013 vs 2023)',
+        labels={'Hot_Nights': 'Number of Hot Nights', 'Year': 'Year'},
+        color='Year'
+    )
+    fig.update_layout(
+        yaxis_title='Number of Hot Nights',
+        boxmode='group'
+    )
+    return fig
+
+data_table = pd.read_csv('ref/final_summary_with_available_stations.csv')
+
+stations = data_table['station_name'].unique()
+
+col1, col2, col3 = st.columns([1.35, 2, 1.1])
+
+with col1:
+    st.subheader('Heat Island Effect')
+    st.caption(
+        'The "heat island effect" refers to the temperature difference between urban and rural areas, particularly at night.')
+    st.caption(
+        'This phenomenon is a result of the urbanization and development processes. During the day, the urban environment (such as cement pavement) absorbs and stores more heat from solar insolation compared to rural areas (vegetation). This heat is then slowly released in the evening and nighttime, leading to higher temperatures in the urban areas.')
+
+    selected_station = st.selectbox('Select a Station:', options=stations)
+
+    filtered_data_table = data_table[data_table['station_name'] == selected_station]
+
+    fig = go.Figure()
+
+    fig.add_trace(go.Scatter(
+        x=filtered_data_table['month'],
+        y=filtered_data_table['13day_temp'],
+        mode='lines+markers',
+        name='2013 Day Temp',
+        line=dict(color='blue')
+    ))
+    fig.add_trace(go.Scatter(
+        x=filtered_data_table['month'],
+        y=filtered_data_table['13night_temp'],
+        mode='lines+markers',
+        name='2013 Night Temp',
+        line=dict(color='blue', dash='dash')
+    ))
+    fig.add_trace(go.Scatter(
+        x=filtered_data_table['month'],
+        y=filtered_data_table['23day_temp'],
+        mode='lines+markers',
+        name='2023 Day Temp',
+        line=dict(color='red')
+    ))
+    fig.add_trace(go.Scatter(
+        x=filtered_data_table['month'],
+        y=filtered_data_table['23night_temp'],
+        mode='lines+markers',
+        name='2023 Night Temp',
+        line=dict(color='red', dash='dash')
+    ))
+
+    fig.update_layout(
+        title=f'Temperature Comparison',
+        xaxis_title='Month',
+        yaxis_title='Temperature (°C)',
+        legend_title='Legend',
+        height =300
+    )
+
+    st.plotly_chart(fig, height=180)
+
+with col2:
+    st_folium(m, width=550, height=650)
+
+with col3:
+    st.caption(
+        'From data from the CO-WIN network, there has been a significant increase in the number of hot nights in Hong Kong. "Hot nights" refers to nights where the temperature remains above 28 degrees. Within the period from 2013 to 2023, 9 districts in Hong Kong have experienced an increase in the frequency of hot nights, the most significant are those in the urban.')
+
+    st.plotly_chart(plot_combined_box_plot(combined_df), use_container_width=True ,height=380)

pages/7_CoWIN.py

@@ -0,0 +1,175 @@
+import streamlit as st
+import requests
+import json
+import pandas as pd
+import folium
+from streamlit_folium import st_folium
+import plotly.graph_objects as go
+import numpy as np
+from datetime import datetime
+from branca.colormap import LinearColormap
+import pytz
+
+st.set_page_config(layout="wide", page_title="Real-Time CoWIN Weather Data Dashboard")
+
+@st.cache_data(ttl=300)  # Cache data for 5 minutes (300 seconds)
+def fetch_data():
+    hk_tz = pytz.timezone('Asia/Hong_Kong')
+    current_time = datetime.now(hk_tz).strftime('%Y-%m-%dT%H:%M:%S')
+    url = f'https://cowin.hku.hk/API/data/CoWIN/map?time={current_time}'
+    response = requests.get(url)
+    return json.loads(response.text), current_time
+
+data, fetched_time = fetch_data()
+
+features = data
+df = pd.json_normalize(features)
+
+df.rename(columns={
+    'station': 'Station',
+    'temp': 'Temperature',
+    'lat': 'Latitude',
+    'lon': 'Longitude',
+    'wd': 'Wind Direction',
+    'ws': 'Wind Speed',
+    'rh': 'Relative Humidity',
+    'uv': 'UV Radiation',
+    'me_name': 'Name'
+}, inplace=True)
+
+attribute = st.selectbox(
+    'Select Weather Attributes to Plot and Map (Data from HKO-HKU CoWIN)',
+    ['Temperature', 'Wind Speed', 'Relative Humidity', 'UV Radiation']
+)
+
+col1, col2, col3 = st.columns([1.65, 2, 1.2])
+
+with col1:
+    attr_series = pd.Series(df[attribute].dropna())
+
+    hist_data = np.histogram(attr_series, bins=10)
+    bin_edges = hist_data[1]
+    counts = hist_data[0]
+
+    def get_color(value, min_value, max_value):
+        ratio = (value - min_value) / (max_value - min_value)
+        r = int(255 * ratio)
+        b = int(255 * (1 - ratio))
+        return f'rgb({r}, 0, {b})'
+
+    fig = go.Figure()
+
+    for i in range(len(bin_edges) - 1):
+        bin_center = (bin_edges[i] + bin_edges[i + 1]) / 2
+        color = get_color(bin_center, bin_edges.min(), bin_edges.max())
+        fig.add_trace(go.Bar(
+            x=[f'{bin_edges[i]:.1f} - {bin_edges[i + 1]:.1f}'],
+            y=[counts[i]],
+            marker_color=color,
+            name=f'{bin_edges[i]:.1f} - {bin_edges[i + 1]:.1f}'
+        ))
+
+    fig.update_layout(
+        xaxis_title=f'{attribute}',
+        yaxis_title='Count',
+        title=f'{attribute} Distribution',
+        bargap=0.2,
+        title_font_size=20,
+        xaxis_title_font_size=14,
+        yaxis_title_font_size=14,
+        height=350,
+        xaxis=dict(title_font_size=14),
+        yaxis=dict(title_font_size=14)
+    )
+
+    st.plotly_chart(fig, use_container_width=True)
+    st.caption(f"Data fetched at: {fetched_time}")
+
+    with st.container():
+        col_1, col_2 = st.columns([1, 1])
+        with col_1:
+            if attr_series.size > 0:
+                avg_attr = np.mean(attr_series)
+                std_attr = np.std(attr_series)
+                max_attr = np.max(attr_series)
+                min_attr = np.min(attr_series)
+
+                st.metric(label=f"Average {attribute}", value=f"{avg_attr:.2f}")
+                st.metric(label=f"Minimum {attribute}", value=f"{min_attr:.2f}")
+        with col_2:
+            st.metric(label=f"Maximum {attribute}", value=f"{max_attr:.2f}")
+            st.metric(label=f"Std. Dev {attribute}", value=f"{std_attr:.2f}")
+
+def attribute_to_color(value, min_value, max_value):
+    """Convert a value to a color based on the gradient."""
+    ratio = (value - min_value) / (max_value - min_value)
+    return LinearColormap(['blue', 'purple', 'red']).rgb_hex_str(ratio)
+
+with col2:
+    m = folium.Map(location=[22.3547, 114.1483], zoom_start=11, tiles='https://landsd.azure-api.net/dev/osm/xyz/basemap/gs/WGS84/tile/{z}/{x}/{y}.png?key=f4d3e21d4fc14954a1d5930d4dde3809',attr="Map infortmation from Lands Department")
+    folium.TileLayer(
+        tiles='https://mapapi.geodata.gov.hk/gs/api/v1.0.0/xyz/label/hk/en/wgs84/{z}/{x}/{y}.png',
+        attr="Map infortmation from Lands Department").add_to(m)
+
+    min_value = df[attribute].min()
+    max_value = df[attribute].max()
+
+    for _, row in df.iterrows():
+        lat = row['Latitude']
+        lon = row['Longitude']
+        station = row['Station']
+        name = row['Name']
+        value = row[attribute]
+
+        color = attribute_to_color(value, min_value, max_value) if pd.notna(value) else 'gray'
+
+        folium.Marker(
+            location=[lat, lon],
+            popup=(
+                f"<p style='font-size: 12px; background-color: white; padding: 5px; border-radius: 5px;'>"
+                f"Station: {station}<br>"
+                f"Name: {name}<br>"
+                f"{attribute}: {value}<br>"
+                f"</p>"
+            ),
+            icon=folium.DivIcon(
+                html=f'<div style="font-size: 10pt; color: {color}; padding: 2px; border-radius: 5px;">'
+                     f'<strong>{value}</strong></div>'
+            )
+        ).add_to(m)
+
+    # Create a color scale legend
+    colormap = folium.LinearColormap(
+        colors=['blue', 'purple', 'red'],
+        index=[min_value, (min_value + max_value) / 2, max_value],
+        vmin=min_value,
+        vmax=max_value,
+        caption=f'{attribute}'
+    )
+    colormap.add_to(m)
+
+    st_folium(m, width=530, height=600)
+
+with col3:
+    st.markdown(
+        """
+        <style>
+        .dataframe-container {
+            height: 600px;
+            overflow-y: auto;
+        }
+        </style>
+        """,
+        unsafe_allow_html=True
+    )
+
+    st.dataframe(df[['Station', 'Name', 'Temperature', 'Wind Speed', 'Relative Humidity', 'UV Radiation', 'Latitude', 'Longitude']], height=600)
+
+if st.button("Refresh Data"):
+    st.experimental_rerun()
+
+hk_tz = pytz.timezone('Asia/Hong_Kong')
+current_time = datetime.now(hk_tz)
+if 'last_ran' not in st.session_state or (current_time - st.session_state.last_ran.replace(tzinfo=hk_tz)).total_seconds() > 300:
+    st.session_state.last_ran = current_time
+    st.experimental_rerun()