import pandas as pd

# Sample data for demonstration
data = {
    "topo_start_lat": [37.7749, 40.7128],
    "topo_start_lon": [-122.4194, -74.0060],
    "city": ["San Francisco", "New York"]
}
df = pd.DataFrame(data)

def select(data, event):
    index = event.index[0]
    row = df.iloc[index]
    return Map(
        location=[row['topo_start_lat'], row['topo_start_lon']],
        zoom_start=10,
        tiles="https://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}",
    )

with gr.Blocks() as demo:
    gr.Markdown("# Explore World Capitals with Gradio and Folium")
    map_component = Folium(value=Map(location=[0, 0], zoom_start=2))
    data_table = gr.DataFrame(value=df)
    data_table.select(select, inputs=data_table, outputs=map_component)


if __name__ == "__main__":
    demo.launch()