Folium - Django: How to make a folium marker a link to another page

I'm generating a map using Folium with Django like so:

views.py

def viz(request):
    dg_map= folium.Map(location=[50.38175,6.2787],               
              tiles= 'https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png?api_key=<MY_API_KEY>',
              attr= '&copy; <a href="https://stadiamaps.com/">Stadia Maps</a>, &copy; <a href="https://openmaptiles.org/">OpenMapTiles</a> &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
              zoom_start=10)
    map_details = fetch_data("SELECT id, firstname, lat, long FROM map_details") #helper func to query the DB
    for item in map_details:
        location = [item[2], item[3]]
        popup = f"{item[1]}'s Garden"
        marker = folium.Marker(
            location = location, 
            popup = popup, 
            icon=folium.Icon(color='darkgreen', icon="heart", prefix='fa'))
        marker.add_to(dg_map);
    m = dg_map._repr_html_()
    context = {'map': m}
    return render(request, 'accounts/viz.html', context)

This is working as expected.

However, I'd like each marker to redirect towards another page on-click. To make matters worse, I'd need to use the id that's querried in the SELECT statement and include it in the destination link, because the urlpattern of the destination pages is this:

urls.py

path('garden/<str:id>/', views.garden, name="garden").

What I found out so far:

  • I found several suggestions on how to add an href to the pop-up (e.g. here) but this is not what I want as it requires the user to click twice.
  • Some ideas on how to add custom js to Folium's output are mentioned here, but I think it's not implemented yet.
  • I also found instructions on how this can be done in Leaflet. It seems pretty straight forward, but I'd like to stick with Python/Folium code and keep the logic in my views.py rather than starting js scripting.

Any Idea how this can be achieved? Thanks a lot!!

Back to Top