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 '