From 6c5315357c573d25a7c71cee37e9b5f439a4fe5b Mon Sep 17 00:00:00 2001 From: craigsw86 Date: Mon, 13 Oct 2025 18:58:10 -0400 Subject: [PATCH 1/2] Add 'Text Elements' section to Vector Layers documentation --- docs/user_guide/vector_layers/index.rst | 13 ++++++ .../vector_layers/text_elements.rst | 45 +++++++++++++++++++ 2 files changed, 58 insertions(+) create mode 100644 docs/user_guide/vector_layers/index.rst create mode 100644 docs/user_guide/vector_layers/text_elements.rst diff --git a/docs/user_guide/vector_layers/index.rst b/docs/user_guide/vector_layers/index.rst new file mode 100644 index 0000000000..679a4d6098 --- /dev/null +++ b/docs/user_guide/vector_layers/index.rst @@ -0,0 +1,13 @@ +Vector Layers +============= + +This section covers the different vector layers available in Folium. +Vector layers are used to draw shapes and display information directly on your maps. + +.. toctree:: + :maxdepth: 2 + + rectangle + polyline + polygon + text_elements diff --git a/docs/user_guide/vector_layers/text_elements.rst b/docs/user_guide/vector_layers/text_elements.rst new file mode 100644 index 0000000000..8e3053ef5c --- /dev/null +++ b/docs/user_guide/vector_layers/text_elements.rst @@ -0,0 +1,45 @@ +Text Elements +============= + +Folium allows you to add text to your maps in several ways, beyond the standard +marker popups and tooltips. This section covers the most common approaches. + +Adding Text with DivIcon +------------------------ + +The simplest way to display static text on a map is by using a `DivIcon`. +A `DivIcon` creates a marker that shows HTML content directly on the map. + +Example: + +.. code-block:: python + + import folium + from folium.features import DivIcon + + m = folium.Map(location=[40, -100], zoom_start=4) + + folium.Marker( + location=[40, -100], + icon=DivIcon( + icon_size=(150,36), + icon_anchor=(0,0), + html='
Hello Map!
', + ) + ).add_to(m) + + m + +Other Approaches +---------------- + +- **Leaflet text layers**: You can directly use the underlying Leaflet `L.divIcon` or + `L.tooltip` via Folium's `CustomPane` or plugins. +- **Branca HTML templates**: For more advanced formatting, you can inject HTML + elements into your map using Branca's `Element` class. + +Tips +---- + +- DivIcon text is always visible, unlike tooltips or popups. +- Use HTML/CSS for styling text size, color, and position. From 642429a228e469e940b0e617f8012b7d1b5d8528 Mon Sep 17 00:00:00 2001 From: craigsw86 Date: Thu, 16 Oct 2025 11:42:08 -0400 Subject: [PATCH 2/2] Add user guide section for text elements using DivIcon and Tooltip --- docs/user_guide/features.rst | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/docs/user_guide/features.rst b/docs/user_guide/features.rst index 99455a4277..a4d56ff130 100644 --- a/docs/user_guide/features.rst +++ b/docs/user_guide/features.rst @@ -6,3 +6,30 @@ Features features/fit_overlays features/click_related_classes + +Text Elements +============= + +Folium supports several ways to display text on maps. + +**1. DivIcon Labels** +To add always-visible text labels on the map: + +.. code-block:: python + + from folium import Map, Marker, DivIcon + + m = Map(location=[40.7128, -74.0060], zoom_start=13) + Marker( + location=[40.7128, -74.0060], + icon=DivIcon( + icon_size=(150,36), + icon_anchor=(0,0), + html='
Hello World!
', + ) + ).add_to(m) + m.save("map.html") + +**2. Tooltip and Popup Text** + +Use tooltips for hover text or popups for clickable text.