How to record click events on an interactive leaflet map?

[tanishquesuri]

Looking for a way to create a custom component that captures click events on a leaflet map and records the lat-lon for further processing.

Setup an initial version, but this does nor record the coordinates:

import reflex as rx
from reflex.components.component import NoSSRComponent
from reflex import Component, Var
from typing import Any

class MapClickEvent(rx.Base):
    latlng: dict[str, float]

def map_click_signature(e: MapClickEvent) -> tuple[float, float]:
    # Return as tuple to match event handler signature
    return (e.latlng["lat"], e.latlng["lng"])

class MapContainer(NoSSRComponent):
    library = "react-leaflet" 
    tag = "MapContainer"
    
    center: Var[list]
    zoom: Var[int]
    scroll_wheel_zoom: Var[bool]
    
    lib_dependencies: list[str] = [
        "react",
        "react-dom", 
        "leaflet",
        "react-leaflet"
    ]

    def add_imports(self):
        return {"": ["leaflet/dist/leaflet.css"]}
        
    def get_event_triggers(self) -> dict[str, Any]:
        return {
            **super().get_event_triggers(),
            "onClick": map_click_signature  # Changed to onClick to match React event name
        }

class TileLayer(NoSSRComponent):
    library = "react-leaflet"
    tag = "TileLayer"
    url: Var[str]

map_container = MapContainer.create
tile_layer = TileLayer.create

class State(rx.State):
    """The app state."""
    locations: list[tuple[float, float]] = []  # Changed to tuple for consistency
    
    def add_location(self, lat: float, lng: float):
        """Add a new location when map is clicked."""
        print(f"Adding location: {lat}, {lng}")  # Debug print
        self.locations.append((lat, lng))

def index():
    return rx.vstack(
        map_container(
            tile_layer(url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"),
            center=[51.505, -0.09],
            zoom=13,
            scroll_wheel_zoom=True,  # Enable scroll wheel zoom
            height="400px",
            width="100%",
            onClick=State.add_location,  # Changed to onClick
        ),
        rx.foreach(
            State.locations,
            lambda loc: rx.text(f"Clicked at: {loc[0]}, {loc[1]}")
        ),
    )

app = rx.App()
app.add_page(index)