How do I filter data using radio buttons on a Folium Map?

Question

I was wondering how to add radio buttons to only select specific data to appear on a Folium Graph (basically be able to filter by the 'key' column in the data frame).

Here's what I currently have:


!pip install geopandas
import numpy as np
import pandas as pd
import geopandas as gpd
!pip install folium
import folium
from folium import plugins
import datetime
import geopy

from IPython.display import HTML, display

from folium.plugins import TimestampedGeoJson



###Importing the data as Pandas DataFrame

fp = '/content/query.csv'
eartt1=pd.read_csv(fp)

Changing time to datetime
eartt1['time']=eartt1['time'], dayfirst=True)
eartt1['time']=pd.to_datetime(eartt1['time'])
###Time as the data frame's index
###Create a new column called "type" to help us in the pivoting

eartt1=eartt1.set_index('time')
eartt1['type']= 'ss'
eartt1.head(1)
###List number of earquakes by place, time, location, key

start = eartt1.pivot_table('id',
                          index = ['place', 'time',
                                   'latitude',
                                   'longitude', 
                                   'key'
                                   ],
                          columns = 'type',
                          aggfunc='count').reset_index()


###Extract the hour from time_hour
start['time_hh']=start['time'].dt.hour

def create_geojson_features(df):
    features = []
    
    for _, row in df.iterrows():
        feature = {
            'type': 'Feature',
            'geometry': {
                'type':'Point', 
                'coordinates':[row['longitude'],row['latitude']]
            },
            'properties': {
                'key': row['key'],
                'time': pd.to_datetime(row['time_hh'], unit='h').__str__(),
                'style': {'color' : ''},
                'icon': 'circle',
                'iconstyle':{
                    'fillColor': row['fillcolor'],
                    'fillOpacity': 0.8,
                    'stroke': 'true',
                }
            }
        }
        features.append(feature)
    return features

###Calling the Function create_geojson_features and using it in our data frame and get the geojson
start_geojson = create_geojson_features(start)


EQ_map = folium.Map(location = [2, -2],
                    tiles = "CartoDB Positron",
                    zoom_start = 2)
plugins.ScrollZoomToggler().add_to(EQ_map)



plugins.Fullscreen(
    position="topright",
    title="Expand me",
    title_cancel="Exit me",
    force_separate_button=True,
).add_to(EQ_map)


TimestampedGeoJson(start_geojson,
                  period = 'PT1H',
                  duration = 'PT1H',
                  transition_time = 1000,
                  auto_play = True).add_to(EQ_map)

EQ_map

The original data frame resembles something like this:

    time.                 latitude.    longitude.    key.    
    2022-11-07 09:30:03.  39.2345.     58.12942.     762346734
    2022-11-12 09:12:04.  32.1233.     45.28182.     612376322
    2022-11-15 09:19:40.  36.1287.     56.21387.     762346734

I want the values in the key column to be displayed as radio buttons on the Map, so that I can filter by them, note that there are duplicate keys in the data.

I have come across FeatureGroup however I cannot figure out how to apply it to my current code.

Thanks

How do I filter data using radio buttons on a Folium Map?

0 Answers0