0

I have an html file that has been generated with folium, within are multiple folium markers representing a range of different locations.

With python I want to go through the html file and add a click event function to each marker so that on the event the lat/lon will be returned.

I already have the function created:

.on('click', function(e) {
     var point = e.latlng;

     document.querySelector('meta[name="point"]').setAttribute("content", point);
})

And here is an example of the section of folium marker where I need to append the function (after 'addTo(map)'):

var marker_b05545cf05b08cd5d04cd4ea09541226 = L.marker(
     [51.7678, -0.00675564],
     {}
     ).addTo(map_97dd2eeb89fe7d0a2f70926e61b8eeab);

So hopefully the final code should look like this:

var marker_b05545cf05b08cd5d04cd4ea09541226 = L.marker(
     [51.7678, -0.00675564],
     {}
     ).addTo(map_97dd2eeb89fe7d0a2f70926e61b8eeab).on('click', function(e) {
          var point = e.latlng;

          document.querySelector('meta[name="point"]').setAttribute("content", point);
});

I've tried to see if I could do this with Beautiful Soup but couldn't find anything as that normally revolves around editing specific tags with ids etc, and have also briefly looked into jinja2 but it doesn't seem like you can append to specific parts of the html script, rather just at the end of it.

Any help or advice on where to look would be greatly appreciated.

wbleakley
  • 15
  • 5
  • I don't get it, what has python to do with it? All I see is javascript. – Onki Hara Dec 06 '22 at 18:43
  • The rest of the program is written in python, creating the folium map and then using the returned lat/lon from the clickevent to create a route between the click point and the user's localaddress. So it seems more straightforward to append the js function to the html in the same python program, that being said, if there was a straightforward method with just js that would also work. – wbleakley Dec 06 '22 at 19:04

1 Answers1

2

You can modify the Marker template, to include the onClick event (javascript component). The following example will alert latlng on click.

import folium
from jinja2 import Template
from folium.map import Marker

# Modify Marker template to include the onClick event
click_template = """{% macro script(this, kwargs) %}
    var {{ this.get_name() }} = L.marker(
        {{ this.location|tojson }},
        {{ this.options|tojson }}
    ).addTo({{ this._parent.get_name() }}).on('click', onClick);
{% endmacro %}"""

# Change template to custom template
Marker._template = Template(click_template)

location_center = [51.7678, -0.00675564]
m = folium.Map(location_center, zoom_start=13)

# Create the onClick listener function as a branca element and add to the map html
click_js = """function onClick(e) {
                 var point = e.latlng; alert(point)
                 }"""
                 
e = folium.Element(click_js)
html = m.get_root()
html.script.get_root().render()
html.script._children[e.get_name()] = e

#Add marker (click on map an alert will display with latlng values)
marker = folium.Marker([51.7678, -0.00675564]).add_to(m)
PeaceLeka
  • 1,138
  • 1
  • 9
  • 11
  • 1
    Works perfectly and does exactly what I want, I've been trying at this for ages so thank you very much. – wbleakley Dec 07 '22 at 13:18
  • This sounds very interesting, perhaps it can also help me to add an AntPath on the map when I click a marker like questioned here: https://stackoverflow.com/q/74436743/13843906 ?? :) – flipSTAR Dec 08 '22 at 09:03