Adding folium.GeoJsonPopup() to multiple folium.GeoJson() layers breaks map

[lukehuxham]

I will preface this by saying I know how to fix this and am happy to try and do it just need some help on where to start :)

Issue:
When creating multiple GeoJson() layers each with GeoJsonPopup() assigned the final output is blank page. The issue is that for each layer with GeoJsonPopup() assigned it creates a new variable in the JS called (let) name_getter. As far as I can see this variable serves no purpose as the string value itself is used directly to call the bindPopup() method. Simply removing/commenting out the multiple name_getter declarations in the saved output file fixes the issue and the map renders and behaves as expected.

Below enables reproduction of the issue.

import json
import requests
import folium

url = (
    "https://raw.githubusercontent.com/python-visualization/folium/master/examples/data"
)
antarctic_ice_edge = f"{url}/antarctic_ice_edge.json"
antarctic_ice_shelf_topo = f"{url}/antarctic_ice_shelf_topo.json"

# this works as expected 2 layers with no popups
m = folium.Map(
    location=[-59.1759, -11.6016],
    zoom_start=2,  # Limited levels of zoom for free Mapbox tiles.
)
for i in range(2):
    folium.GeoJson(
        antarctic_ice_edge,
        name=f"geojson_{i}",
        # popup=folium.GeoJsonPopup(["scalerank"])
    ).add_to(m)
folium.LayerControl().add_to(m)
m

# this works as expected 1 layer with popup
m = folium.Map(
    location=[-59.1759, -11.6016],
    zoom_start=2,  # Limited levels of zoom for free Mapbox tiles.
)
for i in range(1):
    folium.GeoJson(
        antarctic_ice_edge,
        name=f"geojson_{i}",
        popup=folium.GeoJsonPopup(["scalerank"]),
    ).add_to(m)
folium.LayerControl().add_to(m)
m

# this does not work just get a blank page back
m = folium.Map(
    location=[-59.1759, -11.6016],
    zoom_start=2,  # Limited levels of zoom for free Mapbox tiles.
)
for i in range(2):
    folium.GeoJson(
        antarctic_ice_edge,
        name=f"geojson_{i}",
        popup=folium.GeoJsonPopup(["scalerank"]),
    ).add_to(m)
folium.LayerControl().add_to(m)
m.save("index.html")

** Solution **
In the index.html file created by the final code chunk by commenting out lines 143 & 186 which are the two declaration lines for the name_getter variable

        let name_getter = "id_string";

The file will then render as expected. Multiple layers with popups.

Expected behavior
Map should render with multiple layers each showing popup on feature click.

folium is maintained by volunteers. Can you help making a fix for this issue? Yes I would like to help

[Conengmo]

Hi Luke, thanks for you well-written report. Luckily this has already been fixed in #1347. Which means this issue is a duplicate of #1346.

This fix hasn't been released yet, but no action is needed. You can already use the fixed code by installing folium from our master branch. The fix will also be in our next release, which will be v0.12.0, release date yet undecided.