0
# Interactive Features
1
2
User interaction components including click handlers, custom controls, and specialized tools for enhanced map interactivity and user engagement.
3
4
## Capabilities
5
6
### Click Interaction Tools
7
8
Tools for capturing user clicks and responding with markers or coordinate display.
9
10
```python { .api }
11
class ClickForMarker:
12
"""
13
Add markers to the map by clicking on locations.
14
15
Parameters:
16
- popup: str or Popup, popup content for created markers (default None)
17
18
Returns:
19
ClickForMarker instance
20
"""
21
def __init__(self, popup=None): ...
22
23
class ClickForLatLng:
24
"""
25
Display latitude/longitude coordinates when clicking on the map.
26
27
Parameters:
28
- format_str: str, format string for coordinate display (default None)
29
- alert: bool, show coordinates in alert dialog (default False)
30
31
Returns:
32
ClickForLatLng instance
33
"""
34
def __init__(self, format_str=None, alert=False): ...
35
```
36
37
### Custom Controls
38
39
Base class and utilities for creating custom map controls and UI elements.
40
41
```python { .api }
42
class Control:
43
"""
44
Create custom controls for the map interface.
45
46
Parameters:
47
- position: str, control position ('topright', 'topleft', 'bottomright', 'bottomleft')
48
- html: str, HTML content for the control
49
- script: str, JavaScript code for control behavior
50
- style: str, CSS styles for the control
51
52
Returns:
53
Control instance
54
"""
55
def __init__(
56
self,
57
position='topright',
58
html='',
59
script='',
60
style=''
61
): ...
62
```
63
64
## Usage Examples
65
66
### Interactive Marker Creation
67
68
```python
69
import folium
70
71
# Create a map
72
m = folium.Map(location=[45.52, -122.67], zoom_start=12)
73
74
# Add click-to-create-marker functionality
75
click_marker = folium.ClickForMarker(
76
popup="Marker created by clicking!"
77
)
78
click_marker.add_to(m)
79
80
# Also add coordinate display on click
81
click_coords = folium.ClickForLatLng()
82
click_coords.add_to(m)
83
84
m.save('interactive_clicking.html')
85
```
86
87
### Custom Control Panel
88
89
```python
90
import folium
91
92
m = folium.Map(location=[45.52, -122.67], zoom_start=12)
93
94
# Custom control HTML
95
control_html = '''
96
<div style="
97
background: white;
98
padding: 10px;
99
border: 2px solid gray;
100
border-radius: 5px;
101
font-family: Arial;
102
">
103
<h4>Map Info</h4>
104
<p>Click anywhere to add markers</p>
105
<button onclick="alert('Control clicked!')">Info</button>
106
</div>
107
'''
108
109
# Custom control JavaScript
110
control_js = '''
111
console.log('Custom control loaded');
112
'''
113
114
# Add custom control
115
folium.Control(
116
position='topleft',
117
html=control_html,
118
script=control_js
119
).add_to(m)
120
121
# Add interactive functionality
122
folium.ClickForMarker(popup='User-created marker').add_to(m)
123
124
m.save('custom_control.html')
125
```
126
127
### Multi-level Interaction
128
129
```python
130
import folium
131
132
m = folium.Map(location=[45.52, -122.67], zoom_start=11)
133
134
# Create feature group for user interactions
135
interaction_group = folium.FeatureGroup(name='User Interactions')
136
137
# Add coordinate display
138
folium.ClickForLatLng(
139
format_str='Coordinates: {lat:.4f}, {lng:.4f}',
140
alert=True
141
).add_to(interaction_group)
142
143
# Add marker creation with custom popup
144
folium.ClickForMarker(
145
popup='''
146
<b>User Marker</b><br>
147
Created: <span id="timestamp"></span>
148
<script>
149
document.getElementById('timestamp').innerHTML = new Date().toLocaleString();
150
</script>
151
'''
152
).add_to(interaction_group)
153
154
# Add some existing markers for reference
155
reference_points = [
156
[45.515, -122.68, "Downtown"],
157
[45.53, -122.65, "Eastside"],
158
[45.51, -122.62, "Southeast"]
159
]
160
161
reference_group = folium.FeatureGroup(name='Reference Points')
162
163
for lat, lon, name in reference_points:
164
folium.Marker(
165
[lat, lon],
166
popup=name,
167
icon=folium.Icon(color='red', icon='star')
168
).add_to(reference_group)
169
170
# Add groups to map
171
interaction_group.add_to(m)
172
reference_group.add_to(m)
173
174
# Add layer control
175
folium.LayerControl().add_to(m)
176
177
m.save('multi_interaction.html')
178
```
179
180
### Advanced Custom Control with Map State
181
182
```python
183
import folium
184
185
m = folium.Map(location=[40.7128, -74.0060], zoom_start=10)
186
187
# Advanced control with map interaction
188
advanced_control_html = '''
189
<div id="mapControl" style="
190
background: rgba(255,255,255,0.9);
191
padding: 15px;
192
border-radius: 8px;
193
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
194
min-width: 200px;
195
">
196
<h4 style="margin: 0 0 10px 0;">Map Tools</h4>
197
<div style="margin-bottom: 10px;">
198
<button onclick="zoomToNYC()" style="width: 100%; padding: 5px;">Zoom to NYC</button>
199
</div>
200
<div style="margin-bottom: 10px;">
201
<button onclick="addRandomMarker()" style="width: 100%; padding: 5px;">Add Random Marker</button>
202
</div>
203
<div id="markerCount">Markers: 0</div>
204
</div>
205
'''
206
207
advanced_control_js = '''
208
var markerCount = 0;
209
210
function zoomToNYC() {
211
map.setView([40.7128, -74.0060], 12);
212
}
213
214
function addRandomMarker() {
215
var lat = 40.7128 + (Math.random() - 0.5) * 0.1;
216
var lng = -74.0060 + (Math.random() - 0.5) * 0.1;
217
218
L.marker([lat, lng])
219
.addTo(map)
220
.bindPopup('Random marker #' + (++markerCount));
221
222
document.getElementById('markerCount').innerHTML = 'Markers: ' + markerCount;
223
}
224
'''
225
226
# Add the advanced control
227
folium.Control(
228
position='topright',
229
html=advanced_control_html,
230
script=advanced_control_js
231
).add_to(m)
232
233
m.save('advanced_control.html')
234
```