Request for Assistance: Multi-Marker Selection and Value Summation Display in Folium Map

[Yashasvi Pundir]

Description

I am working on a project using Folium where I have a map with multiple markers. Each marker has an associated integer value. I need assistance with implementing the following functionality:

1. Marker Selection and De-selection: Users should be able to select and de-select multiple markers on the map.
2. Value Summation: When markers are selected, their associated values should be summed and displayed in a floating text box.
3. Dynamic Update: The floating text box should update dynamically to reflect the total value as markers are selected or de-selected.

Expected Outcome

• A Folium map with multiple markers.
• A floating text box positioned in the top right corner of the map.
• The floating text box displays the total value of selected markers.
• The total value updates in real-time with each marker selection or de-selection.

Current Status

I have created a Folium map with markers and associated values. I've also managed to display a floating box at the top right corner. However, I need guidance on how to:

• Enable multi-marker selection and de-selection.
• Implement the dynamic summation of selected marker values.
• Display the summed value in a floating text box that updates as per user selection of markers.

My code:

Expand

import folium

# Create a folium map
m = folium.Map(location=[45.5236, -122.6750], zoom_start=13)

# Add markers with popups
popup_values = [10, 20, 30, 40]
locations = [
    [45.5236, -122.6750],
    [45.5289, -122.6800],
    [45.5300, -122.6900],
    [45.5310, -122.6950]
]

for location, value in zip(locations, popup_values):
    folium.Marker(location, popup=str(value)).add_to(m)

# Add a floating box for the sum
floating_box = """
<div id="floating-box" style="position: fixed; top: 10px; right: 10px; width: 150px; height: 50px; background-color: white; border: 1px solid black; z-index: 9999;">
    <p>Total: <span id="total">0</span></p>
</div>
"""

# Add the floating box to the map
m.get_root().html.add_child(folium.Element(floating_box))

# Save the map to an HTML file
m.save('map_with_sum.html')

Any guidance or suggestions on how to achieve this functionality would be greatly appreciated.
Thank you for your time and assistance.

[Hans Then]

Is this a feature request for Folium? To me this feels more like a question to be asked on Stack Overflow or a similar site. Probably Folium is not the best tool to implement such an application. You might have more success using streamlit-folium or leaflet directly.