From d164a1e9fb5134c4b2a35b222efa48c3e4786403 Mon Sep 17 00:00:00 2001
From: Frank <33519926+Conengmo@users.noreply.github.com>
Date: Sun, 27 Nov 2022 16:27:33 +0100
Subject: [PATCH] ClickForMarker with html popups
---
examples/ClickEvents.ipynb | 273 ++++++++++++++++++++++++++++---------
folium/features.py | 14 +-
2 files changed, 217 insertions(+), 70 deletions(-)
diff --git a/examples/ClickEvents.ipynb b/examples/ClickEvents.ipynb
index c239baf5e..3f5d2aebf 100644
--- a/examples/ClickEvents.ipynb
+++ b/examples/ClickEvents.ipynb
@@ -29,7 +29,9 @@
"data": {
"text/html": [
"
Make this Notebook Trusted to load map: File -> Trust Notebook
"
+ "</script>\n",
+ "</html>\" style=\"position:absolute;width:100%;height:100%;left:0;top:0;border:none !important;\" allowfullscreen webkitallowfullscreen mozallowfullscreen>"
],
"text/plain": [
- ""
+ ""
]
},
"execution_count": 2,
@@ -124,6 +130,125 @@
"*Click on the map to see the effects*"
]
},
+ {
+ "cell_type": "markdown",
+ "id": "9cecff8c",
+ "metadata": {},
+ "source": [
+ "You can customize the popup by providing a string, an IFrame object or an Html object. You can include the latitude and longitude of the marker by using `${lat}` and `${lng}`."
+ ]
+ },
+ {
+ "cell_type": "code",
+ "execution_count": 3,
+ "id": "7755ae9b",
+ "metadata": {},
+ "outputs": [
+ {
+ "data": {
+ "text/html": [
+ "Make this Notebook Trusted to load map: File -> Trust Notebook
"
+ ],
+ "text/plain": [
+ ""
+ ]
+ },
+ "execution_count": 3,
+ "metadata": {},
+ "output_type": "execute_result"
+ }
+ ],
+ "source": [
+ "folium.Map().add_child(ClickForMarker(\"Lat: ${lat}
Lon: ${lng}\"))"
+ ]
+ },
+ {
+ "cell_type": "markdown",
+ "id": "45c985b4",
+ "metadata": {},
+ "source": [
+ "*Click on the map to see the effects*"
+ ]
+ },
{
"cell_type": "markdown",
"id": "76e5e9b9",
@@ -134,7 +259,7 @@
},
{
"cell_type": "code",
- "execution_count": 3,
+ "execution_count": 4,
"id": "205a9f4a",
"metadata": {},
"outputs": [
@@ -142,7 +267,9 @@
"data": {
"text/html": [
"Make this Notebook Trusted to load map: File -> Trust Notebook
"
+ "</script>\n",
+ "</html>\" style=\"position:absolute;width:100%;height:100%;left:0;top:0;border:none !important;\" allowfullscreen webkitallowfullscreen mozallowfullscreen>"
],
"text/plain": [
- ""
+ ""
]
},
- "execution_count": 3,
+ "execution_count": 4,
"metadata": {},
"output_type": "execute_result"
}
@@ -247,7 +378,7 @@
},
{
"cell_type": "code",
- "execution_count": 4,
+ "execution_count": 5,
"id": "5c564b6b",
"metadata": {},
"outputs": [
@@ -255,7 +386,9 @@
"data": {
"text/html": [
"Make this Notebook Trusted to load map: File -> Trust Notebook
"
+ "</script>\n",
+ "</html>\" style=\"position:absolute;width:100%;height:100%;left:0;top:0;border:none !important;\" allowfullscreen webkitallowfullscreen mozallowfullscreen>"
],
"text/plain": [
- ""
+ ""
]
},
- "execution_count": 4,
+ "execution_count": 5,
"metadata": {},
"output_type": "execute_result"
}
@@ -368,7 +505,7 @@
],
"metadata": {
"kernelspec": {
- "display_name": "Python 3",
+ "display_name": "Python 3 (ipykernel)",
"language": "python",
"name": "python3"
},
@@ -382,7 +519,7 @@
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
- "version": "3.7.10"
+ "version": "3.9.13"
}
},
"nbformat": 4,
diff --git a/folium/features.py b/folium/features.py
index a08dc898a..520674930 100644
--- a/folium/features.py
+++ b/folium/features.py
@@ -21,6 +21,7 @@
from folium.utilities import (
_parse_size,
camelize,
+ escape_backticks,
get_bounds,
get_obj_in_upper_tree,
image_to_url,
@@ -1695,9 +1696,16 @@ class ClickForMarker(MacroElement):
Parameters
----------
- popup: str, default None
+ popup: str or IFrame or Html, default None
Text to display in the markers' popups.
+ This can also be an Element like IFrame or Html.
If None, the popups will display the marker's latitude and longitude.
+ You can include the latitude and longitude with ${lat} and ${lng}.
+
+
+ Examples
+ --------
+ >>> ClickForMarker("Lat: ${lat}
Lon: ${lng}")
"""
@@ -1721,8 +1729,10 @@ def __init__(self, popup=None):
super().__init__()
self._name = "ClickForMarker"
+ if isinstance(popup, Element):
+ popup = popup.render()
if popup:
- self.popup = "".join(['"', popup, '"'])
+ self.popup = "`" + escape_backticks(popup) + "`"
else:
self.popup = '"Latitude: " + lat + "
Longitude: " + lng '