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
1 change: 1 addition & 0 deletions docs/user_guide/ui_elements.rst
Original file line number Diff line number Diff line change
Expand Up @@ -6,5 +6,6 @@ UI elements


ui_elements/layer_control
ui_elements/control
ui_elements/popups
ui_elements/icons
54 changes: 54 additions & 0 deletions docs/user_guide/ui_elements/control.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
```{code-cell} ipython3
---
nbsphinx: hidden
---
import folium
from folium.features import Control
```

# Controls

Leaflet controls are UI elements anchored to the corners of a map (zoom, scale,
custom buttons, etc.). Folium exposes a generic `Control` class that can render
any `L.Control.<Name>` class. This is useful when you want to wire up a Leaflet
plugin directly in user code without creating a new `folium.plugins` class.

## Built-in controls

```{code-cell} ipython3
m = folium.Map(location=[45, 0], zoom_start=4, zoom_control=False)
Control("Zoom", position="topleft").add_to(m)
Control("Scale", position="bottomleft").add_to(m)
m
```

## Leaflet plugin controls

If a Leaflet plugin exposes a `L.Control.<Name>` class, you can wire it up
directly and attach its JS/CSS assets to the map.

```python
import folium
from folium.features import Control

m = folium.Map(location=[45, 0], zoom_start=4)

control = Control(
"MyPlugin",
position="topright",
# Any plugin options become JS options.
foo="bar",
)

# Add the plugin's JS/CSS assets.
control.add_js_link("my-plugin", "https://example.com/leaflet.my-plugin.min.js")
control.add_css_link("my-plugin", "https://example.com/leaflet.my-plugin.css")

control.add_to(m)
m
```

For reusable plugins, consider creating a dedicated `folium.plugins` class. For
one-off integrations, `Control` keeps the wiring minimal.
Loading