Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions docs/user_guide/features.rst
Original file line number Diff line number Diff line change
Expand Up @@ -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='<div style="font-size: 12pt; color : black">Hello World!</div>',
)
).add_to(m)
m.save("map.html")

**2. Tooltip and Popup Text**

Use tooltips for hover text or popups for clickable text.
13 changes: 13 additions & 0 deletions docs/user_guide/vector_layers/index.rst
Original file line number Diff line number Diff line change
@@ -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
45 changes: 45 additions & 0 deletions docs/user_guide/vector_layers/text_elements.rst
Original file line number Diff line number Diff line change
@@ -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='<div style="font-size: 16pt; color: red;">Hello Map!</div>',
)
).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.
Loading