[Python] Python Folium - Find CircleMarker Popup That Contains iFrame by iFrame innerHtml

I can't figure out how to find a CircleMarker in Folium using Python. The Circle Marker contains an iFrame. I put a search field on my Folium map and I am trying to make it so the user can search for a CircleMarker by the content in the iFrame and then make the iFrame popup to show the user where the location is.

For example, if the CircleMarker contains an iFrame that says "Warehouse #1", I would like for the user to be able to search "Warehouse #1" and have the iFrame popup as if the CircleMarker was clicked on.

Anyone have an idea?

I have tried capturing the markers but they do not have a __popup property to access. I also can't find the iFrame located in the markers. I am assuming they are separate and accessed separately using some other method?

var markers = document.querySelectorAll('.leaflet-interactive');
markers.forEach(function(marker) {
var popup = marker._popup;
if (popup && popup.getContent().includes('Warehouse #1')) {
console.log('Found CircleMarker with Warehouse #1');
// You can add additional actions here
}
});


UPDATE:

I figured out a solution. The code below loads the dictionary of circle marker IDs into the final javascript of the page so they can be accessed easily. Let me know if you have any questions.

circle_markers = {}

for router in list:
html = router.city_name
iframe = folium.IFrame(html=html, width=180, height=50)
popup = folium.Popup(iframe, max_width=2650)
marker = folium.CircleMarker(
[router.latitude, router.longitude], radius=2, weight=2, popup=popup
).add_to(map)

circle_markers[router.city_name] = f"circle_marker_{marker._id}"

circle_marker_dict = dict_to_js(circle_markers)

search_js = f"""
function searchAndPopup() {{
var searchValue = document.getElementById('searchField').value.toUpperCase();
var circleMarkerDict = {circle_marker_dict};
var found = false;

for (var key in circleMarkerDict) {{
if (key.toUpperCase().includes(searchValue)) {{
window[circleMarkerDict[key]].openPopup();
found = true;
break;
}}
}}

if (!found) {{
alert('Search value not found');
}}
}}

function clearSearchField() {{
document.getElementById('searchField').value = '';
}}

// Add event listener for Enter key
document.getElementById('searchField').addEventListener('keydown', function(event) {{
if (event.key === 'Enter') {{
event.preventDefault(); // Prevent the default form submission
searchAndPopup();
}}
}});

"""

search_html = """
<div style="position: fixed; bottom: 10px; left: 10px; z-index: 1000; background: white; padding: 10px; border-radius: 5px;">
<input type="text" id="searchField" placeholder="Search...">
<button onclick="searchAndPopup()">Search</button>
<button onclick="clearSearchField()">Clear</button>
</div>
"""
# Add the search field and JavaScript to the map
map.get_root().html.add_child(folium.Element(search_html))
map.get_root().script.add_child(folium.Element(search_js))

# This is to turn Python dictionary into Javascript
def dict_to_js(dictionary):
js_dict = "{"
for key, value in dictionary.items():
js_key = f'"{key}"'
if isinstance(value, str):
js_value = f'"{value}"'
elif isinstance(value, bool):
js_value = 'true' if value else 'false'
else:
js_value = value
js_dict += f'{js_key}: {js_value}, '
js_dict = js_dict.rstrip(', ') + "}"
return js_dict

Continue reading...