streamlit_map_animation.py

import streamlit as st
import pandas as pd
import numpy as np
import altair as alt
import pydeck as pdk
import time


# LOADING DATA
DATE_TIME = "date/time"
DATA_URL = (
    "http://s3-us-west-2.amazonaws.com/streamlit-demo-data/uber-raw-data-sep14.csv.gz"
)

@st.cache(persist=True)
def load_data(nrows):
    data = pd.read_csv(DATA_URL, nrows=nrows)
    lowercase = lambda x: str(x).lower()
    data.rename(lowercase, axis="columns", inplace=True)
    data[DATE_TIME] = pd.to_datetime(data[DATE_TIME])
    return data

data_origin = load_data(100000)

# CREATING FUNCTION FOR MAPS

def map(data, lat, lon, zoom):
    map_component.write(pdk.Deck(
        map_style="mapbox://styles/mapbox/light-v9",
        initial_view_state={
            "latitude": lat,
            "longitude": lon,
            "zoom": zoom,
            "pitch": 50,
        },
        layers=[
            pdk.Layer(
                "HexagonLayer",
                data=data,
                get_position=["lon", "lat"],
                radius=100,
                elevation_scale=4,
                elevation_range=[0, 1000],
                pickable=True,
                extruded=True,
            ),
        ]
    ))
    
    
def map_hour(hour):
    data = data_origin[data_origin[DATE_TIME].dt.hour == hour]
    map(data, midpoint[0], midpoint[1], 11)
    

def animation():
    progress_bar = st.progress(0)
    frame_text = st.empty()
    
    for frame, hour in enumerate(range(0, 24)):
        progress_bar.progress((1.0+frame) / 24.0)
        frame_text.text("hour: {}".format(hour))
        
        map_hour(hour)
        time.sleep(frame_time)
        
    progress_bar.empty()
    frame_text.empty()


st.title("NYC Uber Ridesharing Data")
hour_selected = st.slider("Select hour of pickup", 0, 23)

midpoint = (np.average(data_origin["lat"]), np.average(data_origin["lon"]))


map_component = st.empty()

st.write("")

frame_time = st.slider('frame time(s)', 0., 5., 1., 0.1)

animation_button = st.button('animation')
if animation_button:
    map_component.empty() 
    animation()
    map_component.empty() 

map_hour(hour_selected)