Interactive Features

class ClickForMarker:
    """
    Add markers to the map by clicking on locations.
    
    Parameters:
    - popup: str or Popup, popup content for created markers (default None)
    
    Returns:
    ClickForMarker instance
    """
    def __init__(self, popup=None): ...

class ClickForLatLng:
    """
    Display latitude/longitude coordinates when clicking on the map.
    
    Parameters:
    - format_str: str, format string for coordinate display (default None)
    - alert: bool, show coordinates in alert dialog (default False)
    
    Returns:
    ClickForLatLng instance
    """
    def __init__(self, format_str=None, alert=False): ...

class Control:
    """
    Create custom controls for the map interface.
    
    Parameters:
    - position: str, control position ('topright', 'topleft', 'bottomright', 'bottomleft')
    - html: str, HTML content for the control
    - script: str, JavaScript code for control behavior
    - style: str, CSS styles for the control
    
    Returns:
    Control instance
    """
    def __init__(
        self,
        position='topright',
        html='',
        script='',
        style=''
    ): ...

import folium

# Create a map
m = folium.Map(location=[45.52, -122.67], zoom_start=12)

# Add click-to-create-marker functionality
click_marker = folium.ClickForMarker(
    popup="Marker created by clicking!"
)
click_marker.add_to(m)

# Also add coordinate display on click
click_coords = folium.ClickForLatLng()
click_coords.add_to(m)

m.save('interactive_clicking.html')

import folium

m = folium.Map(location=[45.52, -122.67], zoom_start=12)

# Custom control HTML
control_html = '''
<div style="
    background: white;
    padding: 10px;
    border: 2px solid gray;
    border-radius: 5px;
    font-family: Arial;
">
    <h4>Map Info</h4>
    <p>Click anywhere to add markers</p>
    <button onclick="alert('Control clicked!')">Info</button>
</div>
'''

# Custom control JavaScript
control_js = '''
console.log('Custom control loaded');
'''

# Add custom control
folium.Control(
    position='topleft',
    html=control_html,
    script=control_js
).add_to(m)

# Add interactive functionality
folium.ClickForMarker(popup='User-created marker').add_to(m)

m.save('custom_control.html')

import folium

m = folium.Map(location=[45.52, -122.67], zoom_start=11)

# Create feature group for user interactions
interaction_group = folium.FeatureGroup(name='User Interactions')

# Add coordinate display
folium.ClickForLatLng(
    format_str='Coordinates: {lat:.4f}, {lng:.4f}',
    alert=True
).add_to(interaction_group)

# Add marker creation with custom popup
folium.ClickForMarker(
    popup='''
    <b>User Marker</b><br>
    Created: <span id="timestamp"></span>
    <script>
        document.getElementById('timestamp').innerHTML = new Date().toLocaleString();
    </script>
    '''
).add_to(interaction_group)

# Add some existing markers for reference
reference_points = [
    [45.515, -122.68, "Downtown"],
    [45.53, -122.65, "Eastside"], 
    [45.51, -122.62, "Southeast"]
]

reference_group = folium.FeatureGroup(name='Reference Points')

for lat, lon, name in reference_points:
    folium.Marker(
        [lat, lon],
        popup=name,
        icon=folium.Icon(color='red', icon='star')
    ).add_to(reference_group)

# Add groups to map
interaction_group.add_to(m)
reference_group.add_to(m)

# Add layer control
folium.LayerControl().add_to(m)

m.save('multi_interaction.html')

import folium

m = folium.Map(location=[40.7128, -74.0060], zoom_start=10)

# Advanced control with map interaction
advanced_control_html = '''
<div id="mapControl" style="
    background: rgba(255,255,255,0.9);
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    min-width: 200px;
">
    <h4 style="margin: 0 0 10px 0;">Map Tools</h4>
    <div style="margin-bottom: 10px;">
        <button onclick="zoomToNYC()" style="width: 100%; padding: 5px;">Zoom to NYC</button>
    </div>
    <div style="margin-bottom: 10px;">
        <button onclick="addRandomMarker()" style="width: 100%; padding: 5px;">Add Random Marker</button>
    </div>
    <div id="markerCount">Markers: 0</div>
</div>
'''

advanced_control_js = '''
var markerCount = 0;

function zoomToNYC() {
    map.setView([40.7128, -74.0060], 12);
}

function addRandomMarker() {
    var lat = 40.7128 + (Math.random() - 0.5) * 0.1;
    var lng = -74.0060 + (Math.random() - 0.5) * 0.1;
    
    L.marker([lat, lng])
        .addTo(map)
        .bindPopup('Random marker #' + (++markerCount));
    
    document.getElementById('markerCount').innerHTML = 'Markers: ' + markerCount;
}
'''

# Add the advanced control
folium.Control(
    position='topright',
    html=advanced_control_html,
    script=advanced_control_js
).add_to(m)

m.save('advanced_control.html')