[Python] Add a button to jump to location on the map

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).

Continue reading...