1

I have a folium.Map, and I'd like to add buttons in the exported HTML file, so that when I click on them, it would change the view to the locations selected.

Here is the Python code to generate the HTML map, with two buttons:

import folium

m = folium.Map(location=[48.8566, 2.3522], zoom_start=10)

# Add buttons to jump to Paris and London
buttons_html = """
<div style="position: fixed; top: 10px; left: 50px; z-index: 1000;">
    <button onclick="jumpToCity(48.8566, 2.3522, 12)">Paris</button>
    <button onclick="jumpToCity(51.5074, -0.1278, 12)">London</button>
</div>
<script>
    function jumpToCity(lat, lng, zoom) {
        var map = document.querySelector('.leaflet-container')._leaflet_map;
        map.setView([lat, lng], zoom);
    }
</script>
"""

m.get_root().html.add_child(folium.Element(buttons_html))
m.save('output.html')

After some digging, in the generated HTML file, I found that the object of the map is generated with a name composed of a hash that changes every time I run the code:

var map_931983127ff2ad4bbeb40856ea0710c9 = L.map(
    "map_931983127ff2ad4bbeb40856ea0710c9",
    {
        center: [48.8566, 2.3522],
        crs: L.CRS.EPSG3857,
        zoom: 10,
        zoomControl: true,
        preferCanvas: false,
    }
);

If I manually change the command map.setView(...) to map_931983127ff2ad4bbeb40856ea0710c9.setView(...) in the HTML, the buttons work well.

Is there a way to set this automatically? A solution (but an ugly one) would be to include in the Python a small script after the export that would update the HTML file (using regexp or something like that).

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.