I found some nice solutions here:
How to create on click popup which includes plots using ipyleaflet, Folium or Geemap?
which potentially would allow me to assign more things to the marker when it's clicked. In my situation I have a lot of circles assigned to the marker, but they appear all which doesn't look well.
I need the folium.Circle populated at the moment when I click on the marker. It could appear along with the pop-up information.
My code looks as follows:
fm = folium.Marker(
location=[lat,lng],
popup=folium.Popup(max_width=450).add_child(
folium.Circle(
[lat,lng],
radius=10,
fill=True,
weight=0.2)),
icon = folium.Icon(color='darkpurple', icon='glyphicon-briefcase'))
map.add_child(fm)
Unfortunately, it doesn't work, as my map comes without some features:
Despite no error from Python's console side, I have an error in the map console
Uncaught TypeError: Cannot read properties of undefined (reading 'addLayer') at i.addTo (leaflet.js:5:64072)
and I have no faintest idea how to solve it
Is there any option of making my circle populated just when clicked on the marker?
UPDATE:
With this approach:
mapCirclVar = map.get_name()
js_f = """
$(document).ready(function () {
function onClick(e) {
var circle = L.circle([e.latlng.lat, e.latlng.lng], {radius: 10,
fill: true, weight: 0.2}).addTo({map});
}
circle.on('click', function (e) {
alert("Hello, circle!");
});
});
""".replace("{map}", mapCirclVar)
ci.add_child(
folium.Marker(location=[lat,lng],
tooltip='<strong>City to survey:</strong> ' + city,
popup=js_f,
icon = folium.Icon(color='red', icon='glyphicon- calendar'
)
))
I see some mess in pop-ups instead of what I want to see...
UPDATE II:
Show path in folium map by clicking or hovering marker
As per an answer in this tread I tried the following ways:
from folium.map import Marker, Template
job_range = """
{% macro script(this, kwargs) %}
$(document).ready(function() {
function onClick(e) {
var circle = L.circle([e.latlng.lat, e.latlng.lng],{
radius: 10,
fill: true,
weight: 0.2}).addTo{{ this._parent.get_name() }};
}
circle.on('click', function (e) {
alert("Hello, circle!");
});
});
{% endmacro %}
"""
Marker._template = Template(job_range)
but it doesn't work either, as console says that the marker cannot be identified. Another example:
js_f = """
$(document).ready(function () {
function onClick(e) {
var circle = L.circle([e.latlng.lat, e.latlng.lng], {radius: 10,
fill: true, weight: 0.2}).addTo({map});
}
circle.on('click', function (e) {
alert("Hello, circle!");
});
});
""".replace("{map}", mapCirclVar)
e = folium.Element(js_f)
html = map.get_root()
html.script.add_child(e)
is still not good.
UPDATE III
By searching the web I've found:
https://github.com/python-visualization/folium/blob/main/folium/vector_layers.py#L318
which make sense, as we can define the class and use the jinja template.
My code, which looks like this:
class Circle(Marker):
"""
"""
_template = Template(
"""
{% macro script(this, kwargs) %}
$(document).ready(function() {
function onClick(e) {
var circle = L.circle([e.latlng.lat, e.latlng.lng],{
radius: 10,
fill: true,
weight: 0.2}).addTo{{ this._parent.get_name() }};
}
circle.on('click', function (e) {
alert("Hello, circle!");
});
});
{% endmacro %}
"""
)
def __init__(
self,
location: [lat,lng],
radius: float = 50,
popup: Union[Popup, str, None] = None,
tooltip: Union[Tooltip, str, None] = None,
**kwargs: TypePathOptions
):
super().__init__(location, popup=popup, tooltip=tooltip)
self._name = "circle"
self.options = path_options(line=False, radius=radius, **kwargs)
work_radius = Circle()
fs.add_child(work_radius)
I have the following errors:
popup: Union[Popup, str, None] = None, NameError: name 'Union' is not defined
ValueError: Marker location must be assigned when added directly to map.
