Implement popup option in folium.TopoJson layer

[michelmetran]

I am making a map with different colors and popups for each group of polygons.
I did it using folium.GeoJson and it worked. The problem is slow to render.

I tested using folium.TopoJson and the rendering is much better!! However, I can't put a dynamic popup, using the properties of json, as I do like folium.GeoJson.

I have tried iteration (for), adding in a FeatureGroup... also without sucess.
Is there any way to insert a dynamic popup using folium.TopoJson?
If not, I leave the suggestion to include ...
:)

TopoJson renders faster. I would like to make the popup because I am inserting the map in a Django project.

---

Code using folium.GeoJson. Slow, but works!

import folium
import geopandas as gpd
from folium import plugins

# Read
gdf = gpd.read_file('https://raw.githubusercontent.com/michelmetran/sp_bombeiro/main/data/shps/sp_bombeiros.geojson')

# Dict
color_polygon = {
    '1º Grupamento de Bombeiros': '#ffff99',
    '5º Grupamento de Bombeiros': '#a6cee3',
    '6º Grupamento de Bombeiros': '#1f78b4',
    '7º Grupamento de Bombeiros': '#b2df8a',
    '8º Grupamento de Bombeiros': '#33a02c',
    '9º Grupamento de Bombeiros': '#fb9a99',
    '10º Grupamento de Bombeiros': '#a6cee3',
    '11º Grupamento de Bombeiros': '#1f78b4',
    '12º Grupamento de Bombeiros': '#b2df8a',
    '13º Grupamento de Bombeiros': '#33a02c',
    '14º Grupamento de Bombeiros': '#fb9a99',
    '15º Grupamento de Bombeiros': '#e31a1c',
    '16º Grupamento de Bombeiros': '#fdbf6f',
    '17º Grupamento de Bombeiros': '#ff7f00',
    '18º Grupamento de Bombeiros': '#cab2d6',
    '19º Grupamento de Bombeiros': '#6a3d9a',
    '20º Grupamento de Bombeiros': '#b15928'
}

# Map
m = folium.Map([-23, -47], zoom_start=6)

# Layer
folium.GeoJson(
    gdf,
    name='Bombeiros',
    smooth_factor=1.0,
    #zoom_on_click=True,
    embed=False,
    style_function=lambda x: {
        'fillColor': color_polygon[x['properties']['gb_nome']],
        'color': color_polygon[x['properties']['gb_nome']],
        'weight': 1,
        'fillOpacity': 0.3,
    },
    highlight_function=lambda x: {'weight': 3},
    tooltip=folium.features.GeoJsonTooltip(
        fields=['municipio_nome', 'gb_sigla'],
        aliases=['Munícipio', 'Grupamento'],
        sticky=True,
        opacity=0.9,
        direction='right',
    ),
    popup=folium.GeoJsonPopup(
        ['popup'],
        parse_html=False,
        max_width='300',
        show=False,
        labels=False,
        sticky=True,
    )
).add_to(m)

# Plugins
m.fit_bounds(m.get_bounds())
plugins.Fullscreen(
    position='topleft',
    title='Clique para Maximizar',
    title_cancel='Mininizar',    
).add_to(m)
m

Code using folium.TopoJson. Faster. Without dinamic popups...

import folium
import requests

# Url Data
url = 'https://raw.githubusercontent.com/michelmetran/sp_bombeiro/main/data/shps/sp_bombeiros.json'

# Map
m = folium.Map([-23, -47], zoom_start=6)

# Dict
color_polygon = {
    '1º Grupamento de Bombeiros': '#ffff99',
    '5º Grupamento de Bombeiros': '#a6cee3',
    '6º Grupamento de Bombeiros': '#1f78b4',
    '7º Grupamento de Bombeiros': '#b2df8a',
    '8º Grupamento de Bombeiros': '#33a02c',
    '9º Grupamento de Bombeiros': '#fb9a99',
    '10º Grupamento de Bombeiros': '#a6cee3',
    '11º Grupamento de Bombeiros': '#1f78b4',
    '12º Grupamento de Bombeiros': '#b2df8a',
    '13º Grupamento de Bombeiros': '#33a02c',
    '14º Grupamento de Bombeiros': '#fb9a99',
    '15º Grupamento de Bombeiros': '#e31a1c',
    '16º Grupamento de Bombeiros': '#fdbf6f',
    '17º Grupamento de Bombeiros': '#ff7f00',
    '18º Grupamento de Bombeiros': '#cab2d6',
    '19º Grupamento de Bombeiros': '#6a3d9a',
    '20º Grupamento de Bombeiros': '#b15928'
}

# Layer
lyr = folium.TopoJson(
    #open(os.path.join('data', 'shps', 'sp_bombeiros.json')),  # Local File
    requests.get(url).json(),
    object_path='objects.data',
    name='São Paulo',
    style_function=lambda x: {
        'fillColor': color_polygon[x['properties']['gb_nome']],
        'color': color_polygon[x['properties']['gb_nome']],
        'weight': 1,
        'fillOpacity': 0.3,
    },
    tooltip=folium.features.GeoJsonTooltip(
        fields=['municipio_nome', 'gb_sigla'],
        aliases=['Munícipio', 'Grupamento'],
        sticky=True,
        opacity=0.9,
        direction='right',
    ),
    #popup='test', # Doesnt Work! ERROR!
)

lyr.add_child(
    folium.Popup(
        #'test',   # Doesnt Work, static text...
        #['popup'],   # Doesnt Work, blank
        gdf['popup'][0],   # Doesnt Work STATIC INFOS, NOT DYNAMIC!
        #lambda x: x['properties']['popup'],   # Doesnt Work
        #sticky=False,
        #localize=True,
        #parse_html=False,
        max_width=400
    )
)

# Add Layer to Map
lyr.add_to(m)

# Apresenta o mapa
m.fit_bounds(m.get_bounds())
plugins.Fullscreen(
    position='topleft',
    title='Clique para Maximizar',
    title_cancel='Mininizar',
).add_to(m)
m

[Conengmo]

I can't tell how difficult this would be. If somebody wants to take a shot at this, your welcome to!